Хлебные крошки на сайте: что это и как их внедрить

Хлебные крошки — это строка навигации над заголовком страницы, которая показывает путь от главной до текущего раздела, например «Главная → Каталог → Диваны → Угловой диван». Элемент занимает одну строку, но помогает и посетителям, и поисковым системам. Ниже — что значит хлебные крошки на сайте, как их сделать и разметить.

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

Хлебные крошки, или навигационная цепочка (по-английски breadcrumbs), — ряд ссылок на разделы, к которым относится текущая страница. Они показывают, где находится посетитель, и позволяют одним кликом подняться на уровень выше.

Название пришло из сказки о Гензеле и Гретель: дети бросали крошки хлеба, чтобы найти дорогу домой. На сайте роль крошек играют ссылки. Классический пример хлебных крошек сайта интернет-магазина: «Главная / Мебель / Диваны / Диван Тиволи». Первые три пункта — ссылки, последний — название текущей страницы.

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

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

• Иерархические. Показывают положение страницы в структуре сайта: главная, раздел, подраздел, страница. Подходят каталогам, корпоративным сайтам, базам знаний.
• Атрибутивные. Отражают выбранные параметры, например «Обувь → Мужская → Размер 43 → Чёрный». Встречаются в каталогах с фильтрами.
• Исторические. Повторяют путь конкретного посетителя по страницам. Они меняются от визита к визиту и почти не дают пользы: ту же задачу решает кнопка «Назад» в браузере.

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

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

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

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

Для поиска крошки — это ссылки на родительские разделы с каждой вложенной страницы. Такие ссылки помогают роботу находить категории и понимать их связь со страницами внутри. Кроме того, Google и Яндекс могут показывать навигационную цепочку в сниппете вместо голого адреса. У Google, по документации, этот элемент выводится только в результатах на компьютерах. Яндекс использует для цепочки в сниппете разметку BreadcrumbList и не гарантирует её показ.

Разметка BreadcrumbList: JSON-LD и Microdata

Чтобы поисковик точно понял цепочку, её размечают типом BreadcrumbList из словаря Schema.org. Разметку можно добавить в формате JSON-LD или Microdata, но Яндекс для навигационных цепочек в сниппете описывает только JSON-LD.

Структура разметки одинакова в обоих форматах. BreadcrumbList содержит список itemListElement, каждый элемент которого — ListItem со свойствами position (номер по порядку, начиная с 1), name (название, как его видит пользователь) и item (адрес страницы). По документации Google, в цепочке должно быть не меньше двух элементов, а у последнего свойство item можно не указывать.

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

Разметка должна совпадать с видимыми крошками

Разметка BreadcrumbList должна описывать ту же цепочку, которую видит посетитель на странице. Google прямо запрещает размечать содержимое, которого нет на странице, и требует, чтобы структурированные данные точно отражали контент.

Это правило из общих требований Google к структурированным данным. На практике расхождения возникают, когда JSON-LD генерируется отдельно от шаблона. Типичные случаи:

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

Надёжное решение — строить видимые крошки и JSON-LD из одного источника данных в шаблоне, а после каждого изменения проверять страницы валидатором микроразметки.

Как сделать хлебные крошки на сайте

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

Основные принципы

• Цепочка начинается с главной страницы и отражает типичный путь пользователя. Google рекомендует ориентироваться именно на путь, а не копировать структуру URL.
• Последний пункт — текущая страница. Обычно его выводят текстом без ссылки, чтобы не вести посетителя туда, где он уже находится.
• Крошки располагают под шапкой, над заголовком H1.
• Блок помещают в элемент навигации с подписью для экранных читалок, а текущую страницу помечают атрибутом aria-current="page", как советует шаблон доступности W3C.

Вручную в шаблоне

Разработчик выводит список ссылок на родительские разделы в общем шаблоне страниц и формирует рядом JSON-LD из тех же данных. Цепочку нужно строить автоматически по положению страницы в структуре, а не прописывать на каждой странице отдельно.

В CMS

В 1С-Битрикс за вывод отвечает компонент «Навигационная цепочка» (bitrix:breadcrumb), а пункты добавляются методом AddChainItem. В WordPress крошки включает, например, плагин Yoast SEO: в его настройках есть раздел Breadcrumbs, а разметку BreadcrumbList он добавляет в JSON-LD автоматически. Если тема сайта не поддерживает вывод, понадобится небольшая правка шаблона.

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

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

1. Слишком длинная цепочка. Пять–шесть уровней с длинными названиями переносятся на две строки на смартфоне и перестают читаться.
2. Битые ссылки. Промежуточный раздел удалили или переименовали, а крошки ведут на 404 или на адрес с редиректом.
3. Цепочка не соответствует структуре. Товар из раздела «Диваны» показывает путь через «Акции», потому что туда его добавили позже.
4. Крошки на главной. На главной странице цепочка из одного пункта ничего не даёт, её там не выводят.
5. Мелкий текст и слабый контраст. Крошки делают заметно мельче основного текста, но так, чтобы их можно было прочитать и нажать пальцем.
6. Разметка без видимых крошек. Такая разметка противоречит требованиям Google к структурированным данным.

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

Источники

• Breadcrumb (BreadcrumbList) structured data | Google Search Central
• General structured data guidelines | Google Search Central
• Навигационные цепочки | Справка Яндекс Вебмастера
• Breadcrumb Pattern | W3C WAI-ARIA Authoring Practices Guide
• BreadcrumbList | Schema.org