Хлебные крошки на сайте: что это, зачем поиску и как разметить

Хлебные крошки на сайте выглядят безобидной строчкой над заголовком — «Главная / Каталог / Смесители» — и ставят их обычно последними, лишь бы были. А потом валидатор микроразметки выдаёт десяток ошибок, в сниппете вместо аккуратного пути висит технический адрес, а разделы каталога не набирают вес, хотя карточек под ними тысячи. Разница между «крошки есть» и «крошки работают» — это разметка, стабильность пути и совпадение видимого с тем, что читает робот.

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

Навигационная цепочка и меню — разные инструменты

Меню отвечает на вопрос «куда я могу пойти», цепочка — на другой: «где я сейчас и что уровнем выше». Одно не заменяет другое.

Меню сквозное, его состав не зависит от открытой страницы. Цепочка уникальна для каждого адреса — на карточке смесителя она одна, на карточке лейки другая. Эта уникальность и делает её полезной для поиска: сквозной блок робот со временем воспринимает как шаблонный, а уникальный для страницы остаётся значимым.

Второе отличие — направление. Меню ведёт вширь, по соседним разделам, цепочка строго вверх — к родителю и прародителю. Для человека, пришедшего из поиска сразу на карточку, это самый быстрый способ понять, что вокруг есть целый раздел с похожими позициями.

Третье — теги. Цепочка стоит над H1 и размечается как nav с атрибутом aria-label и вложенным ol. Именно ol, а не ul: порядок здесь несёт смысл, и скринридер должен объявить пункты как последовательность. Про остальные элементы есть отдельный разбор — оптимизация навигации сайта.

Что цепочка даёт роботу: структура и вес

Робот не видит дизайн. Представление о структуре он собирает из адресов, карты сайта, внутренних ссылок и разметки. Цепочка бьёт сразу в два источника.

Первое — иерархия. Из пути «Главная / Кондиционеры / Сплит-системы / Ballu BSA-07» робот получает готовое дерево независимо от того, как выглядит адрес. Если карточка лежит по плоскому адресу вида /product/ballu-bsa-07/, из самого адреса иерархию не восстановить, а из размеченной цепочки — можно. Поэтому крошки особенно важны магазинам с плоскими адресами товаров.

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

Чего цепочка не делает: она не заменяет продуманную структуру сайта, не связывает смежные страницы (ведёт только вверх) и не является фактором ранжирования сама по себе — поисковик не начисляет баллы за наличие цепочки, он берёт из неё данные. Косвенно она влияет на то, насколько глубоко робот заходит в каталог: тема разобрана в материале про уровень вложенности страниц на сайте.

Путь вместо адреса в сниппете

Самый заметный эффект — вторая строка сниппета. По умолчанию под заголовком показывается адрес страницы. При размеченной цепочке поисковик может заменить его на читаемый путь: вместо example.ru/catalog/kondicionery/split-sistemy/ballu-bsa-07 посетитель видит example.ru › Кондиционеры › Сплит-системы.

Замена не гарантирована: и Яндекс, и Google решают сами, и решение зависит от запроса, устройства и типа страницы. На мобильной выдаче путь показывается чаще. Разметка это заявка, а не приказ.

Путь берётся из разметки, а не из адреса, значит названия пунктов должны быть короткими. «Кондиционеры» читается, «Климатическая техника для дома и офиса — каталог» обрежется многоточием. Имя пункта — не H1 раздела и не title, а отдельная подпись в два-три слова. Что ещё влияет на выдачу такой строки, разобрано в материале как формируется сниппет сайта.

Разметка BreadcrumbList: два рабочих формата

Схема одна — BreadcrumbList из словаря schema.org. Внутри массив itemListElement, каждый элемент — объект ListItem с тремя свойствами: position (номер с единицы), name (подпись) и item (абсолютный адрес). У последнего элемента, то есть у текущей страницы, item разрешено опустить.

Записать схему можно тремя способами. Устаревший словарь data-vocabulary.org из старых шаблонов поддержку потерял ещё в 2020 году: если он у вас в коде, это не работает вообще.

Формат	Где живёт код	Риск рассинхрона с видимой цепочкой	Когда выбирать
JSON-LD	Отдельный блок script, с вёрсткой не связан	Высокий: вёрстку поменяли, скрипт забыли	Когда вёрстку трогать нельзя
Микроданные	Атрибуты itemscope, itemtype, itemprop на тегах видимой цепочки	Минимальный: привязана к тому же тексту, что видит человек	Вариант по умолчанию
RDFa	Атрибуты vocab, typeof, property на тех же тегах	Минимальный, как у микроданных	Не нужен: то же самое, но хуже поддержан

