Хлебные крошки на сайте — это навигационная цепочка, которая показывает путь от главной страницы к текущей: Главная → Каталог → Ноутбуки → Игровые.

По сути, это «карта маршрута» внутри структуры сайта. Термин часто встречается и в англоязычных материалах как breadcrumbs.

На заметку: хлебные крошки не заменяют меню. Они дополняют навигацию «вглубь» разделов, помогая быстро вернуться на уровень выше.

Зачем на сайте используются хлебные крошки

Пользы у элемента сразу две:

  1. Польза для пользователей (UX):
    • меньше заблудившихся пользователей: человек видит, где находится;
    • можно одним кликом перейти в родительский раздел;
    • удобнее на мобильных, когда меню спрятано в «бургер».
  2. Польза для SEO:
    • улучшается внутренняя перелинковка: страницы получают дополнительные ссылки по иерархии;
    • поисковикам проще понимать структуру сайта и связи разделов;
    • цепочка может отображаться в сниппете, если настроены структурированные данные. Google описывает требования к разметке breadcrumbs и условия показа в результатах поиска в своей документации.

Классическая реализация

Классика — это горизонтальная цепочка под шапкой или под заголовком Н1 страницы.

Правила, которые почти всегда работают:

  • первый пункт: «Главная» с ссылкой на главную страницу;

  • дальше: разделы по возрастанию вложенности;

  • последний пункт: текущая страница без ссылки;

  • текст пунктов должен быть коротким;

  • разделители: стрелка, слэш или точка.

Помните: если одна и та же страница доступна по разным путям (например, товар в двух категориях), выберите основной путь и придерживайтесь его в крошках, иначе вы сами создадите неоднозначность для роботов и пользователей.

Микроразметка хлебных крошек

Микроразметка хлебных крошек — это структурированные данные, которые «подсказывают» поисковикам навигационную цепочку. В терминах Schema.org используется тип BreadcrumbList.

Пример JSON-LD (микроразметка breadcrumbs):

<script type="application/ld+json">

{

  "@context": "https://schema.org&quot;,

  "@type": "BreadcrumbList",

  "itemListElement": [

    {

      "@type": "ListItem",

      "position": 1,

      "name": "Главная",

      "item": "https://example.com/&quot;

    },

    {

      "@type": "ListItem",

      "position": 2,

      "name": "Каталог",

      "item": "https://example.com/catalog/&quot;

    },

    {

      "@type": "ListItem",

      "position": 3,

      "name": "Ноутбуки",

      "item": "https://example.com/catalog/noutbuki/&quot;

    }

  ]

}

</script>

После внедрения проверьте валидность в инструментах Google (Rich Results) — Google прямо рекомендует тестировать структурированные данные перед масштабированием.

Частые ошибки, из-за которых хлебные крошки не помогают

  • цепочка строится по фильтрам и сортировкам, а не по структуре;

  • «крошки» отсутствуют на карточках товаров и страницах услуг, где они особенно нужны;

  • разметка есть, но URL в ней отличаются от канонических;

  • нет единого правила для дублей (в хлебных крошках используется то один, то другой вариант URL).

Короткий вывод

Если отвечать на вопрос «хлебные крошки — это про дизайн или про SEO», то правильный ответ: и то и другое. Цепочка улучшает навигацию, усиливает перелинковку и помогает поисковикам понять структуру, а микроразметка breadcrumbs повышает шанс отображения пути в выдаче при корректной настройке.