Я Максим, веб-разработчик. На каждом аудите я проверяю наличие хлебных крошек — и удивительно, но на трети проектов их либо нет совсем, либо они реализованы с ошибками. Между тем, это один из самых недооценённых элементов и для пользователей, и для SEO. Разбираю подробно: что такое breadcrumbs, почему они критичны для ранжирования в Яндексе, как правильно внедрить микроразметку и какие ошибки я встречаю чаще всего.

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

Breadcrumbs — это цепочка навигации, показывающая путь от главной страницы до текущей. Выглядит обычно так:

Главная → Каталог → Мужская обувь → Кроссовки Nike Air Max

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

На первый взгляд — мелочь. Но на практике хлебные крошки решают сразу несколько задач. Во-первых, помогают пользователю ориентироваться: он всегда понимает, где находится в структуре сайта, и может быстро вернуться на уровень выше, не используя кнопку «Назад» в браузере. Это особенно важно на крупных сайтах — интернет-магазинах с сотнями категорий, порталах услуг с десятками разделов. Во-вторых, снижают показатель отказов: вместо того чтобы закрыть страницу, пользователь кликает по крошке и переходит в интересующий раздел. В-третьих, это мощный SEO-инструмент, о чём расскажу подробнее.

Почему хлебные крошки критичны для SEO в Яндексе

Яндекс отображает хлебные крошки прямо в поисковой выдаче — вместо обычного URL. То есть вместо непонятного `site.ru/catalog/muzhskaya-obuv/krossovki/nike-air-max-90-black/` пользователь видит красивую и информативную цепочку: Главная > Мужская обувь > Кроссовки. Это повышает CTR — кликабельность вашего результата в поиске. По моим наблюдениям, прирост CTR после правильного внедрения breadcrumbs составляет 5–15%. Кажется немного, но для сайта с тысячами страниц это ощутимая прибавка трафика.

Кроме красивого отображения в выдаче, хлебные крошки — это мощная внутренняя перелинковка. Каждая страница сайта автоматически ссылается на все вышестоящие разделы. Для интернет-магазина с 5000 товаров это означает, что каждая страница категории получает тысячи входящих ссылок от карточек товаров. Поисковый робот Яндекса благодаря этим ссылкам быстрее обходит сайт и лучше понимает его иерархию. Ссылочный вес распределяется естественным образом — категории верхнего уровня получают больше ссылок и ранжируются выше.

В условиях апдейта «Циолковский», где Яндекс уделяет огромное внимание структуре и юзабилити, наличие корректных хлебных крошек — один из базовых коммерческих факторов ранжирования. Я проводил эксперимент на сайте клиента из мебельной тематики: после добавления breadcrumbs с правильной разметкой позиции по категорийным запросам выросли в среднем на три-пять позиций за два месяца. Не только из-за крошек, конечно, — параллельно дорабатывали структуру, — но крошки были частью пакета изменений, и корреляция была очевидной.

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

Не все breadcrumbs одинаковы. Существуют три основных типа, и выбор зависит от структуры вашего сайта.

Иерархические (hierarchy-based). Самые распространённые. Показывают положение страницы в структуре сайта: Главная → Раздел → Подраздел → Страница. Подходят для интернет-магазинов, каталогов услуг, порталов с чёткой древовидной структурой. Именно этот тип лучше всего воспринимается Яндексом.

На основе атрибутов (attribute-based). Показывают характеристики текущей страницы: Кроссовки → Nike → Мужские → Размер 42. Встречаются в интернет-магазинах с фильтрацией, но сложнее в реализации и хуже поддерживаются поисковиками.

На основе истории (path-based). Показывают фактический путь пользователя: Главная → Поиск «кроссовки» → Страница 3 → Товар. Я не рекомендую этот тип — он непредсказуем, не даёт поисковику понятной структуры и бесполезен для SEO. Пользователю он тоже мало помогает, потому что путь у каждого свой.

Для абсолютного большинства сайтов оптимальный выбор — иерархические breadcrumbs.

Микроразметка Schema.org: делаем правильно

Чтобы Яндекс и Google корректно отображали хлебные крошки в поисковой выдаче, недостаточно просто нарисовать цепочку ссылок на странице. Нужна структурированная разметка по схеме `BreadcrumbList` от Schema.org.

Формат JSON-LD — самый удобный и рекомендуемый. Код вставляется в `<head>` или `<body>` страницы и не влияет на визуальное отображение:

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Главная",
      "item": "https://site.ru/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Мужская обувь",
      "item": "https://site.ru/catalog/muzhskaya-obuv/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Кроссовки Nike Air Max",
      "item": "https://site.ru/catalog/muzhskaya-obuv/krossovki-nike-air-max/"
    }
  ]
}

Я предпочитаю JSON-LD по нескольким причинам: его проще внедрять (один скрипт в шапке), легче поддерживать (не нужно разбираться в HTML-атрибутах на каждом элементе), и оба поисковика его отлично понимают. Альтернатива — формат Microdata, где атрибуты itemscope, itemprop добавляются прямо в HTML-элементы. Он тоже работает, но код получается менее читаемым.

