Хлебные крошки — это навигационная цепочка вверху страницы вроде «Главная › Каталог › Кресла › Кресло Ergo». Она показывает, где ты на сайте, и даёт вернуться на уровень выше в один клик. Мелочь на вид, но для SEO это перелинковка, понятная структура и — с микроразметкой — цепочка прямо в сниппете вместо длинного URL. Разберём, что это, зачем, какие бывают и как сделать с разметкой. С конструктором BreadcrumbList.
- Хлебные крошки — навигационная цепочка от главной до текущей страницы. Название — из сказки про Гензеля и Гретель.
- Польза: удобная навигация (UX), внутренняя перелинковка и вес разделам (SEO), понятная структура для поисковика.
- С микроразметкой BreadcrumbList цепочка выводится в сниппет вместо URL — результат заметнее и кликабельнее.
- Нужны сайтам с вложенностью: каталоги, магазины, блоги. Лендингу и одностраничнику не нужны.
Что такое хлебные крошки простыми словами
Хлебные крошки (по-английски breadcrumbs) — это строка-навигация вверху страницы, которая показывает путь от главной до места, где ты сейчас. Каждый уровень, кроме последнего, — кликабельная ссылка: нажал и поднялся на ступень выше.
Название красивое и не случайное: оно из сказки о Гензеле и Гретель, которые бросали за собой хлебные крошки, чтобы найти дорогу домой. Здесь идея та же — цепочка помогает не потеряться и вернуться назад.
Зачем нужны хлебные крошки
Две стороны пользы — для людей и для поиска.
Но главный SEO-бонус — цепочка в сниппете. С микроразметкой поисковик показывает в выдаче понятную навигацию вместо длинного технического URL. Сравни:
Виды хлебных крошек
По логике построения цепочки различают три типа.
| Тип | Как строится |
|---|---|
| Иерархические | По месту страницы в структуре сайта: Главная › Раздел › Подраздел › Страница. Самый частый и правильный для SEO вид. |
| По атрибутам | Из выбранных фильтров в каталоге: Кресла › Кожаные › Чёрные. Встречается в интернет-магазинах. |
| По истории (путевые) | Повторяют путь, которым пользователь пришёл на страницу. Для SEO почти не используют — цепочка нестабильна. |
Это деление по логике построения. Отдельно крошки различают по оформлению — как они выглядят на странице:
Как добавить хлебные крошки на сайт
Три пути, от простого к ручному.
Модуль или плагин CMS. В большинстве движков крошки уже есть или включаются одним плагином. В WordPress — темой или плагином (Yoast, Rank Math), в Bitrix — компонентом, в Tilda — блоком навигации. Самый быстрый путь.
Вручную в шаблоне. Если движок не даёт крошки, их верстают обычным списком ссылок в шаблоне страницы. Чуть больше работы, зато полный контроль над видом и разметкой.
С микроразметкой. Любой из способов стоит дополнить разметкой BreadcrumbList — без неё крошки работают как навигация, но не попадут в сниппет. Про это — следующий раздел.
Технически крошки — это просто список ссылок. Минимальная вёрстка выглядит так:
aria-label помогает скринридерам понять, что это навигация.Микроразметка BreadcrumbList
Чтобы крошки попали в сниппет, к вёрстке добавляют микроразметку BreadcrumbList из структурированных данных Schema.org. Каждый уровень описывается как ListItem с позицией, названием и ссылкой. Проще всего — блоком JSON-LD:
item не указывают. Порядок position — строго по возрастанию. Текст в разметке должен совпадать с видимыми крошками.Собирать такой код руками для каждой страницы не нужно — его генерят движок, плагин или нейросеть. Как получить готовую разметку через ChatGPT и вставить на сайт — в разборе микроразметки через ChatGPT. А проверить, увидел ли её поисковик, можно в отчёте «Улучшения → Breadcrumbs» в Google Search Console.
Конструктор разметки: собери свою цепочку
Впиши названия уровней своего сайта — конструктор соберёт и цепочку, и готовую разметку BreadcrumbList. Останется скопировать.
Правила оформления и SEO-нюансы
Хлебные крошки — простой элемент, но пара нюансов отделяет аккуратную реализацию от той, что вредит. Держи в голове эти правила.
- →Названия уровней — как в меню, без ключей. Уровень называется так же, как раздел в навигации: «Кресла», а не «Купить кресло в Москве недорого». Ключи в крошках — это переспам, поисковик его видит.
- →Один разделитель, единый стиль. Обычно это
›,/или стрелка. Выбери один и держи по всему сайту — разнобой выглядит неряшливо. - →Место — вверху, до H1. Крошки ставят сразу под шапкой, перед заголовком страницы. Так их сразу видно и человеку, и роботу.
- →Глубина без фанатизма. 3–4 уровня — норма. Если цепочка растянулась на 6–7, это сигнал, что структура сайта слишком глубокая и её стоит упростить.
- →Разметка совпадает с видимым. Текст в BreadcrumbList должен слово в слово повторять то, что видит человек. Расхождение — повод для поисковика проигнорировать разметку.
Мобильная адаптация — то, что часто забывают. На узком экране длинная цепочка переносится на две строки и ломает вёрстку. Решение: сворачивать её до последних 1–2 уровней («… › Кресла › Ergo») или прятать в горизонтальный скролл. Проверь свои крошки на телефоне заодно со всей мобильной вёрсткой и скоростью.
Частые ошибки
После внедрения обязательно проверь разметку валидатором и посмотри отчёт «Улучшения» в Search Console — там видно, распознал ли Google твои крошки и нет ли ошибок. Хлебные крошки — часть общей внутренней оптимизации, поэтому внедряют их заодно с остальной техничкой.
Частые вопросы
Что такое хлебные крошки на сайте простыми словами?
Зачем нужны хлебные крошки для SEO?
Какие бывают виды хлебных крошек?
Как добавить хлебные крошки на сайт?
Что такое микроразметка BreadcrumbList?
Нужны ли хлебные крошки одностраничнику или лендингу?
Почему хлебных крошек нет в сниппете Google или Яндекса?
Главное
Хлебные крошки — навигационная цепочка от главной до текущей страницы. Людям они дают удобную навигацию и снижают отказы, а SEO — внутреннюю перелинковку, понятную структуру и, с микроразметкой BreadcrumbList, цепочку прямо в сниппете вместо URL. Используй иерархический тип, делай каждый уровень кроме текущего ссылкой, добавляй разметку JSON-LD и следи, чтобы её текст совпадал с видимыми крошками. Нужны сайтам с вложенностью — каталогам, магазинам, блогам; лендингу они ни к чему. После внедрения проверь распознавание в отчёте «Улучшения» Search Console.