Мой выбор для крошек — микроданные. Цепочка это видимый элемент интерфейса, а расхождение между разметкой и текстом на экране считается нарушением: структурированные данные обязаны описывать то, что видит посетитель. Когда атрибуты стоят на тех же тегах, разойтись нечему.

<nav aria-label="Навигационная цепочка">
 <ol itemscope itemtype="https://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
   <a itemprop="item" href="https://example.ru/"><span itemprop="name">Главная</span></a>
   <meta itemprop="position" content="1">
  </li>
  <!-- промежуточные разделы по той же схеме, position 2, 3... -->
  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
   <span itemprop="name">Ballu BSA-07</span>
   <meta itemprop="position" content="3">
  </li>
 </ol>
</nav>

То же в JSON-LD:

<script type="application/ld+json">
{"@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/kondicionery/"},
 {"@type":"ListItem","position":3,"name":"Ballu BSA-07"}]}
</script>

Отдельно про разделитель. Символ «/» или «›» не должен попадать внутрь itemprop="name", иначе он уедет в разметку и в сниппете появится «Кондиционеры ›». Рисуйте его псевдоэлементом ::after либо выносите в span без атрибутов schema.org.

Типовые ошибки внедрения

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

Ошибка	Что ломается	Как исправить
Нумерация с нуля или пропуски в position	Валидатор отдаёт ошибку, цепочка целиком не распознаётся	Строго 1, 2, 3 без пропусков и повторов
Устаревший словарь data-vocabulary.org	Разметка есть, но не читается ни одним поисковиком	Заменить itemtype на https://schema.org/BreadcrumbList
Относительные адреса в item	Часть валидаторов ругается, часть склеивает путь неверно	Всегда абсолютный адрес с протоколом и доменом
Разметка есть, видимой цепочки нет	Расхождение с видимым содержимым, разметку могут проигнорировать	Либо выводить цепочку на экран, либо снять разметку
Цепочку рисует скрипт после загрузки	В исходном HTML разметки нет, робот может её не увидеть	Отдавать цепочку в исходном коде, а не собирать на клиенте
Разделитель внутри name	В сниппет попадают лишние символы	Разделитель через CSS или тег без itemprop
Последний пункт — ссылка на саму себя	Лишняя самоссылка, у части шаблонов ещё и с nofollow	Последний пункт — текст в span, без a и без item
Ссылки цепочки закрыты nofollow	Вес разделам не передаётся, смысл теряется	Убрать атрибут, ссылки должны быть обычными
Две разные цепочки на одной странице	Робот получает противоречивые данные о родителе	Оставить один путь, второй удалить из шаблона, а не спрятать стилями
Имя пункта равно длинному H1 раздела	Путь в сниппете обрезается многоточием	Отдельное короткое имя, два-три слова

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

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

Карточка товара в нескольких категориях

Смеситель лежит в разделе «Смесители», в разделе «Для кухни» и в подборке «Хиты продаж». Какой путь показывать?

Правило первое: цепочка идёт по каноническому адресу. Если карточка доступна и по /smesiteli/tovar/, и по /dlya-kuhni/tovar/, а канонический первый, то на обоих вариантах цепочка обязана вести через «Смесители». Иначе canonical указывает в одну сторону, а размеченная иерархия в другую.

Правило второе: главный раздел — тот, где карточка нужна для спроса. Не тот, что добавили первым. Ориентир — частотность запросов раздела и то, где позиция усиливает ассортимент; обычно это узкий товарный раздел. Подборки «Хиты продаж» и «Новинки» в цепочку не ставятся вообще: их состав меняется, и путь карточки будет плавать от выгрузки к выгрузке.

Правило третье: главный раздел задаётся явно. В WooCommerce основная категория выбирается полем SEO-плагина — «Primary category» в Yoast, такой же переключатель в Rank Math. Без него движок берёт первую категорию по идентификатору, и после перекатегоризации пути у половины каталога поедут. В 1С-Битрикс главным считается раздел, в котором элемент создан, дополнительные привязки идут свойством; при выгрузке из 1С правьте структуру выгрузки, а не шаблон.

Отдельный сюжет — динамические крошки, подставляющие путь по разделу, из которого пришёл посетитель. Человеку удобно, роботу плохо: он приходит извне, видит только вариант по умолчанию и при разных обходах может получать разных родителей у одной карточки. Компромисс «показывать по переходу, размечать канонический» нарушает совпадение видимого и размеченного. Проще не делать динамику вовсе.

Если товар честно нужен в двух разделах — решение лежит не в крошках, а в структуре: два адреса с разными title и текстом либо две карточки под разные назначения. Как это стыкуется с остальными ссылками каталога, показано в разборе внутренней перелинковки интернет-магазина.

