Человек открыл товар из поиска и хочет посмотреть другие модели из той же категории. Кнопка «Назад» вернёт его в поисковик, а меню заставит искать нужный раздел заново. Хлебные крошки дают другой путь: показывают положение страницы и позволяют перейти к её родителю.
В Гуси-Лебеди предлагаем проектировать эту строку как рабочую навигацию. Разберём, когда она нужна, откуда брать цепочку, что делать с несколькими категориями и как проверить ссылки, доступность, мобильное оформление и микроразметку.
Что такое хлебные крошки и каким сайтам они нужны
Хлебные крошки, или breadcrumbs, являются цепочкой родительских разделов страницы. Например: «Каталог → Освещение → Настольные лампы». Она отвечает на вопрос «где я нахожусь» и даёт переход на уровень выше.
Такой ориентир полезен в каталоге, большом блоге, базе знаний или на сайте с вложенными услугами. Особенно стоит проверить прямой вход из поиска: посетитель не видел меню и предыдущих страниц, поэтому структура должна быть понятна без истории переходов.
Крошки дополняют меню, поиск и ссылки внутри содержания. Они не показывают все направления сайта и не заменяют основной способ выбора раздела. На одностраничном лендинге без иерархии искусственная цепочка ничего не объясняет. Для переходов между блоками страницы используйте соответствующее меню.
Не превращайте крошки в индикатор этапов заказа. «Корзина → Доставка → Оплата» сообщает о процессе, а не о месте документа в структуре. Конкретный вариант оформления выбирают по структуре и сценариям вашего проекта.
Размещайте строку там, где её легко найти до чтения основного содержания. Ссылки должны выглядеть как ссылки, а текущий пункт отличаться от них. Маленький бледный текст может занимать мало места, но навигацию нужно читать и нажимать.
Как построить цепочку: структура, история и фильтры
Три похожие строки могут решать совершенно разные задачи. Иерархия показывает положение документа. История объясняет, как человек пришёл. Фильтры показывают условия текущей выборки. Если смешать всё в один блок, один товар получит случайных родителей.
| Элемент | На какой вопрос отвечает | Учебный пример |
|---|---|---|
| Хлебные крошки | Где страница в структуре? | Каталог → Освещение → Настольные лампы |
| Возврат к результатам | К какому списку вернуться? | К результатам поиска ламп |
| Активные фильтры | Что выбрано в каталоге? | Белый цвет, выбранный диапазон цены |
Для каталога удобно отдельно задать устойчивую цепочку и отдельно возврат к прежней выборке. Тогда при прямом открытии карточка сохраняет понятное место, а посетитель из каталога может вернуться с выбранными условиями. Опишите, как этот контекст хранится и что показывать, если его нет.
Не создавайте крошки простым разрезанием URL. Адрес бывает плоским, содержит технический префикс или не повторяет навигационную структуру. Каждый сегмент не обязан быть отдельной страницей. Нельзя превращать несуществующий путь в ссылку только потому, что он встречается в адресе.
Источник цепочки должен содержать связь страницы с родителем или явное правило выбора раздела. Названия получайте из согласованной модели содержания. После переименования категории обновляйте цепочку её страниц, а не поддерживайте две версии вручную.
Навигационное название можно сделать короче H1, сохранив смысл. «Настольные лампы» понятнее в цепочке, чем полный рекламный заголовок с условиями доставки. Основные связи стоит определить вместе со структурой разделов сайта.
Что делать, если у товара несколько категорий
Учебная лампа находится в категории «Освещение» и подборке «Подарки». Сначала решите, являются ли обе связи равноправными путями или подборка лишь временно объединяет предложения. Для устойчивой категории и сезонной акции часто нужны разные навигационные элементы.
Можно строить основной путь через товарную категорию, а возвращение в подборку показывать отдельной ссылкой. Так место товара остаётся понятным при прямом входе, а рабочий контекст посетителя не теряется. Это проектное решение, которое нужно проверить на ваших сценариях.
Если у страницы действительно несколько равноправных путей, храните их явно. Google описывает несколько цепочек в документации BreadcrumbList. Но каждый тег товара не становится родителем автоматически: у пути должен быть смысл для посетителя.
Различайте несколько путей и несколько адресов. Одна карточка может открываться из разных категорий по одному основному URL. Создание отдельного дубля под каждую категорию требует самостоятельного решения об адресах и индексировании. Риски разбираем в статье о дублях страниц.
Запишите поведение для разных входов: из поиска, категории, подборки и сохранённой ссылки. Укажите основной раздел и способ его изменения редактором. Проверьте, что после удаления подборки карточка не остаётся без рабочего родителя.
Как сделать доступные хлебные крошки в HTML
Цепочке нужна понятная навигационная область и последовательный список. В паттерне W3C используют область навигации с названием. Если текущая страница остаётся ссылкой, её обозначают через aria-current="page"; у текстового текущего пункта этот атрибут необязателен.
Ниже учебный фрагмент. Он показывает структуру компонента, а адреса нужно заменить существующими разделами своего сайта.
<nav aria-label="Хлебные крошки">
<ol>
<li>
<a href="/catalog/">Каталог</a>
</li>
<li>
<a href="/catalog/light/">Освещение</a>
</li>
<li>
<span aria-current="page">
Настольные лампы
</span>
</li>
</ol>
</nav>Разделители оформляйте как декоративные элементы, а не отдельные фокусируемые ссылки. В примере W3C показано такое разделение. Если вместо текста «Главная» используется значок дома, обеспечьте понятное доступное название.
Проверьте обычную клавиатурную навигацию: фокус идёт по ссылкам в логичном порядке, виден и не попадает в декоративные стрелки. Названия должны объяснять назначение перехода. Подсказка только при наведении мыши не решает вопрос для телефона и клавиатуры.
Текущий пункт часто удобнее оставить текстом, поскольку повторное открытие той же страницы не помогает двигаться по структуре. Если он является ссылкой, обозначьте текущее состояние. При заказе вёрстки навигационных компонентов включите эти проверки в приёмку.
Как оформить длинную цепочку на мобильном экране
На узком экране длинный путь не должен расширять всю страницу или перекрывать заголовок. Выберите правило: перенос строк, прокрутка внутри блока или осмысленное сокращение части уровней. Нужный контекст и переход к ближайшему родителю должны оставаться понятными.
Не уменьшайте шрифт до нечитаемого размера и не заменяйте все названия одинаковыми многоточиями. Если уровни скрываются за раскрывающимся элементом, проверьте открытие, переходы и закрытие с сенсорного экрана и клавиатуры. Пользователь должен иметь возможность узнать название нужного раздела.
Проверьте длинные категории, увеличение текста, разные языковые версии и ширину, на которой компонент реально используется. Короткая тестовая строка «Главная → Блог» не проверяет сложную цепочку каталога.
В проектировании адаптивной навигации задайте правило для всего компонента: какие уровни остаются, как показываются скрытые и чем текущий пункт отличается от ссылки. После реализации повторите сценарии из статьи об адаптивном интерфейсе.
Мобильный интерфейс сайта и оформление поискового результата являются разными задачами. Сейчас Google указывает поддержку хлебных крошек в своей выдаче на компьютерах. Это не причина удалять удобную навигацию со страницы на телефоне.
Как проверить BreadcrumbList, ссылки и результат настройки
Структурированные данные формируйте из той же модели, что видимую цепочку. BreadcrumbList содержит элементы ListItem с названиями, адресами и порядком. Google требует минимум два элемента и допускает отсутствие адреса у последнего. Для Яндекса сверяйтесь с условиями навигационных цепочек.
Пример JSON-LD и различия валидаторов есть в статье о настройке микроразметки. Проверяйте весь опубликованный URL: тема и плагин могут выводить разные цепочки, а кэш сохранять прежнее название. Отдельный правильный фрагмент не доказывает согласованность страницы целиком.
| Случай | Что должно произойти | Как проверить |
|---|---|---|
| Прямой вход в карточку | Понятный путь без истории посещений | Открыть URL в новой сессии |
| Несколько категорий | Работает согласованное правило выбора пути | Открыть карточку из разных разделов |
| Переименование родителя | Актуальное название в интерфейсе и данных | Сравнить HTML и BreadcrumbList |
| Удаление раздела | Нет ссылки на отсутствующего родителя | Проверить конечные ответы ссылок |
| Длинное название | Цепочка читается и не расширяет страницу | Телефон и увеличенный текст |
| Обновление темы | Не появились противоречия и дубли | Повторить проверку разных шаблонов |
Валидатор помогает найти ошибки структуры, но не знает, правильно ли выбран родитель вашего товара. Поэтому дополните его ручной проверкой названий и переходов. Откройте все ссылки выбранных тестовых цепочек и убедитесь, что конечная страница соответствует ожиданию.
Не обещайте конкретный прирост поисковых позиций или кликабельности от одной строки. Яндекс не гарантирует использование полученных данных, а видимое оформление может отличаться от переданной цепочки. В отчёте разделяйте установленный компонент, отсутствие выявленных ошибок и фактические наблюдения.
Если оцениваете переходы, учитывайте тип страницы и источник входа. Сравнение случайных групп не объясняет эффект навигации. Хорошая приёмка подтверждает более конкретный результат: человек понимает своё место, может перейти к нужному родителю, а ссылки и разметка остаются согласованными после изменений.