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

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

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

Чаще всего хлебные крошки используют:

• в интернет-магазинах;
• блогах и медиа;
• сайтах услуг со сложной структурой;
• маркетплейсах;
• базах знаний и документации.

На одностраничных сайтах и проектах без вложенности хлебные крошки не нужны.

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

Хлебные крошки — это вторичная навигация сайта.

Меню показывает основные разделы, хлебные крошки — путь до текущей страницы.

Например:

Главная → Каталог → Смартфоны → Apple → iPhone 15

или:

Главная → Услуги → Продвижение сайта по позициям

Стандартная цепочка состоит из:

• главной страницы;
• раздела;
• подраздела;
• текущей страницы.

Хлебные крошки обычно размещают над H1, под меню или в верхней части контента.

Текущую страницу рекомендуется оставлять некликабельной либо помечать через aria-current="page" в микроразметке

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

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

Для пользователя

Хлебные крошки помогают:

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

Это особенно важно для больших каталогов, блогов, документации и сайтов услуг.

Для SEO

В SEO хлебные крошки важны не только как элемент интерфейса. Их можно разметить с помощью микроразметки BreadcrumbList в Schema.org и получить навигационную цепочку в сниппете.

Хлебные крошки помогают поисковым системам понимать иерархию страниц.

Дополнительно они:

• создают внутренние ссылки между уровнями сайта;
• усиливают связь между категориями;
• помогают интерпретировать структуру проекта;
• могут использоваться поисковыми системами в результатах поиска.

Для SEO важна не только видимая навигация, но и структурированные данные.

Обычно используется разметка BreadcrumbList через Schema.org.

Корректная микроразметка не гарантирует рост позиций Её задача — помочь поисковой системе корректнее интерпретировать структуру сайта.

Для бизнеса

Хлебные крошки упрощают переходы внутри сайта.

В интернет-магазинах пользователь быстрее возвращается в каталог и сравнивает товары.

В блогах — переходит в тематические разделы.

На сайтах услуг — изучает связанные направления.

Каким сайтам нужны хлебные крошки

Хлебные крошки нужны там, где есть вложенная структура.

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

Используют три типа: иерархические, атрибутивные и исторические.

Основные виды хлебных крошек — иерархические, атрибутивные и исторические.

Как выглядят хлебные крошки на сайте: примеры

Хлебные крошки должны идти от общего к частному. Каждый следующий уровень конкретнее предыдущего.

Блог:
 Главная → Блог → SEO → Хлебные крошки

Интернет-магазин:
 Главная → Каталог → Смартфоны → Apple → iPhone 15

Сайт услуг:
 Главная → Услуги → SEO-продвижение → Техническая оптимизация

Справочник:
 Главная → Справочник → HTML → Навигация → Breadcrumbs

Плохо:
 Главная → Акции → Популярное → iPhone 15

Хорошо:
 Главная → Каталог → Смартфоны → Apple → iPhone 15

В плохом примере цепочка отражает не структуру, а случайный маркетинговый маршрут. В хорошем примере путь показывает стабильное место товара в каталоге.

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

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

Начинать нужно со структуры сайта.

Если архитектура хаотичная, хлебные крошки только покажут проблему.

Базовая логика внедрения:

1. Определите структуру: раздел → подраздел → страница.
2. Убедитесь, что родительские разделы существуют и полезны пользователю.
3. Разместите хлебные крошки над H1 или под меню.
4. Сделайте родительские уровни ссылками.
5. Текущую страницу оставьте текстом или обозначьте aria-current="page".
6. Добавьте микроразметку BreadcrumbList.
7. Проверьте соответствие HTML и structured data.

Пользователь и поисковая система должны видеть одну и ту же структуру.

HTML-структура хлебных крошек

Рекомендуемая структура:

<nav aria-label="breadcrumb">

  <ol>

    <li><a href="/">Главная</a></li>

    <li><a href="/blog/">Блог</a></li>

    <li><a href="/blog/seo/">SEO</a></li>

    <li aria-current="page">Хлебные крошки</li>

  </ol>

