Что такое хлебные крошки и зачем они нужны
Хлебные крошки - это навигационная цепочка, которая показывает путь текущей страницы в структуре сайта. Обычно выглядит так: Главная > Раздел > Подраздел > Страница.
Навигация - это все элементы, которые помогают человеку двигаться по сайту: меню, ссылки на категории, подкатегории, блоки переходов, оглавление в статье, список разделов и т. п.
На практике это один из самых недооцененных блоков. Если навигация собрана правильно, у сайта:
- меньше тупиков и отказов
- понятнее структура (и людям, и поисковику)
- проще масштабироваться: добавлять разделы, категории, статьи, услуги
Польза для UX и для SEO - в чем разница
Польза для UX
Хлебные крошки и нормальная навигация помогают:
- быстро понять, где я нахожусь
- вернуться на уровень выше (в раздел, категорию, подборку)
- увидеть “следующий шаг”, а не уходить с сайта
На мобильных это особенно важно: меню часто спрятано, а крошки дают простой способ вернуться к выбору.
Польза для SEO
С точки зрения SEO хлебные крошки и навигация дают:
- внутренние ссылки по иерархии (страницы лучше связаны)
- снижение глубины важных страниц (меньше кликов от главной)
- более понятные приоритеты структуры: что раздел, что категория, что детальная страница
- шанс получить более аккуратный вид в выдаче (например, когда поисковик показывает хлебные крошки вместо URL)
Важно: SEO-эффект появляется не от факта “крошки есть”, а от того, что они отражают реальную структуру и ведут на полезные страницы.
Популярные SEO сервисы
Какие бывают хлебные крошки и что выбирать
Есть три типовых варианта:
-
Иерархические (структурные)
Главная > Каталог > Кроссовки > Nike Air Max
Это самый надежный и понятный вариант. Почти всегда стоит делать именно его. -
По истории (как человек пришел)
Главная > Поиск > Результаты > Товар
Для SEO почти бесполезно и часто путает пользователя. Обычно лучше избегать. -
Смешанные (часто у e-com с фильтрами)
Главная > Каталог > Кроссовки > Черные > Nike
Здесь легко уйти в проблему дублей и параметров. Такой вариант допустим, только если у вас уже есть продуманная стратегия страниц фильтров (какие индексируются, какие нет, как управляются canonical/noindex).
Базовая рекомендация для новичков: делайте иерархические крошки, без фильтров и “истории”.
Правила хороших хлебных крошек
1) Крошки должны отражать реальную структуру сайта
Если у вас структура: Раздел -> Подраздел -> Страница, то крошки должны повторять эту логику.
Плохой пример: страница лежит в разделе “Блог”, а крошки показывают “Услуги” просто потому, что так хочется продать услугу.
2) Каждый шаг - это реальная страница, на которую можно перейти
Обычно шаги крошек ведут на:
- главную
- раздел (категорию, рубрику)
- подкатегорию (если она есть и не пустая)
- текущую страницу (часто без ссылки)
Если “категория” в крошках ведет на страницу, которая закрыта от индексации или не существует для пользователя - это ломает смысл.
3) Последний элемент - текущая страница
Чаще всего текущую страницу в крошках:
- показывают текстом
- не делают ссылкой (это нормально)
- часто совсем не показывают пользователю
4) Не плодите разные пути для одной и той же страницы
Если одна и та же страница может жить в нескольких ветках (например, товар в нескольких категориях), выберите основной путь и используйте его в крошках.
Иначе получится хаос:
- сегодня
Каталог > Кроссовки > Товар - завтра
Каталог > Nike > Товар - послезавтра
Акции > Скидки > Товар
5) Крошки должны быть видимыми и кликабельными без “магии”
Для поисковиков и для надежности:
- используйте обычные ссылки
<a href=""> - не прячьте крошки в элементах, которые кликаются только через JS
- следите, чтобы крошки были доступны в финальном HTML (особенно если сайт на SPA/JS)
Микроразметка хлебных крошек: когда нужна и как сделать безопасно
Если хотите, чтобы поисковику было проще понимать цепочку, добавляют структурированные данные BreadcrumbList (Schema.org). Самый практичный вариант - JSON-LD.
Пример (адаптируйте под свои 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/blog/"
},
{
"@type": "ListItem",
"position": 3,
"name": "Хлебные крошки и навигация"
}
]
}Что важно:
- position идет по порядку, без пропусков.
- name - понятные названия шагов.
- item указывайте только там, где шаг реально ведет на страницу.
- Не делайте одновременно несколько разных разметок крошек “на всякий случай” (лишнее может мешать диагностике).
Нюанс по Google и Яндекс: Google обычно лучше и стабильнее использует BreadcrumbList в отображении пути, а Яндекс может показывать цепочку по своим алгоритмам и данным сайта. Поэтому разметку стоит рассматривать как усиление, но основа - это логичная структура и ссылки.
Навигация на сайте: что должно быть, чтобы структура работала
Навигация - это не только меню в шапке. Для большинства проектов полезно думать так:
1) Главное меню (шапка)
Задача - дать быстрый доступ к основным разделам.
Как делать:
- 5-9 пунктов верхнего уровня обычно достаточно
- если разделов много - группируйте (мега-меню, выпадающие блоки), но без перегруза
- названия пунктов делайте понятными человеку, а не “SEO-терминами”
Частая ошибка: превращать меню в список из десятков ссылок “чтобы все было связано”. Это ухудшает UX и размывает приоритеты.
2) Навигация внутри раздела (категории, рубрики)
На страницах разделов хорошо работают:
- список подкатегорий
- подборки “популярное в разделе”
- короткие ссылки на ключевые страницы темы
Идея простая: человек должен видеть, куда идти дальше, без необходимости долго скроллить.
3) Оглавление и якоря в длинных материалах
Для инфо-страниц и гайдов:
- оглавление помогает пользователю и снижает ощущение “простыни текста”
- якоря упрощают переход к нужному блоку
Важно: якоря - это не замена нормальной структуры сайта. Это навигация внутри страницы.
4) Футер (нижняя часть сайта)
Футер полезен для:
- повторения ключевых разделов
- контактов, юридических страниц, доверия
- навигации по сервисным страницам
Ошибка: “SEO-футер” с сотнями ссылок на все города и услуги. Если нужно масштабировать - делайте это через структуру и хабы, а не через портянку ссылок внизу.
Типовые ошибки хлебных крошек и навигации
1) Крошки не совпадают с реальной иерархией
Если крошки “рисуют” удобный путь, которого нет в структуре, сайт выглядит несогласованным: и людям, и поисковику сложнее понять, что главное.
2) В крошках есть шаги, которые не существуют как страницы
Например, показывается “Категория”, но клик ведет в никуда, на пустую страницу или на закрытый раздел.
3) Крошки строятся по фильтрам и параметрам без стратегии
Так можно случайно начать раздавать ссылки на URL, которые:
- создают дубли
- не должны индексироваться
- не являются полезными страницами
4) Меню перегружено и не отражает приоритеты
Когда в меню выведено “всё подряд”, человек теряется, а ключевые разделы не выделяются.
5) Навигация сделана технически неудобно
Частые случаи:
- кликабельные элементы без нормальных ссылок
- ссылки ведут на редиректы или 404 страницы
- крошки и меню не работают на мобильных или скрываются слишком агрессивно
Быстрый чек-лист для проверки
- крошки отражают реальную структуру и не противоречат URL-логике
- каждый шаг крошек ведет на реальную полезную страницу (кроме текущей)
- для страниц с несколькими “ветками” выбран один основной путь
- крошки и меню сделаны обычными ссылками и доступны в HTML
- меню отражает приоритеты: главное видно сразу, вторичное не мешает
- нет ссылок на фильтры/параметры в крошках, если вы не управляете такими страницами осознанно
- на мобильных крошки читаемы и не ломают верстку