Что такое хлебные крошки

Хлебные крошки — цепочка ссылок, показывающая путь от корня сайта до текущей страницы:

Главная → Обувь → Кроссовки → Nike Air Max 90

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

В e-commerce у элемента две независимые задачи, и обе измеримы.

UX-задача. Значительная часть трафика приходит из поиска, из рекламы и из товарных агрегаторов сразу на карточку товара. Такой пользователь не проходил каталог, у него нет контекста: он не знает, есть ли рядом похожие модели и в каком разделе он оказался. Крошки закрывают этот пробел одной строкой и дают короткий путь к листингу, где можно сравнить альтернативы.

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

Типы хлебных крошек

Тип Как строится Плюсы Риски
Иерархические По структуре каталога: родительские категории текущей страницы Предсказуемы, кэшируются, идеальны для перелинковки Нужна одна каноническая категория для товара, который лежит в нескольких
Атрибутные Из применённых фильтров: «Кроссовки — Nike — 42» Отражают реальный контекст выбора, удобны в больших каталогах Плодят комбинации URL; без контроля индексации — дубли и трата краулингового бюджета
Исторические Повторяют путь пользователя по сайту Точно соответствуют навигации внутри сессии Дублируют кнопку «назад», бесполезны для входа из поиска, не кэшируются, не годятся для разметки

Базовый выбор для интернет-магазина — иерархические крошки. Атрибутные добавляют поверх них в каталогах с развитым фасетным поиском, когда посадочные страницы фильтров сознательно продвигаются в поиске. Исторические крошки на практике почти не встречаются: они непредсказуемы и не дают ни SEO-эффекта, ни надёжного UX.

ℹ

Если товар физически лежит в нескольких категориях, выберите для крошек одну — ту же, что указана в каноническом URL карточки. Иначе один товар порождает несколько разных путей, и разметка начинает противоречить канониклу.

Микроразметка BreadcrumbList

Поисковые системы понимают крошки только через микроразметку Schema.org — визуальной цепочки в вёрстке недостаточно. Разметка BreadcrumbList описывает элементы пути и их порядок:

BreadcrumbList
├── ListItem position=1 → name: "Главная",    item: /
├── ListItem position=2 → name: "Обувь",      item: /shoes/
├── ListItem position=3 → name: "Кроссовки",  item: /shoes/sneakers/
└── ListItem position=4 → name: "Nike Air Max 90"   (текущая страница, без ссылки)

Что это даёт: в результатах поиска вместо длинного URL вида site.ru/catalog/shoes/sneakers/nike-air-max-90-12345 показывается читаемый путь site.ru → Обувь → Кроссовки. Такой сниппет понятнее и обычно собирает более высокий CTR, особенно на мобильных, где длинный URL всё равно обрезается.

Практические требования к разметке:

  • Порядок position строго от корня к текущей странице, без пропусков.
  • Названия в разметке совпадают с видимым текстом крошек.
  • Абсолютные URL в item.
  • Разметка есть на всех типах страниц — карточках, листингах, статьях, а не только на товарах.
  • Проверка через валидатор структурированных данных Google и панель Яндекс.Вебмастера после выкатки.

Типичные ошибки

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

Крошки по фильтрам плодят дубли. Атрибутные крошки генерируют ссылки на комбинации фильтров. Каждая такая ссылка — приглашение роботу обойти ещё одну страницу. В большом каталоге счёт идёт на десятки тысяч URL, и краулинговый бюджет уходит на комбинации вместо новых товаров. Решение: индексируются только те комбинации фильтров, под которые есть спрос, остальные закрываются от индексации и не попадают в крошки.

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

Крошки рисуются только на JavaScript. Если цепочка появляется после выполнения скрипта и в HTML-ответе её нет, часть ссылочной пользы теряется. Крошки должны присутствовать в исходном HTML.

Последний элемент — ссылка на текущую страницу. Бесполезный клик для пользователя и лишняя ссылка на себя же для робота.

Чек-лист внедрения

Проверка Норма
Крошки есть на карточках, листингах и статьях Да, на всех типах страниц
Присутствуют в исходном HTML Да, не только после JS
Разметка BreadcrumbList Валидна, порядок от корня
Совпадение с каноническим URL Путь строится по канонической категории
Последний элемент Текст без ссылки
Поведение на экране 360–390 px Не более одной строки
Индексация атрибутных крошек Только спросовые комбинации фильтров
Кликабельность Область нажатия не меньше 44 px по высоте на мобильных

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