</nav>

Для accessibility используется aria-label="breadcrumb".

Текущую страницу рекомендуется помечать через aria-current="page".

Хлебные крошки в мобильной версии

На мобильных устройствах хлебные крошки должны сохранять смысл цепочки.

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

Лучше использовать:

• горизонтальный скролл;
• компактный формат;
• сокращение второстепенных элементов;
• ссылку на ближайший родительский раздел.

Пользователь должен понимать структуру страницы даже на небольшом экране.

Хлебные крошки в WordPress, Битрикс, Tilda и интернет-магазинах

WordPress

В WordPress хлебные крошки часто включают через SEO-плагины или тему. Проверьте:

• включены ли breadcrumbs в настройках SEO-плагина;
• выводится ли HTML-блок в шаблоне записи, рубрики и товара;
• совпадает ли цепочка с рубриками и типами записей;
• нет ли дубля: крошки темы + крошки плагина;
• корректно ли размечен последний пункт.

1C-Битрикс

В Битриксе хлебные крошки обычно завязаны на структуру разделов.

Проверьте:

• не попадают ли в цепочку технические разделы;
• открыты ли родительские страницы для индексации;
• нет ли 404 или редиректов в parent URL;
• совпадают ли разделы каталога, URL и breadcrumbs;
• не создаёт ли фильтр отдельные хаотичные пути.

Tilda

На Tilda breadcrumbs чаще собирают вручную или через кастомный блок. Здесь особенно важно:

• не делать фейковую цепочку ради SEO;
• ставить ссылки только на существующие страницы;
• проверять mobile-отображение;
• добавлять JSON-LD только в том случае, если видимый путь есть на странице.

Shopify / e-commerce

Для интернет-магазинов важно выбрать основной путь к товару. Если товар доступен через несколько категорий, в BreadcrumbList лучше передавать канонический маршрут, а не случайный путь пользователя.

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

Самописный сайт и SPA/JS

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

Проверьте:

• есть ли крошки в серверном HTML или SSR;
• совпадают ли данные фронтенда и JSON-LD;
• обновляется ли цепочка при смене маршрута;
• не остаётся ли старая разметка при переходе между страницами;
• корректно ли работает canonical.

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

Для поисковых систем хлебные крошки размечают через BreadcrumbList в Schema.org.

Разметка помогает передать структуру страницы в понятном виде.

Каждый элемент цепочки описывается как ListItem и содержит:

• позицию (position);
• название (name);
• URL (item).

Пример JSON-LD:

{

  "@context": "https://schema.org",

  "@type": "BreadcrumbList",

  "itemListElement": [

    {

      "@type": "ListItem",

      "position": 1,

      "name": "Главная",

      "item": "https://example.ru/"

    },

    {

      "@type": "ListItem",

      "position": 2,

      "name": "Каталог",

      "item": "https://example.ru/catalog/"

    },

    {

      "@type": "ListItem",

      "position": 3,

      "name": "Смартфоны",

      "item": "https://example.ru/catalog/smartphones/"

    },

    {

      "@type": "ListItem",

      "position": 4,

      "name": "iPhone 15"

    }

  ]

}

Для последнего элемента URL может отсутствовать — это текущая страница.

Предпочтительный формат — JSON-LD. Он проще поддерживается и не вмешивается в HTML-разметку страницы.

Хлебные крошки в HTML и микроразметке должны совпадать. Если пользователь видит одну цепочку, а микроразметка передаёт другую, поисковые системы получают противоречивые сигналы.

Несколько цепочек хлебных крошек

У одной страницы может быть несколько логичных путей.

Например:

Главная → Каталог → Смартфоны → iPhone 15

и

Главная → Apple → iPhone 15

Такое встречается в интернет-магазинах и каталогах.

Практическое правило:

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

Основной путь должен совпадать со структурой сайта, меню, canonical и внутренней перелинковкой.