Важный нюанс: последний элемент цепочки (текущая страница) можно включать в разметку, но без ссылки в свойстве `item`. Яндекс рекомендует именно такой подход. Если добавить ссылку на текущую страницу — ничего страшного, но семантически правильнее её опустить.

Как я реализую breadcrumbs на разных платформах

На WordPress. Проще всего — плагин Yoast SEO или Rank Math. Оба генерируют breadcrumbs автоматически с правильной JSON-LD разметкой. Нужно только включить в настройках плагина и вывести шорткод или функцию в шаблоне темы. Если используется WooCommerce, хлебные крошки автоматически подстраиваются под структуру каталога товаров.

На кастомных сайтах (Next.js, Nuxt.js). Пишу компонент, который строит цепочку на основе URL-структуры или данных из CMS. Для Next.js с App Router обычно парсю сегменты URL и маплю их на человекочитаемые названия из конфигурации или базы данных. Разметку JSON-LD генерирую программно через компонент в `<head>`. На одном проекте мне нужно было учитывать, что товар может находиться в нескольких категориях — в таком случае breadcrumbs строятся по канонической категории, которая задаётся в админке.

На Битрикс. Стандартный компонент `bitrix:breadcrumb` работает «из коробки», но по умолчанию не добавляет Schema.org-разметку. Приходится дорабатывать шаблон компонента — добавлять JSON-LD скрипт вручную. Это типичная задача на полчаса-час, но многие разработчики её игнорируют, и сайт на Битрикс годами живёт без разметки.

Проверка: всё ли работает правильно

После внедрения обязательно проверяю разметку через два инструмента. Первый — валидатор микроразметки Яндекса (webmaster.yandex.ru/tools/microtest/). Вставляю URL страницы, смотрю, что `BreadcrumbList` распознана без ошибок. Второй — Google Rich Results Test. Если оба инструмента показывают зелёную галочку — всё корректно.

После валидации захожу в Яндекс Вебмастер и запрашиваю переобход страницы. Обычно breadcrumbs начинают отображаться в поисковой выдаче через несколько дней, иногда — через одну-две недели. Рекомендую также проверить несколько разных типов страниц: главную, категорию, подкатегорию, карточку товара — чтобы убедиться, что цепочка строится корректно на всех уровнях.

Типичные ошибки, которые я нахожу на аудитах

За годы работы я составил список ошибок, которые встречаю регулярно. Вот самые частые.

Хлебные крошки есть визуально, но без микроразметки. Пользователь их видит и может кликать, но Яндекс не подхватывает для отображения в выдаче. Теряется SEO-эффект и CTR.

Последний элемент цепочки — кликабельная ссылка. Текущая страница не должна быть ссылкой сама на себя. Это и логически неправильно (куда ведёт эта ссылка?), и семантически ошибочно. Последний элемент — просто текст.

Пропущены промежуточные уровни. Например: Главная → Товар. Пропущена категория. Это разрушает смысл breadcrumbs — пользователь не видит, в каком разделе находится товар, а поисковик не получает информации о структуре.

Разные цепочки для одного товара. Если товар размещён в нескольких категориях (что нормально для интернет-магазинов), нужно выбрать одну основную (каноническую) категорию для breadcrumbs. Иначе поисковик получает противоречивые сигналы. Я обычно рекомендую выбирать ту категорию, которая точнее всего описывает товар и которая важнее для SEO.

Слишком длинные названия в крошках. «Кроссовки мужские Nike Air Max 90 чёрные кожаные размер 42» — это не название для breadcrumb. Оптимально — два-четыре слова. Названия должны быть краткими и понятными.

Хлебные крошки скрыты на мобильных устройствах. Некоторые разработчики прячут breadcrumbs на экранах смартфонов через `display: none`, чтобы «не загромождать экран». Это ошибка — на мобильных навигация ещё важнее, чем на десктопе. Если цепочка слишком длинная — можно показать только последние два-три уровня с возможностью раскрыть полную цепочку.

Дизайн и UX хлебных крошек

Breadcrumbs не должны бросаться в глаза, но должны быть заметными. Я использую мелкий шрифт (12–14 пикселей), приглушённый цвет (серый), разделители в виде стрелки или косой черты. Текущая страница — обычным текстом без ссылки, предыдущие уровни — кликабельные ссылки с подчёркиванием при наведении.

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

Подводя итог

Хлебные крошки — это тридцать-шестьдесят минут разработки, которые дают результат сразу в трёх направлениях: улучшают навигацию для посетителей, усиливают внутреннюю перелинковку для SEO, и повышают CTR в поисковой выдаче Яндекса за счёт красивого отображения. Соотношение усилий и результата — одно из лучших среди всех SEO-техник. Если на вашем сайте нет корректных breadcrumbs с JSON-LD разметкой — это первое, что стоит исправить.