Хлебные крошки

Как работает

Крошки живут в двух местах — в вёрстке страницы и в JSON-LD разметке. В вёрстке — обычно строка над заголовком H1 с ссылками через разделитель:

<nav aria-label="Хлебные крошки">
  <a href="/">Главная</a> →
  <a href="/kettle/">Чайники</a> →
  <span>Bosch TWK 7203</span>
</nav>

Последний элемент — текущая страница без ссылки. Атрибут aria-label нужен для screen readers, чтобы сообщить, что это именно навигация, а не просто ссылки в тексте.

Параллельно на странице ставится JSON-LD с типом BreadcrumbList из словаря Schema.org — именно эту разметку Google использует для показа крошек в сниппете вместо голого URL:

{
  "@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/kettle/"},
    {"@type": "ListItem", "position": 3, "name": "Bosch TWK 7203"}
  ]
}

Порядок элементов в JSON-LD должен совпадать с порядком в UI — иначе Google выберет свою версию пути, обычно менее точную.

Почему важно для SEO

В сниппете Google и Яндекса крошки заменяют URL: вместо example.com/catalog/kettle/bosch/twk-7203/ пользователь видит Главная → Чайники → Bosch TWK 7203. Более читаемо, лучше отражает контекст, повышает CTR — по данным Google на 5-15% для товарных и категорийных страниц.

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

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

Частые ошибки

• Крошки есть в UI, но нет разметки BreadcrumbList — Google не покажет их в сниппете и оставит голый URL.
• В JSON-LD путь короче или длиннее, чем на странице — Google предпочтёт свой расчёт и проигнорирует разметку.
• Последний элемент в JSON-LD — с полем item (ссылка), хотя это текущая страница — валидатор помечает как ошибку.
• В name используются служебные заголовки типа id=42 вместо человекочитаемых названий раздела.
• Крошки скрыты через display: none для мобильных — Google на mobile-first не видит их вообще.
• Одна страница показывается с разными крошками в зависимости от источника перехода — Google может выбрать не тот путь.

Как проверить

В Chrome DevTools вкладка Elements → поиск по BreadcrumbList покажет разметку в JSON-LD. Google Rich Results Test отдельно валидирует BreadcrumbList и показывает, как крошки появятся в сниппете. В Google Search Console раздел «Улучшения → Хлебные крошки» — покрытие сайта по этому типу разметки и список ошибок. В Яндекс.Вебмастере — «Инструменты → Валидатор микроразметки», тоже с проверкой BreadcrumbList.

SEO Crawler проверяет наличие крошек в вёрстке (через семантический <nav> или ссылки-цепочки) и в JSON-LD, сверяет длину и порядок элементов, ловит расхождения между UI и разметкой. В отчёте это часть блока «Микроразметка» — с указанием разделов сайта, где крошки размечены не полностью.

Вывод

Хлебные крошки одновременно улучшают навигацию для пользователя и сниппет в выдаче — редкая ситуация, когда одно решение закрывает две задачи. Ставьте семантический <nav> с крошками в шапке страницы и синхронный BreadcrumbList в JSON-LD, проверяйте через Rich Results Test после каждого шаблонного изменения. Для интернет-магазинов и каталогов это стандартный элемент, без которого сложно бороться с конкурентами в SERP.