Получите стратегию роста бизнеса

Разработаем индивидуальную стратегию с учётом региона, ниши, конкуренции в тематике, а также анализа текущего состояния сайта

Вы получите:

• Анализ стратегии конкурентов
• План работ для достижения результата
• Прогнозы и сроки достижения целей

Получить стратегию и смету

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

Цепочка не отражает структуру сайта

Плохо:

Главная → Акции → Популярное → iPhone 15

Хорошо:

Главная → Каталог → Смартфоны → Apple → iPhone 15

Хлебные крошки должны отражать архитектуру сайта, а не маркетинговый сценарий.

HTML и микроразметка отличаются

Пользователь и поисковая система должны видеть одинаковую структуру.

Если HTML показывает один путь, а JSON-LD — другой, возникают противоречивые сигналы.

Хлебные крошки есть только в микроразметке

Видимая навигация обязательна.

Разметка без HTML не решает UX-задачу и снижает ценность хлебных крошек.

Родительские страницы закрыты от индексации

Хлебные крошки не должны вести в закрытые, бесполезные или технические разделы.

Проверьте:

• noindex;
• 404;
• редиректы;
• технические URL.

В цепочку попадают фильтры

Плохо:

Главная → Каталог → До 5000 ₽ → Чёрный → iPhone 15

Фильтры, сортировки и результаты поиска не должны становиться основной breadcrumb-цепочкой.

Хлебные крошки рендерятся только JavaScript

Если цепочка появляется только после клиентского рендера, поисковая система может обработать её нестабильно.

Предпочтительно серверное формирование или SSR.

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

Такая ссылка страницы на саму себя не принесет пользы. Последний элемент лучше оставлять текстом или помечать aria-current="page".

Неверная мобильная реализация

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

Как проверить хлебные крошки

Проверку удобно разделить на четыре уровня.

UX-проверка

Проверьте:

• видны ли хлебные крошки;
• расположены ли в ожидаемом месте;
• понятны ли названия;
• кликабельны ли родительские уровни.

SEO-проверка

Проверьте:

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

Техническая проверка

Проверьте:

• используется ли nav, ol, li;
• правильно ли задан порядок элементов;
• корректно ли работает mobile-версия;
• доступны ли хлебные крошки без JS.

Проверка микроразметки

Проверьте:

• корректность BreadcrumbList;
• совпадение HTML и JSON-LD;
• ошибки structured data;
• наличие предупреждений в Search Console.

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

Проверьте:

• хлебные крошки есть на странице;
• HTML и JSON-LD совпадают;
• путь отражает структуру сайта;
• родительские URL отдают 200 OK;
• parent-страницы не закрыты через noindex;
• нет конфликтов с canonical;
• текущая страница не является лишней самоссылкой;
• мобильная версия сохраняет структуру;
• фильтры не заменяют основную цепочку;
• structured data проходит валидацию;
• после рендера не пропадает цепочка.

FAQ

Главное

Хлебные крошки должны отражать реальную структуру сайта.

Правильная реализация включает три элемента:

1. Видимую навигационную цепочку.
2. Рабочие ссылки на родительские разделы.
3. Корректную микроразметку BreadcrumbList.

Хлебные крошки работают эффективно, когда совпадают структура сайта, меню, URL, перелинковка и structured data.

Источники:

Материал опирается на официальные правила и практику технического SEO:

• Google Search Central, 2025 — изменение показа breadcrumbs в мобильной выдаче:https://developers.google.com/search/blog/2025/01/simplifying-breadcrumbs
• Google Search Central — документация по breadcrumb structured data:https://developers.google.com/search/docs/appearance/structured-data/breadcrumb
• Schema.org — тип BreadcrumbList:https://schema.org/BreadcrumbList
• WAI-ARIA Authoring Practices — breadcrumb pattern:https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/
• Яндекс Вебмастер — проверка микроразметки:https://webmaster.yandex.ru/tools/microtest/