Что такое хлебные крошки?
Хлебные крошки в веб дизайне - навигационная цепочка, которая отображает иерархию страниц сайта от главной до текущей. Визуально это строка ссылок, разделённых стрелкой или слешем: каждый элемент ведёт на соответствующий уровень раздела. Крайний правый элемент - текущая страница - обычно не кликабелен, поскольку пользователь уже на ней.
Термин (от англ. breadcrumbs) восходит к сказочному приёму: герои отмечали путь крошками, чтобы найти дорогу назад. В логике веб-интерфейса смысл тот же: breadcrumb навигация показывает пользователю, откуда он пришёл, и позволяет вернуться на любой уровень одним кликом.
Пример - интернет-магазин электроники:
Главная → Смартфоны → Apple → iPhone 15 Pro
Пример - новостной портал:
Главная → Технологии → Искусственный интеллект → Статья о GPT-5
Для чего нужны хлебные крошки на сайте?
Breadcrumbs добавляют на любой сайт с двумя и более уровнями вложенности. Чем глубже структура - тем очевиднее польза. Рассмотрим конкретные задачи, которые они закрывают.
Что даёт навигационная цепочка:
- Контекст без лишних переходов. Когда пользователь приходит из поиска прямо на карточку товара или статью, он не понимает, где находится внутри сайта. Крошки моментально показывают структуру - без необходимости идти на главную.
- Навигация вверх по иерархии. Стандартная кнопка «Назад» возвращает туда, откуда пришёл браузер, - не всегда туда, куда нужно пользователю. Крошка ведёт в конкретный раздел: предсказуемо и управляемо.
- Автоматическая перелинковка разделов. Каждый элемент цепочки - ссылка. Поисковый краулер по ним проходит и передаёт ссылочный вес разделам каталога, которые иначе могли бы оставаться «в тени».
- Удержание на сайте. Пользователь, который видит путь, чаще переходит в соседние разделы - а не закрывает вкладку. Это напрямую влияет на глубину просмотра и время на сайте.
- Читаемый сниппет в выдаче. С микроразметкой Google и Яндекс подставляют крошки вместо длинного URL прямо в строку результатов поиска. Пользователь ещё до клика понимает, куда попадёт.
| Задача | Польза для сайта |
|---|---|
| Контекст для пользователя | Меньше выходов с первой страницы |
| Навигация вверх | Больше просмотров за сессию |
| Перелинковка разделов | Глубже индексируется каталог |
| Удержание на сайте | Лучше поведенческие факторы |
| Красивый сниппет | Выше CTR в органическом поиске |
Как хлебные крошки влияют на SEO?
Хлебные крошки влияют на SEO сразу по нескольким направлениям.
- Расширенный сниппет. Когда страница содержит микроразметку BreadcrumbList, Google и Яндекс выводят путь прямо в поисковой выдаче - вместо технического URL вида /section/subsection/page-id-48291. Пользователь видит понятную структуру ещё до перехода на сайт. По опыту наших специалистов, это устойчиво повышает CTR: читаемая строка вызывает больше доверия, чем набор символов.
- Краулинг глубоких страниц. Роботы-обходчики идут по ссылкам. Если разделы третьего-четвёртого уровня плохо связаны с остальным сайтом, они рискуют редко попадать в индекс. Хлебные крошки создают дополнительные входящие ссылки на каждый раздел иерархии - это особенно важно для крупных интернет-магазинов.
- Распределение ссылочного веса. Каждая крошка передаёт часть веса родительскому разделу. Это помогает продвигать не только конкретную карточку товара, но и категорию, в которой она находится.
- По документации Google Search Central, разметка BreadcrumbList используется для отображения rich results и помогает алгоритму понять иерархию страниц сайта.
«Хлебные крошки - один из немногих элементов, где технический SEO и UX пересекаются напрямую. Мы регулярно видим на проектах, что после добавления корректной разметки BreadcrumbList CTR страниц в органике вырастает на 5–15%. При этом сам элемент занимает в коде несколько строк. Соотношение усилий и результата - одно из лучших в SEO-арсенале.»
Какие бывают хлебные крошки?
Линейные / иерархические
Базовый и наиболее распространённый тип. Цепочка строится по дереву разделов сайта: от главной - до текущей страницы.
Главная → Одежда → Женская → Платья → Летние платья
Это универсальное решение: подходит интернет-магазинам, корпоративным сайтам, новостным изданиям - любому ресурсу с выраженной иерархией.
С выпадающим списком
Расширенный вариант: по клику или наведению на элемент цепочки открывается меню с соседними разделями того же уровня. Удобен там, где пользователь хочет «соскочить» на смежный раздел, не возвращаясь на уровень выше. На практике встречается редко - сложнее в поддержке и нередко мешает мобильной версии.
Динамические
Такие крошки не привязаны к структуре сайта - они записывают конкретный маршрут пользователя в рамках сессии. Зашёл на главную, перешёл в блог, открыл статью - крошки покажут ровно этот путь. Удобны для нестандартных сценариев навигации, но могут сбивать с толку: у двух пользователей на одной странице цепочка будет разной.
Обратные
Минималистичный тип: вместо полной цепочки - одна ссылка «← Назад» или «← К результатам». Часто встречается в мобильных интерфейсах, когда показывать всю иерархию нецелесообразно из-за ограниченного пространства.
Атрибутивные / фасетные
Показывают не путь, а набор выбранных фильтров. Актуальны для каталогов с развитой фасетной навигацией:
Главная → Ноутбуки → [Бренд: Apple] [Экран: 14"] [Цена: до 150 000 ₽]
Пользователь управляет фильтрами прямо из крошек: убирает один параметр, не сбрасывая остальные. Это ускоряет поиск нужного товара и снижает нагрузку на серверную часть поиска.
Исторические / пути просмотра
Фиксируют историю переходов внутри сайта - похожи на историю браузера, только в рамках одного ресурса. Требуют хранения сессионных данных и почти не используются: поведение такого компонента трудно предсказать, а пользователи, как правило, ожидают стандартной иерархии.
Как правильно создать хлебные крошки?
Вручную
Разберём, как сделать хлебные крошки вручную - это актуально для кастомных сайтов без CMS. Крошки добавляют через список
Стилизацию задают через CSS - разделители между элементами чаще всего делают через псевдоэлемент ::after:
nav ol {
display: flex;
list-style: none;
gap: 8px;
padding: 0;
}
nav li + li::before {
content: "›";
margin-right: 8px;
color: #999;
}С помощью плагинов CMS
Для большинства популярных CMS есть готовые решения, которые генерируют крошки автоматически:
- WordPress - плагин Yoast SEO (крошки включаются в настройках модуля), RankMath, или функция get_the_breadcrumb() в теме.
- 1С-Битрикс - встроенный компонент bitrix:breadcrumb, подключается без дополнительного кода.
- OpenCart - встроенный модуль breadcrumbs в шаблоне темы.
- Tilda - виджет «Путь» в блок-библиотеке.
Плагины удобны тем, что автоматически добавляют микроразметку Schema.org - вручную её прописывать не нужно.
«На практике мы рекомендуем использовать готовые решения для CMS - они снижают риск ошибки в разметке. Но если сайт кастомный, важно проверить не только визуальное отображение крошек, но и корректность JSON-LD через валидатор Google. Видим случаи, когда крошки отображаются на странице, а в разметке - ошибки, и поисковик их игнорирует.»
Микроразметка хлебных крошек
Микроразметка позволяет поисковым системам «прочитать» структуру крошек и отобразить их в сниппете. Без разметки крошки работают только для пользователей - поисковик их не увидит.
Schema.org
Разметка встраивается прямо в HTML через атрибуты itemscope и itemprop:
JSON-LD
Более современный и предпочтительный способ - добавить разметку отдельным скриптом в
или перед . Он не привязан к HTML-структуре крошек:Обратите внимание: у последнего элемента (текущая страница) поле item можно не указывать - это не ошибка.
Советы по корректной настройке хлебных крошек
Разберём практические правила, которые помогают настроить меню хлебные крошки так, чтобы оно работало и для пользователей, и для поисковиков.
- Где размещать. Цепочку ставят под основной шапкой сайта, над заголовком H1. Это стандартное расположение: пользователи привыкли его ожидать именно там. На главной странице крошки не нужны - там нет никакого пути.
- Кликабельность. Все элементы, кроме последнего, должны быть активными ссылками. Текущая страница - только текст. Ссылка на страницу, на которой уже находишься, создаёт замкнутый переход и раздражает.
- Хлебные крошки в мобильной версии. Маленький экран - отдельная история. Если в цепочке больше трёх-четырёх уровней, она не помещается в ширину. Лучший вариант - горизонтальный скролл или свёртывание средних элементов в многоточие: «Главная → … → Смартфоны → iPhone 15 Pro». Так пользователь видит начало и конец пути, не теряя ориентации.
- Точные названия, не ключевые слова. Анкор крошки должен совпадать с заголовком раздела - без попыток вписать туда запросы ради SEO. Поисковики это читают и расценивают как манипуляцию.
- Согласованность дизайна. Один и тот же разделитель, шрифт и цвет на всём сайте. Если на одних страницах крошки оформлены стрелкой, на других слешем - это сигнал о незаконченном дизайне и снижает доверие.
Проверка и анализ хлебных крошек
Валидатор в Яндекс.Вебмастер
- Откройте и перейдите в раздел Инструменты → Валидатор микроразметки.
- Вставьте URL страницы или HTML-код.
- Система проверит разметку на соответствие Schema.org и покажет ошибки с пояснениями.
После исправления ошибок запросите переобход страницы через раздел «Переиндексация» - Яндекс обновит данные в течение нескольких дней.
Валидатор в Google Search Console
- В выберите ресурс и перейдите в раздел Улучшения → Иерархические переходы (Breadcrumbs).
- Google покажет страницы с ошибками, предупреждениями и корректной разметкой.
- После исправления нажмите «Проверить исправление» - Google перепроверит страницу.
Дополнительно можно использовать - инструмент позволяет проверить разметку отдельной страницы и посмотреть, как будет выглядеть сниппет в поиске.
Основные ошибки при работе с хлебными крошками
| Ошибка | Почему это проблема | Как исправить |
|---|---|---|
| Крошки есть визуально, разметки нет | Поисковик не видит структуру, CTR не растёт | Добавить JSON-LD или Schema.org |
| Последний элемент кликабелен | Циклический переход, плохой UX | Убрать ссылку с текущей страницы |
| Крошки на главной странице | Выглядит бессмысленно | Скрыть на главной через CSS или логику шаблона |
| Анкоры с ключевыми словами, не совпадающими с заголовком страницы | Риск переспама, путаница у пользователя | Использовать точное название раздела |
| Ошибки в position | Google не распознаёт иерархию | Нумерация должна быть последовательной: 1, 2, 3… |
| Нет крошек на мобильной версии | Пользователи теряются в каталоге | Адаптировать или показывать сокращённую цепочку |
| URL в item не совпадает с реальным адресом | Ошибка валидации, разметка игнорируется | Проверить канонические URL |
SEO-оптимизация сайта со специалистами Ingate
Хлебные крошки - один из многих элементов технической оптимизации, которые в сумме влияют на позиции сайта. Правильная структура, микроразметка, внутренняя перелинковка, скорость загрузки - каждый фактор добавляет несколько процентов к видимости в поиске.
Специалисты Ingate проводят полный SEO-аудит сайта: находят технические проблемы, анализируют конкурентов, разрабатывают стратегию СЕО продвижения и контролируют результаты. Работаем как с небольшими сайтами, так и с крупными порталами - и знаем, какие изменения дают реальный эффект в выдаче Яндекса и Google.
Источники:
