Хлебные крошки: навигация и разметка для поиска

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

Зачем нужны

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

Как разметить

Для поисковиков цепочку описывают типом BreadcrumbList из Schema.org в формате JSON-LD: каждая ступень — элемент списка с позицией, названием и адресом.

{
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "Главная", "item": "https://example.ru/" },
    { "@type": "ListItem", "position": 2, "name": "Блог", "item": "https://example.ru/blog" }
  ]
}

Последняя ступень — сама страница, её можно не делать ссылкой.

Какими бывают

Крошки бывают по иерархии разделов, по атрибутам (для каталогов) и по пути посетителя. Для сайта услуг подходит иерархия: «Главная — Услуги — Название услуги». Для каталога товаров — категория и подкатегория.

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

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

Как это сделано у нас

На каждой внутренней странице есть видимая цепочка вроде «Главная — Блог — Название статьи», а под ней в коде — та же цепочка в виде BreadcrumbList. Обе строятся из одного списка, поэтому видимое и размеченное не расходятся.