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

Хлебные крошки — это навигационная цепочка от главной страницы до текущей, обычно сверху контента. Они нужны двум аудиториям: пользователю — чтобы не потеряться в иерархии, поисковику — чтобы понять структуру сайта и показать путь в сниппете вместо длинного URL. Без микроразметки BreadcrumbList Google и Яндекс крошки в выдачу не подтянут.

Что такое хлебные крошки и зачем они нужны

Это не декорация и не «потому что так у всех». У крошек две функции — и обе измеримые.

Для пользователя: навигация и ориентация

• Понимание, в какой части сайта находится посетитель — особенно на глубоких страницах типа /catalog/obuv/zhenskaya/krossovki/
• Возврат на уровень вверх в один клик — без браузерного «Назад»
• Снижение показателя отказов: пользователь видит категорию и переходит выше, а не уходит с сайта

Для SEO: сниппет, внутренние ссылки, индексация

• В сниппете Google вместо URL отображается путь: seohead.tech > Блог > Хлебные крошки. Это повышает CTR на 5–15% на длинных URL.
• Перелинковка: каждая крошка — внутренняя ссылка с анкором-категорией, передающая вес родительским страницам.
• Помощь краулеру: бот быстрее понимает иерархию и распределяет краулинговый бюджет.

Виды хлебных крошек

Линейные (иерархические)

Самый распространённый тип и единственный, который Google корректно понимает без дополнительных настроек. Каждый уровень — отдельная страница в структуре сайта.

Динамические

Показывают путь, по которому пользователь пришёл, а не место страницы в иерархии. Минус: на одной и той же странице крошки разные — Google может не индексировать BreadcrumbList или брать случайный вариант.

С выпадающим меню

Удобно для каталогов с десятками подкатегорий. SEO-нейтральны, если выпадающий список — обычный HTML, а не подгружаемый JS после клика.

Атрибутивные

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

zoom_in

Микроразметка хлебных крошек: JSON-LD и Microdata

Без разметки крошки — просто HTML-элемент. Google и Яндекс не используют их для сниппета. Стандарт — тип BreadcrumbList по спецификации schema.org.

JSON-LD: современный и предпочтительный вариант

Google прямо рекомендует JSON-LD. Скрипт можно положить в head или в конец body — место не важно для парсинга.

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Главная",
      "item": "https://example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Блог",
      "item": "https://example.com/blog/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Хлебные крошки на сайте"
    }
  ]
}

Microdata: встраивание в HTML

Разметка прямо в nav или ol через атрибуты itemscope, itemtype, itemprop. Работает, но требует менять вёрстку — при обновлении шаблона легко сломать. Используйте один формат на весь сайт.

Как проверить разметку в Google и Яндекс

Как Яндекс и Google показывают хлебные крошки в выдаче

Мобильная vs десктопная выдача

На мобильной выдаче крошки критичнее: URL обрезается до домена + двух уровней. Сниппет seohead.tech > Блог > Разметка информативнее, чем seohead.tech › blog › razme.... По данным Search Console, CTR на мобильных при наличии крошек растёт на 8–12%, на десктопе — на 3–5%.

Почему поисковик игнорирует разметку и что делать

• Разметка не валидна — проверьте в Rich Results Test, исправьте ошибки до следующего кэширования
• Иерархия не совпадает с URL — крошки Главная > Обувь > Кроссовки на странице /catalog/sale/nike/ сбивают краулера
• Страница не в индексе — крошки в сниппете появятся только после индексации страницы
• Низкий авторитет сайта — Яндекс показывает крошки чаще на трастовых доменах

zoom_in

Реализация на популярных платформах

WordPress

Плагины Yoast SEO или Rank Math генерируют JSON-LD автоматически по структуре категорий — включается одним переключателем. Если тема уже рендерит свои крошки без разметки — отключите один вариант, чтобы не было дублей.

Bitrix

Стандартный компонент bitrix:breadcrumb рендерит HTML, но JSON-LD не добавляет. Решение: переопределить шаблон компонента и в template.php сгенерировать блок с разметкой из массива $arResult. Готовые модули есть в маркетплейсе Bitrix.

Tilda

Хлебные крошки доступны только в Zero Block и в модуле «Магазин». JSON-LD добавляется через настройки страницы → «HTML-код для вставки внутрь HEAD». Для блога на стандартных блоках крошек нет — вставляйте вручную для каждой страницы.

Частые ошибки при внедрении

Неверная иерархия

Крошки «Главная > Кроссовки» на странице /catalog/obuv/krossovki/ пропускают уровень «Обувь». Google замечает несоответствие и может не показать сниппет с крошками.

Отсутствие разметки

Крошки на сайте видны пользователю, но без BreadcrumbList. Поисковик иногда угадывает структуру из HTML, но это ненадёжно — сниппет с крошками не гарантирован.

Активная ссылка на текущей странице

Последняя крошка не должна быть кликабельной ссылкой. В HTML используйте тег span с атрибутом aria-current="page", в JSON-LD для последнего элемента не указывайте item.

JavaScript-рендеринг

Крошки подгружаются клиентским JS после загрузки страницы. Google рендерит JS, но с задержкой; Яндекс — частично. Выносите JSON-LD в head статически — он не требует отрисовки DOM.

Двойная разметка (JSON-LD + Microdata одновременно)

После смены шаблона или обновления CMS на странице могут оказаться оба формата BreadcrumbList. Google обычно берёт JSON-LD, но если данные расходятся — может отбросить оба. В Search Console это появляется как «Дублирование структурированных данных». Удалите один из форматов — оставляйте JSON-LD.

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

Товар может лежать в нескольких категориях одновременно. Какой путь показать в BreadcrumbList — ключевой вопрос для e-commerce.

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