Хлебные крошки на сайте: зачем нужны и как вывести их в выдаче
Навигационная цепочка помогает пользователю и поиску. Как её построить, разметить через schema и увидеть в сниппете Яндекса и Google.
Содержание
Хлебные крошки решают две задачи: показывают посетителю с поиска, куда он попал, и дают поисковику путь вместо голого адреса в сниппете. Для второго одной строки ссылок в вёрстке мало, нужна ещё разметка BreadcrumbList в JSON-LD.
Хлебные крошки на сайте выглядят как мелочь: строчка серых ссылок над заголовком, которую половина владельцев вообще не замечает. При этом именно она отвечает за то, покажет ли Google в сниппете аккуратный путь вместо голого URL, и поймёт ли посетитель с органики, куда он вообще попал. Статья для тех, у кого сайт услуг или блог на WordPress, Битриксе или Тильде, и кто хочет разобраться сам: как построить цепочку, как разметить её через BreadcrumbList, почему разметка иногда не подхватывается и что чаще всего ломают при внедрении.
Я веду абонентку шесть лет и внедрял крошки на нескольких десятках сайтов. Сразу оговорюсь: это не тот инструмент, который поднимет позиции. Это инструмент, который улучшает поведение в выдаче и внутри сайта, а поведение уже влияет на позиции. Разница принципиальная, и подрядчики, которые продают крошки как «фактор ранжирования», вводят в заблуждение.
Что крошки дают человеку и что поиску
Начнём с пользователя, потому что о нём почему-то вспоминают последним.
Средний посетитель приходит из поиска не на главную. Он попадает сразу на карточку услуги или на статью, и первый его вопрос звучит примерно так: «Это вообще что за сайт и есть ли тут ещё что-то по моей теме?». Крошки отвечают на оба вопроса одной строкой. Человек видит «Главная / Услуги / Обслуживание сайтов на WordPress» и мгновенно понимает уровень вложенности и наличие раздела выше.
Второй сценарий: мобильный посетитель нажал системную кнопку «назад» и вылетел обратно в поиск. Крошки дают ему альтернативу подняться на уровень выше, не покидая сайт. На мобильных это заметно по метрикам: глубина просмотра растёт на десятые доли, но растёт стабильно.
Теперь поиск. Робот получает от крошек три вещи:
- дополнительные внутренние ссылки на разделы, причём с осмысленным анкором, а не с «подробнее»,
- явное указание иерархии, которое помогает распределить вес по структуре,
- данные для сниппета: при корректной разметке Google заменяет URL на путь вида
saitfix.ru > Услуги > Обслуживание, а Яндекс подтягивает их в свою навигационную цепочку.
Внутренняя перелинковка через крошки работает тише, чем блоки «читайте также», но зато она автоматическая и не зависит от того, вспомнил ли редактор поставить ссылку. Про то, как выстраивать перелинковку целиком, я писал отдельно в статье про внутреннюю перелинковку, крошки там один из слоёв, а не замена всему остальному.
Чего крошки не делают: не заменяют меню, не спасают плохую структуру и не двигают запрос из топ-50 в топ-10. Если у сайта каша в разделах, крошки эту кашу просто покажут в явном виде.
Правильная структура цепочки
Главная ошибка на этом шаге не техническая, а логическая: цепочку рисуют «как красиво», а не «как устроен сайт».
Сайт услуг
Для типового сайта услуг рабочая схема выглядит так:
Главная / Услуги / Обслуживание сайтов на WordPress
Главная / Услуги / Восстановление после взлома
Главная / Тарифы
Главная / КонтактыОбратите внимание: последний элемент это текущая страница, и он не должен быть ссылкой. Про это ниже отдельно, потому что ломают чаще всего именно тут.
Если услуг много и они сгруппированы, добавляется промежуточный уровень: Главная / Услуги / Безопасность / Лечение сайта от вирусов. Но лезть в третий уровень ради красоты не надо. У сайта на 12 услуг категории только мешают: посетитель делает лишний клик, а поисковик получает пустые страницы-прокладки, которые потом придётся закрывать от индексации или наполнять текстом.
Блог
В блоге цепочка строится через рубрику:
Главная / Блог / SEO / Хлебные крошки на сайтеТут возникает вопрос, который мне задают регулярно: что делать, если статья лежит в трёх рубриках сразу. Ответ простой: в крошках должна быть одна рубрика, основная. Не первая по алфавиту, не случайная, а та, что задана явно. В WordPress это решается либо полем ACF «основная рубрика», либо настройкой Rank Math, либо тем, что вы просто перестаёте вешать на статью по три рубрики.
Если рубрику выбирает движок сам, на каждой пересборке она может смениться, и Google получит для одного URL сегодня один путь, а завтра другой. Ничего катастрофического, но доверия к разметке это не добавляет.
Товары в магазине
Для OpenCart и WooCommerce правило то же: цепочка идёт по основной категории товара, а не по той, из которой пришёл посетитель. Динамические крошки «по пути перехода» были модны лет десять назад и до сих пор встречаются в старых шаблонах. Проблема в том, что при таком подходе один URL отдаёт разную разметку разным посетителям, а это уже прямой путь к расхождениям в Search Console.
Разметка BreadcrumbList: минимальный рабочий пример
Разметка нужна отдельно от визуальных крошек. Сами по себе ссылки в блоке <nav> поисковик распознаёт с переменным успехом, а JSON-LD читает однозначно.
Вот минимальный рабочий пример, который я ставлю на сайты услуг. Он валиден и в Google, и в Яндексе:
{
"@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/uslugi/"
},
{
"@type": "ListItem",
"position": 3,
"name": "Обслуживание сайтов на WordPress"
}
]
}Три момента, которые определяют, заработает разметка или нет.
Первое: position нумеруется с единицы и идёт подряд. Пропущенная позиция или нумерация с нуля даёт ошибку валидации.
Второе: у последнего элемента нет поля item. Это текущая страница, ссылка на саму себя не нужна ни человеку, ни роботу. Google формально допускает вариант с item на последнем элементе, но тогда URL обязан совпадать с каноническим адресом страницы посимвольно. Проще не ставить вовсе.
Третье: URL в item абсолютные, с протоколом и доменом. Относительные пути /uslugi/ тут не работают, хотя валидатор иногда пропускает их молча.
Блок вставляется в <head> или в конец <body> внутри тега <script type="application/ld+json">. Место значения не имеет, главное, чтобы он не оказался внутри другого JSON-LD-объекта. Общий разбор разметки для сайта услуг у меня есть в статье про микроразметку schema.org, там разобраны Service, Organization и как они уживаются с BreadcrumbList на одной странице.
Микроданные через itemprop в HTML тоже поддерживаются, но я их не рекомендую: разметка размазывается по вёрстке, любая правка шаблона её ломает, и отладка превращается в поиск потерянного атрибута. JSON-LD лежит одним блоком, его видно целиком.
Почему крошки не показываются в сниппете
Самое частое разочарование: разметку поставили, валидатор зелёный, а в выдаче по-прежнему URL. Разберу причины по частоте, как встречаю их в работе.
Разметка стоит, но страница ещё не переобойдена. Google обновляет сниппет не мгновенно, на малопосещаемом сайте это занимает от нескольких дней до трёх недель. Яндекс обычно быстрее, но тоже не в тот же день. Ускорить можно переобходом через Search Console и Вебмастер.
Крошки в разметке не совпадают с тем, что видно на странице. Это прямое нарушение рекомендаций: разметка должна описывать реально существующий на странице контент. Если в JSON-LD три уровня, а на странице визуально ничего нет, Google рано или поздно перестаёт доверять разметке на всём сайте. Видел случай, когда после такого у клиента пропали и крошки, и FAQ-сниппеты разом.
Путь слишком длинный. Больше четырёх-пяти уровней Google схлопывает, показывая многоточие или обрезая середину. Ничего страшного, но ожидание «покажется всё» не оправдается.
Поисковик решил, что для этого запроса другой формат сниппета полезнее. Ни Google, ни Яндекс не гарантируют показ крошек, разметка это заявка, а не команда. По моим наблюдениям, на информационных статьях крошки показываются заметно чаще, чем на коммерческих страницах.
Сайт не в индексе или страница закрыта каноникалом на другую. Тут разметка вообще ни при чём, лечится разбором индексации. Если каноникалы на сайте расставлены криво, крошки станут наименьшей из проблем.
Реализация: WordPress, Битрикс, Тильда
| Платформа | Штатное решение | Разметка JSON-LD | Что делать руками |
|---|---|---|---|
| WordPress + Rank Math | Есть, включается галочкой | Да, из коробки | Вставить вызов функции в шаблон |
| WordPress + Yoast | Есть | Да | То же самое |
| WordPress без SEO-плагинов | Нет | Нет | Свой код в functions.php |
| Битрикс | Компонент breadcrumb в шаблоне | Зависит от шаблона, чаще микроданные | Проверить и дописать JSON-LD |
| Тильда | Нет | Нет | Блок T123 или ручной HTML в T190 |
| OpenCart | Есть в стандартном шаблоне | Микроданные, часто битые | Заменить на JSON-LD |
WordPress
Если стоит Rank Math, крошки включаются в разделе «Общие настройки» галочкой «Хлебные крошки», а вывод ставится в шаблон:
<?php if ( function_exists( 'rank_math_the_breadcrumbs' ) ) { rank_math_the_breadcrumbs(); } ?>Строку ставим в single.php, page.php и archive.php перед заголовком h1. Разметку плагин добавит сам, отдельно вставлять JSON-LD не надо. Наоборот, если вы вручную добавите свой блок к плагинному, получите два BreadcrumbList на страницу, а это уже ошибка.
Настройки, которые стоит поправить сразу после включения:
- убрать «Home» и поставить «Главная» в поле для первого элемента,
- выключить показ крошек на главной странице, там цепочка из одного элемента бессмысленна,
- проверить разделитель: по умолчанию часто стоит символ, который на мобильных выглядит криво.
Если SEO-плагинов нет и ставить их не хочется, минимальная своя реализация для страниц и записей помещается в 20 строк:
function sf_breadcrumbs() {
if ( is_front_page() ) return;
$items = array( array( 'Главная', home_url( '/' ) ) );
if ( is_singular( 'post' ) ) {
$items[] = array( 'Блог', get_permalink( get_option( 'page_for_posts' ) ) );
$cats = get_the_category();
if ( $cats ) $items[] = array( $cats[0]->name, get_category_link( $cats[0] ) );
}
$items[] = array( get_the_title(), '' );
echo '<nav class="breadcrumbs" aria-label="Хлебные крошки"><ol>';
foreach ( $items as $i => $it ) {
echo '<li>';
echo $it[1] ? '<a href="' . esc_url( $it[1] ) . '">' . esc_html( $it[0] ) . '</a>' : esc_html( $it[0] );
echo '</li>';
}
echo '</ol></nav>';
}Дальше по тому же массиву $items собирается JSON-LD. Специально не привожу тут второй кусок кода: логика очевидна из примера разметки выше, а копипаста из блога в продакшн без понимания это отдельный жанр проблем.
Битрикс
В Битриксе крошки выводит компонент bitrix:breadcrumb, он почти всегда уже есть в header.php шаблона. Проблема в другом: шаблон компонента по умолчанию отдаёт микроданные старого формата, а иногда и вовсе ничего. Смотреть надо в /local/templates/<шаблон>/components/bitrix/breadcrumb/.
Второй момент: цепочка в Битриксе собирается из свойств инфоблока и из $APPLICATION->AddChainItem(). Если разработчик дописывал элементы вручную в разных местах шаблона, порядок легко ломается при правках. Первое, что делаю на аудите битриксового сайта: смотрю, сколько раз в проекте встречается AddChainItem, и не дублируются ли уровни.
Тильда
Тут всё грустнее. Штатного блока крошек нет, поэтому вариантов два.
Первый: блок T123 (HTML) с руками написанной разметкой и ссылками. Работает, но на каждую страницу придётся править вручную, и через 40 страниц вы возненавидите этот способ.
Второй: собрать крошки скриптом из URL страницы в блоке T190. Скрипт парсит путь, подставляет заголовки из заранее заданного словаря и рисует цепочку. Решение живучее, но словарь надо поддерживать. Для сайта на 10-15 страниц нормально, дальше стоит думать про переезд на CMS.
Оба варианта требуют отдельно добавить JSON-LD, автоматически Тильда его не сформирует.
Ошибки, которые вижу чаще всего
Собрал в один список то, что реально встречаю на аудитах. Порядок примерно по частоте.
- Последний элемент сделан ссылкой на самого себя. Формально не ошибка, но такая ссылка бесполезна и раздувает счётчик внутренних ссылок на странице. Убирается за минуту.
- Цепочка не совпадает с URL. На странице
/uslugi/wordpress/крошки показываютГлавная / Блог / WordPress. Обычно это последствие копипасты шаблона. Робот получает противоречивый сигнал: URL говорит одно, разметка другое.
- Два блока BreadcrumbList на странице. Классика: включили крошки в теме, потом поставили Rank Math и включили ещё раз. Валидатор Google при этом может не ругаться, а вот в сниппете начинается лотерея. Проверяется поиском по исходному коду страницы.
- В крошках стоит несуществующий раздел. Ссылка
/uslugi/есть в цепочке, а страницы такой нет, отдаётся 404. Каждая такая крошка это битая ссылка на всех страницах раздела сразу, и на большом сайте их набираются сотни. Как искать такое массово, я разбирал в статье про битые ссылки и 404.
- Названия уровней не совпадают с заголовками страниц. В крошках «Услуги», на странице
h1«Что мы делаем». Не критично, но посетителя сбивает, а поисковик получает ещё один вариант анкора для той же страницы.
- Крошки вывели на главной.
Главная / Главнаявстречается чаще, чем хотелось бы.
- Абсолютные URL в разметке с другим протоколом или с
www, когда сайт живёт без него. Разметка ссылается на адрес, который редиректит. Не смертельно, но зачем.
- Крошки скрыты через
display: noneна мобильных ради экономии места, а разметка осталась. Формально контент на странице есть, фактически пользователь его не видит. Лучше переверстать в компактный вид: сократить до двух последних уровней и включить горизонтальный скролл.
Как проверить, что всё работает
Проверка занимает минут десять и делается в таком порядке.
Смотрим исходный код страницы и ищем BreadcrumbList. Ровно одно вхождение на страницу. Если больше, дальше можно не идти, сначала убираем дубль. Быстрая проверка из консоли:
curl -s https://example.ru/uslugi/wordpress/ | grep -c "BreadcrumbList"Ответ должен быть 1. Если 0, разметка не отдаётся в HTML: скорее всего, её дорисовывает JavaScript, и поисковик увидит её не сразу или не увидит вовсе.
Дальше гоняем страницу через валидатор. У Google это Rich Results Test и Schema Markup Validator, у Яндекса валидатор микроразметки в Вебмастере. Проверять надо не главную, а по одной странице каждого типа: услугу, статью, рубрику, страницу пагинации. На второй и последующих страницах пагинации цепочка обязана оставаться той же, что на первой, а не отращивать лишний уровень.
Через неделю-две заходим в Search Console, раздел «Улучшения», и смотрим отчёт по хлебным крошкам: сколько страниц с валидной разметкой, есть ли ошибки. В Яндекс Вебмастере то же самое живёт в разделе «Инструменты», подраздел контроля микроразметки. Если Вебмастером ещё не пользовались, начните с базовой настройки, я описывал её в статье про Яндекс Вебмастер для новичков.
И последняя проверка, которую пропускают почти все: открыть сайт на телефоне и посмотреть, как крошки ведут себя при длинном названии страницы. Строка на три переноса над заголовком выглядит хуже, чем её отсутствие.
С чего начать
Если крошек на сайте нет вообще, порядок действий такой. Сначала нарисуйте структуру разделов на бумаге и убедитесь, что каждый уровень цепочки соответствует реально существующей странице. Потом включите вывод: в WordPress через SEO-плагин, в Битриксе через штатный компонент, в Тильде руками. Потом проверьте, что JSON-LD один и он валиден. И только после этого ждите изменений в сниппете, на это уходит от недели до месяца.
Работа на типовом сайте услуг занимает у меня 1-2 часа вместе с проверкой. На сайте с кривой структурой разделов дольше, потому что сначала приходится чинить структуру, а крошки уже потом. Если структура в порядке, это разовая задача, которая дальше работает сама.
Отдельно предупрежу: если после внедрения крошек в Search Console полезли ошибки на сотнях страниц, не спешите откатывать. Чаще всего это одна опечатка в шаблоне, размноженная на весь сайт, и правится она в одном месте.
Нужна разметка под ваш сайт с проверкой всех типов страниц: напишите через форму на главной, посмотрю текущее состояние и скажу, чинить точечно или переделывать структуру. У клиентов на абонентском обслуживании такие вещи входят в тариф, условия и цены собраны в тарифах. Другие материалы по технической оптимизации лежат в рубрике про SEO.
Частые вопросы
Зачем нужны хлебные крошки
Человеку они показывают, в каком разделе он оказался и как подняться выше. Поисковику дают структуру сайта, а в сниппете заменяют длинный адрес аккуратной цепочкой разделов.
Почему крошки не показываются в выдаче
Чаще всего разметки нет вовсе или в ней ошибки: пропущена позиция, ссылка ведёт не туда, последний элемент оформлен ссылкой на самого себя. Поисковик показывает крошки по своему усмотрению, гарантии нет и при верной разметке.
Какой должна быть цепочка
Отражать реальный путь по сайту, а не путь пользователя. Главная, раздел, подраздел, текущая страница. Текущая страница ссылкой не оформляется.
Как проверить, что разметка работает
Прогнать страницу через валидатор структурированных данных и посмотреть, собирается ли BreadcrumbList и все ли позиции на месте.