Когда крошки не нужны

Цепочка полезна там, где есть иерархия. Где иерархии нет, она становится декорацией, а иногда и вредит.

На главной странице цепочки быть не должно: путь из одного пункта не несёт информации, а BreadcrumbList из единственного элемента у части валидаторов вызывает предупреждение. Многие шаблоны выводят её автоматически — отключается настройкой.

На визитке из пяти страниц одного уровня путь «Главная / Услуги» дублирует активный пункт меню и съедает первый экран мобильной версии. На лендинге цепочки нет по определению: вести вверх некуда.

В блоге без рубрик, где записи связаны только метками, цепочка вводит в заблуждение: путь «Главная / Метка: продвижение / Заголовок» объявляет родителем страницу метки. Метки обычно малоценные и часто закрыты от индексации — родителем назначена страница, которую вы сами прячете. Либо заводите рубрики и стройте путь по ним, либо ограничьтесь двумя пунктами.

И не ставьте цепочку ради строки в сниппете, если структура кривая: человек прочитает «Главная › Статьи › Разное» и получит ноль информации. Сначала осмысленные разделы, потом цепочка по ним.

Как проверить, что разметка распознана

Проверка идёт в четыре шага, и каждый ловит свой класс проблем.

Шаг первый — исходный HTML. Не то, что показывает панель разработчика (там DOM после работы скриптов), а то, что отдал сервер. В Яндекс.Вебмастере это «Инструменты — Проверка ответа сервера». Ищете BreadcrumbList: если строки нет, а на экране цепочка есть, её рисует скрипт, и дальше проверять бессмысленно.

Шаг второй — синтаксис. Валидатор микроразметки в Яндекс.Вебмастере принимает и адрес, и фрагмент кода, показывает разобранное дерево. Должен быть один BreadcrumbList, внутри ListItem по числу пунктов, у каждого position, name и, кроме последнего, item. Универсальный validator.schema.org проверяет соответствие словарю — им удобно ловить опечатки в именах свойств.

Шаг третий — глазами Google. Rich Results Test по адресу search.google.com/test/rich-results показывает, попала ли цепочка в число распознанных элементов, и даёт вкладку с отрендеренным HTML. В Search Console есть постоянный отчёт «Навигационные цепочки» в разделе улучшений: он собирает ошибки по всему сайту и показывает, что сломалось не везде, а, скажем, только на карточках одного раздела.

Шаг четвёртый — выдача. Валидатор говорит только о корректности кода. Через две-три недели после внедрения посмотрите свои страницы в поиске с телефона — там путь появляется чаще. Если разметка валидна, а путь не показан ни через месяц и ни на одном запросе, причина обычно в расхождении с видимой цепочкой или в остатках второй разметки.

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

Частые вопросы

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

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

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

Можно ли ставить JSON-LD, если видимой цепочки на странице нет?
Технически можно, валидатор пропустит. Практически это расхождение с видимым содержимым, и разметку вправе проигнорировать. Правильнее вывести цепочку на экран — она полезна и посетителю.

Влияют ли крошки на ранжирование напрямую?
Отдельного фактора «есть крошки» не существует. Влияние косвенное: передача веса разделам, более полный обход каталога, понятный путь в сниппете и меньше отказов на карточках, куда человек попал из поиска.

Сколько времени проходит от внедрения до изменений в сниппете?
Столько, сколько занимает переобход: на небольшом сайте дни, на каталоге в десятки тысяч адресов — недели. Ускорить можно переобходом важных страниц через Вебмастер и обновлением дат в карте сайта.

Коротко

• Цепочка показывает положение страницы в иерархии и уникальна для каждого адреса, поэтому её ссылки не обесцениваются как сквозные.
• Главная польза — вес разделам: каждая карточка даёт разделу ссылку с точным анкором, на каталоге это тысячи ссылок, которые взять больше неоткуда.
• Размечайте BreadcrumbList микроданными прямо на видимой цепочке; JSON-LD берите только когда вёрстку трогать нельзя.
• Частые ошибки: словарь data-vocabulary.org, относительные адреса, нумерация с нуля, разделитель внутри имени, nofollow на ссылках и две разметки сразу.
• Для товара в нескольких категориях задавайте главный раздел явно и стройте путь по каноническому адресу; подборки вроде «Хиты продаж» в цепочку не ставятся.
• Проверяйте в четыре шага: исходный HTML от сервера, валидатор микроразметки, Rich Results Test с отчётом в Search Console и через пару недель — сниппет в мобильной выдаче.

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