Как сделать хлебные крошки для страниц и товаров
Хлебные крошки — это не декоративная строка «Главная / Услуги / Страница». Каждый промежуточный пункт должен вести на реальную страницу, а структурированные данные BreadcrumbList — повторять тот же путь. На обычном сайте дизайнер может собрать крошки блоком и ссылками без кода. В каталоге задача сложнее: текущий товар и его категория приходят из данных магазина, и ненадёжный скрипт легко оставляет название предыдущей карточки.
Короткий ответ
Для обычного сайта соберите крошки вручную: реальные ссылки на главную и раздел,
текущая страница — текстом. Для каталога не копируйте один блок на все товары с
заменой заголовка скриптом, пока не найден надёжный источник категории. Видимая
цепочка и BreadcrumbList должны собираться из одних данных.
Когда крошки действительно помогают
Они полезны на проектах, где есть иерархия:
- главная → услуги → отдельная услуга;
- главная → блог → статья;
- главная → каталог → категория → товар;
- главная → объекты → конкретный объект.
На лендинге из одной страницы крошки не нужны. Якорное меню лучше объясняет путь по секциям и не притворяется структурой страниц.
Вариант без кода для обычного сайта
Соберите строку в стандартном блоке или Zero Block:
Главная → Услуги → Дизайн сайтаПервые два пункта — настоящие ссылки. Последний — текущая страница, его не надо
заставлять перезагружать самого себя. Для доступности используйте понятную
подпись навигации и отметьте текущий пункт aria-current="page", если инструмент
позволяет задать атрибут.
Не делайте всю цепочку одной текстовой ссылкой. На телефоне посетителю важно вернуться именно в раздел, а не только на главную.
Сначала нарисуйте карту страниц
До оформления составьте таблицу:
| Страница | Родитель | Адрес родителя |
|---|---|---|
| Дизайн сайта | Услуги | /services |
| Интернет-магазин | Услуги | /services |
| Статья о формах | Блог | /articles |
Если для промежуточного уровня нет страницы, не включайте его только ради красивой глубины. Пункт «Направления» без адреса не помогает посетителю и не должен неожиданно появляться в микроразметке.
Что такое BreadcrumbList
Это структурированные данные, которые описывают последовательность пунктов и их позиции. Они не заменяют видимые крошки. Поисковик получает дополнительное описание того же маршрута, который человек видит на странице.
Правило простое:
- одинаковый порядок;
- одинаковые названия;
- одинаковые рабочие адреса;
- позиции начинаются с единицы и не повторяются.
Общий разбор JSON-LD и того, что Тильда генерирует сама, есть в статье о микроразметке.
Почему товары сложнее обычных страниц
Каталог Тильды может открыть товар в попапе, изменить адрес через history API и
загрузить данные отдельным запросом getproduct. При переходе между карточками
часть разметки перерисовывается.
Из этого следуют три требования к автоматическим крошкам:
- Понимать, какой товар открыт сейчас, а не был открыт первым.
- Получать его категорию из данных каталога, а не угадывать по заголовку.
- Обновлять и видимую строку, и JSON-LD после
catalog:popupShowed.
В текущем снимке рантайма найден uid товара и путь загрузки, но не доказан единый источник категории для всех видов товарных страниц. Поэтому готовый MOD-174 принимает явную цепочку названий и адресов, а не притворяется универсальным автоматическим определителем категории.
Почему нельзя брать категорию из URL
Адрес может быть изменён вручную, товар может открываться в попапе, а языковая версия — иметь другой путь. Название категории из хлебных крошек тогда не совпадёт с данными магазина.
Парсинг видимого заголовка тоже хрупок: дизайнер переименует класс, добавит перенос строки или поменяет шаблон карточки, и скрипт перестанет понимать текст. Надёжная модификация должна сначала доказать источник данных на живом магазине.
Проверка перед сдачей
Для ручных и автоматических крошек пройдите один маршрут:
- прямой вход по адресу страницы или товара;
- переход из категории;
- открытие следующего товара без перезагрузки;
- кнопки браузера «Назад» и «Вперёд»;
- мобильная ширина и длинное название;
- проверка каждой промежуточной ссылки;
- совпадение видимого пути и JSON-LD.
Клиенту передайте карту «страница → родитель». Тогда при создании нового раздела он понимает, какой блок копировать и какие два места обновлять, пока автоматический мод для каталога не прошёл живую проверку.