Хлебные крошки (Breadcrumbs): что это и зачем нужны

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

Хлебные крошки (Breadcrumbs) — элемент навигации на веб-странице, показывающий иерархический путь от главной страницы до текущей. Выглядит как цепочка ссылок: Главная → Категория → Подкатегория → Текущая страница.

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

<nav aria-label="Хлебные крошки">
  <ol itemscope itemtype="https://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/"><span itemprop="name">Главная</span></a>
      <meta itemprop="position" content="1" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/blog/"><span itemprop="name">Блог</span></a>
      <meta itemprop="position" content="2" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <span itemprop="name">Текущая статья</span>
      <meta itemprop="position" content="3" />
    </li>
  </ol>
</nav>

Зачем нужны Breadcrumbs

Улучшение UX: пользователи понимают структуру сайта и легко перемещаются между уровнями. Особенно важно для интернет-магазинов с глубокой иерархией.

SEO — внутренняя перелинковка: breadcrumbs создают дополнительные ссылки на все страницы в иерархии, распределяя ссылочный вес.

Rich snippets в поиске: Google показывает путь навигации прямо в сниппете вместо полного URL. Это привлекает внимание и повышает CTR.

Краулинг: поисковые роботы лучше понимают структуру сайта и эффективнее его индексируют.

Снижение глубины клика: страницы категорий в breadcrumbs получают дополнительные ссылки, что снижает их "глубину" с точки зрения поисковика.

Типы Breadcrumbs

На основе иерархии (Location-based): Главная → Электроника → Смартфоны → iPhone 15

На основе атрибутов (Attribute-based): Главная → Синий → 32GB → iPhone 15 синий 32GB

На основе истории (History-based): Главная → Предыдущая страница → Текущая

Для SEO оптимален первый тип — иерархический.

Schema.org разметка для Breadcrumbs

Рекомендованный Google формат — JSON-LD:

{
  "@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": "SEO-руководство"
    }
  ]
}

Последний элемент (текущая страница) может не иметь item поля — это допустимо.

Проверка Breadcrumbs на reChecker

Используйте Schema Validator для проверки разметки хлебных крошек. Инструмент покажет:

• Наличие BreadcrumbList Schema.org разметки
• Корректность структуры и обязательных полей
• Соответствие HTML-навигации и JSON-LD разметки
• Предупреждения о потенциальных проблемах

FAQ

Обязательны ли breadcrumbs для SEO? Нет, но они дают дополнительные SEO-преимущества: rich snippets, внутренние ссылки, лучшее понимание структуры поисковиком. Для крупных сайтов (интернет-магазины, блоги с категориями) breadcrumbs — стандарт.

Нужна ли Schema.org разметка если breadcrumbs уже есть в HTML? Для получения rich snippets в Google — да. HTML-навигация без Schema.org разметки не даёт расширенные сниппеты. Лучшая практика: HTML для пользователей + JSON-LD для поисковиков.

Последний элемент breadcrumbs должен быть ссылкой? Нет. Текущая страница обычно отображается как обычный текст без ссылки — пользователь уже находится на ней. Это стандартная практика хорошего UX.