Хлебные крошки на сайте: что это и зачем они нужны

Хлебные крошки (breadcrumbs) – это строка навигации со ссылками, которая показывает, где в структуре сайта находится текущая страница: от главной через разделы до неё самой.

Название взято из сказки о Гензеле и Гретель: дети бросали крошки, чтобы найти дорогу домой. На сайте это выглядит так: Главная › Электроника › Компьютеры › Системные блоки. Человек пришёл из поиска сразу в карточку товара и не видел ни главной, ни каталога. По крошкам он за секунду понимает, где оказался, и одним кликом поднимается в раздел, чтобы посмотреть другие модели.

Что крошки дают посетителю и поисковику

• Удобство. Посетитель видит, в каком разделе находится, и возвращается на уровень выше без кнопки «Назад» и поиска по меню. Это часть юзабилити, особенно на сайтах с сотнями страниц и глубоким каталогом.
• Перелинковка. С каждой карточки и статьи стоят ссылки на родительские разделы, поэтому разделы получают больше внутренних ссылок. Подробнее в статье Перелинковка.
• Понятная структура для робота. По цепочке поисковик видит вложенность страниц и быстрее находит разделы.
• Сниппет. Если крошки размечены, Google может показать в выдаче путь по разделам вместо длинного адреса страницы.

Как выглядят хлебные крошки

Обычно это строка мелким шрифтом над заголовком страницы. Разделы в ней кликабельны и разделены знаком «›», «/» или «>». Последний элемент, текущая страница, ссылкой не делается.

На схеме цепочка для карточки товара: из модели компьютера она ведёт обратно в разделы «Системные блоки», «Компьютеры» и «Электроника». В интернет-магазинах такую строку обычно ставят сразу под меню.

Три вида цепочек и вариант с выпадающим списком

По тому, как строится цепочка, крошки делят на три вида:

• По структуре сайта. Показывают место страницы в каталоге, всегда одинаково, откуда бы ни пришёл человек. Это стандарт для большинства сайтов.
• По атрибутам. Встречаются в каталогах с фильтрами: Обувь › Кроссовки › Размер 42. Последние элементы описывают выбранные параметры, а не разделы.
• По истории посещений. Повторяют маршрут конкретного человека по сайту. Для этого есть кнопка «Назад» в браузере, а такие крошки только путают.

Отдельно бывают крошки с выпадающим списком. При наведении на раздел появляется перечень соседних подразделов, и можно перейти в другую категорию, не поднимаясь на уровень выше. Такой вариант удобен крупным магазинам.

Как построить цепочку: основная категория и телефон

Крошки повторяют структуру сайта, а не историю переходов. Первым элементом обычно идёт главная страница, последним текущая. Все элементы, кроме текущей страницы, кликабельны. Названия совпадают с названиями разделов в меню. Слишком длинное название можно сократить, но так, чтобы смысл остался понятен.

Если товар лежит в двух категориях, выберите для него одну основную и стройте цепочку от неё. Иначе у одной карточки появится несколько путей, а вместе с ними и дубли адресов.

На телефоне длинная цепочка занимает две-три строки и сдвигает контент вниз. Обычно её сокращают до одного шага назад («‹ Компьютеры») или делают горизонтальную прокрутку. Про остальные требования к телефонам читайте в статье Мобильная версия сайта.

Разметка BreadcrumbList и путь в сниппете

Чтобы поисковик точно понял, что перед ним навигационная цепочка, крошки размечают по Schema.org типом BreadcrumbList. Упрощённый пример в формате микроданных:

<ol itemscope itemtype="https://schema.org/BreadcrumbList">
 <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
  <a itemprop="item" href="https://site.ru/catalog/"><span itemprop="name">Каталог</span></a>
  <meta itemprop="position" content="1">
 </li>
</ol>

То же самое можно передать блоком JSON-LD. Проверить разметку можно в инструменте проверки расширенных результатов Google и в валидаторе Яндекс Вебмастера. Подробнее о форматах в статье Микроразметка.

На компьютере Google показывает путь из крошек в сниппете. В мобильной выдаче с 2025 года он оставил только домен, но разметку для десктопа и понимания структуры делать всё равно стоит.

Крошки в 1С-Битрикс, Аспро и WordPress

В большинстве CMS крошки уже есть. В 1С-Битрикс это стандартный компонент «Навигационная цепочка», в готовых решениях Аспро есть и компактный вариант для телефонов. Для WordPress крошки добавляют SEO-плагины. На самописном сайте цепочку выводит программист в шаблоне страниц.

Из-за чего крошки ведут на 404 или не видны роботу

• Последний элемент ведёт ссылкой на ту же страницу.
• В цепочке есть раздел без своей страницы, и ссылка на него ведёт на 404.
• Крошки выводятся скриптом после загрузки страницы, и поисковик может их не увидеть.
• Видимые крошки и разметка показывают разные пути.
• В цепочку вписаны поисковые запросы вместо названий разделов, например «Купить кроссовки недорого в Красноярске». Посетителю это мешает, а для поисковика выглядит как переспам.

Хлебные крошки проверяем при UX/UI-аудите и в ходе SEO-продвижения. Добавить или исправить их можно при доработке сайта.

Откуда название, зачем крошки SEO и где искать ошибки разметки

Документация Google, Яндекса и Schema.org по навигационной цепочке

• Google Search Central: документация по разметке навигационной цепочки (BreadcrumbList)
• Schema.org: тип BreadcrumbList
• Яндекс Справка для вебмастера: микроразметка

См. также: Микроразметка, Перелинковка, Сниппет, ЧПУ.