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

Коротко

Хлебные крошки на сайте — что это? Это строка навигации над заголовком страницы, которая показывает путь от главной до текущей страницы: «Главная → Каталог → Двери → Межкомнатные двери». Каждый элемент, кроме последнего, — ссылка на раздел верхнего уровня. Название пошло из сказки, где дети отмечали дорогу крошками хлеба.

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

Вопрос	Короткий ответ
Где нужны	Каталоги, магазины, сайты с вложенными разделами, блоги с рубриками
Где не нужны	Лендинг, сайт из трёх-пяти страниц без вложенности
Где размещать	Над заголовком H1, под шапкой
Как сделать в WordPress	SEO-плагин, функция WooCommerce или код в теме
Как сделать в 1С-Битрикс	Стандартный компонент навигационной цепочки
Что добавить для SEO	Микроразметку BreadcrumbList

Основная мысль

Хлебные крошки — это не украшение, а отражение структуры сайта: если структура логичная, крошки делаются за час; если крошки получаются странными, проблема в структуре, а не в крошках.

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

Поэтому работа с крошками начинается с вопроса, как устроены разделы сайта. Дальше всё просто: включить вывод, настроить внешний вид и добавить микроразметку. На WordPress и 1С-Битрикс для этого есть штатные инструменты.

Зачем нужны хлебные крошки страниц

Для посетителей

Ориентация. Человек, пришедший из поиска сразу на карточку товара, видит, в каком разделе он находится.
Быстрый переход на уровень выше. Из карточки конкретной двери — в категорию межкомнатных дверей одним кликом, без меню и кнопки «Назад».
Меньше отказов. Если товар не подошёл, посетитель переходит в раздел и смотрит другие, а не закрывает вкладку.
Понятность на мобильных. Меню на телефоне скрыто, а крошки видны сразу.

Для поисковых систем

Структура сайта. Ссылки в крошках связывают страницы с их разделами, и поисковый робот лучше понимает иерархию.
Внутренняя перелинковка. Каждая карточка товара ссылается на свою категорию и раздел. Это распределяет вес на важные страницы каталога.
Сниппет. При наличии микроразметки поисковая система может показать в выдаче путь вместо длинного адреса страницы.

Для владельца сайта

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

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

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

Виды хлебных крошек

Вид	Как выглядит	Где применяют
По иерархии	Главная → Раздел → Подраздел → Страница	Каталоги, корпоративные сайты, блоги
По атрибутам	Главная → Двери → Белые → С остеклением	Фильтры в интернет-магазинах
По истории	Путь, по которому пришёл посетитель	Используются редко, запутывают

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

Хлебные крошки и структура сайта

Цепочка повторяет иерархию, поэтому до вёрстки крошек стоит посмотреть на структуру разделов целиком.

Глубина вложенности

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

Совпадение с адресами страниц

Удобно, когда адрес страницы повторяет цепочку: /catalog/dveri/mezhkomnatnye/ соответствует пути «Каталог → Двери → Межкомнатные». Это не обязательное требование, но так проще поддерживать сайт и понимать, где находится страница. Главное — чтобы ссылки в крошках вели на рабочие канонические адреса разделов, а не на страницы, закрытые от индексации или отдающие редирект.

Примеры цепочек для разных сайтов

Тип сайта	Пример цепочки
Корпоративный сайт	Главная → Услуги → Монтаж вентиляции → Промышленные объекты
Интернет-магазин	Главная → Каталог → Двери → Межкомнатные → Модель
Блог	Главная → Блог → SEO → Статья
Медицинский центр	Главная → Направления → Стоматология → Имплантация

Промежуточные уровни без страниц

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

Хлебные крошки в дизайне

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

Правила оформления

Место. Над заголовком H1, под шапкой. Не в подвале и не сбоку.
Размер. Мельче основного текста, но читаемо — не меньше 12–14 px на телефоне.
Разделитель. Стрелка, косая черта или знак «›». Один и тот же на всём сайте.
Последний элемент. Текущая страница — обычным текстом, без ссылки. Ссылка на саму себя бессмысленна.
Первый элемент. «Главная» или иконка дома. Если иконка — у неё должна быть текстовая подпись для экранных дикторов.
Цвет ссылок. Отличается от обычного текста, но не так ярко, как основные кнопки.

Хлебные крошки веб-интерфейса на мобильных

Длинная цепочка на телефоне не помещается в одну строку. Варианты решения:

Разрешить перенос на вторую строку — самый простой и надёжный способ.
Сделать горизонтальную прокрутку цепочки с видимой текущей страницей.
Сократить длинные названия разделов в крошках.
Показывать на мобильном только ссылку на родительский раздел: «← Межкомнатные двери».

Четвёртый вариант удобен для глубоких каталогов, но микроразметку при этом оставляют полной.

Названия в цепочке

Название в крошках не обязано совпадать с заголовком H1. Заголовок карточки может быть длинным, с характеристиками и артикулом, а в крошках — коротким. Для разделов то же самое: «Межкомнатные двери», а не «Купить межкомнатные двери недорого с доставкой». Переспам в крошках выглядит плохо и в интерфейсе, и в сниппете.

Доступность

Разметку крошек оборачивают в элемент nav с подписью для экранных дикторов, а цепочку оформляют упорядоченным списком. Текущей странице задают атрибут, который сообщает, что это текущая позиция. Это стандартная практика доступной вёрстки, и она не требует усилий, если заложена в шаблон сразу.

Как сделать хлебные крошки в WordPress

Через Rank Math

Rank Math умеет выводить крошки и сам добавляет к ним микроразметку.

В настройках Rank Math откройте общие настройки и раздел хлебных крошек.
Включите крошки и настройте разделитель, текст для главной, отображение рубрик и родительских страниц.
Выведите крошки в шаблоне темы — функцией плагина в PHP-файле шаблона или шорткодом в конструкторе страницы.
Проверьте страницу валидатором микроразметки.

Вставка в шаблон дочерней темы, например в single.php или в файл шапки над заголовком:

<?php if ( function_exists( 'rank_math_the_breadcrumbs' ) ) {
    rank_math_the_breadcrumbs();
} ?>

Шорткод для редактора или виджета — rank_math_breadcrumb в квадратных скобках. Подробнее о базовой SEO-настройке WordPress — в статье «SEO-настройка WordPress».

В WooCommerce

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

Главная категория товара и записи

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

Вручную в теме

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

Как сделать хлебные крошки в 1С-Битрикс

Стандартный компонент

В 1С-Битрикс навигационную цепочку выводит компонент bitrix:breadcrumb. Его подключают в шаблоне сайта, обычно в header.php над заголовком:

<?php $APPLICATION->IncludeComponent(
    "bitrix:breadcrumb",
    "",
    array(
        "START_FROM" => "0",
        "PATH" => "",
        "SITE_ID" => SITE_ID
    )
); ?>

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

Откуда берутся пункты цепочки

Статические разделы — из названий разделов, заданных в файлах .section.php.
Каталог и инфоблоки — компоненты каталога и новостей добавляют в цепочку раздел и элемент, если в их параметрах включено добавление раздела и элемента в навигационную цепочку.
Произвольные пункты — в коде страницы через метод AddChainItem объекта APPLICATION.

Если в цепочке не хватает раздела или появляются лишние пункты, почти всегда причина в параметрах компонента каталога или в названии раздела в .section.php. Как устроены инфоблоки и компоненты, объясняет статья «Инфоблоки и компоненты 1С-Битрикс».

Микроразметка в Битриксе

В стандартном шаблоне компонента микроразметка может отсутствовать или быть устаревшей — это зависит от версии и шаблона. Проверьте страницу валидатором. Если разметки нет, её добавляют в собственный шаблон компонента: либо атрибутами в HTML, либо блоком JSON-LD, который формируется из того же массива пунктов. Общие настройки SEO на этой платформе описаны в статье «SEO-настройка сайта на 1С-Битрикс».

Крошки на служебных страницах

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

Страницы пагинации

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

Страницы фильтров

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

Поиск, корзина, личный кабинет

На странице результатов поиска, в корзине и в личном кабинете достаточно короткой цепочки: «Главная → Поиск» или «Главная → Личный кабинет → Заказы». Микроразметку на закрытых от индексации страницах можно не выводить.

Страница 404

На странице ошибки крошки обычно не нужны. Полезнее показать поиск и ссылки на основные разделы.

Микроразметка BreadcrumbList

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

Пример в формате 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/catalog/mezhkomnatnye-dveri/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Дверь Классика белая"
    }
  ]
}
</script>

Правила

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

Как проверять микроразметку и какие ещё типы полезны сайту, рассказано в статье «Микроразметка Schema.org».

Проверка

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

Сценарии внедрения

Корпоративный сайт на WordPress

Сайт услуг из двух десятков страниц, услуги сгруппированы по направлениям через родительские страницы. Крошки включают в Rank Math, выводят над заголовком в шаблоне страницы, на главной отключают. Родительские страницы направлений наполняют кратким описанием и списком услуг, чтобы ссылки в крошках вели на полезные страницы, а не на пустые заглушки.

Магазин на WooCommerce

Каталог из нескольких сотен товаров, часть товаров в двух категориях. Тема уже выводит крошки WooCommerce, а Rank Math добавлял бы свои. Оставляют один источник, назначают основную категорию для товаров из нескольких разделов, проверяют микроразметку на карточках и в категориях.

Каталог на 1С-Битрикс

Каталог продукции производственной компании на инфоблоках. Цепочка формируется компонентом bitrix:breadcrumb, разделы и элементы в неё добавляет компонент каталога. Шаблон компонента копируют в шаблон сайта, добавляют JSON-LD и адаптивную вёрстку, проверяют страницы всех уровней вложенности.

Типичные ошибки и чек-лист

Ошибки

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

На чём не стоит экономить

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

Чек-лист

Структура разделов логична, у каждого товара и записи есть основная категория.
Крошки выводятся над H1 на всех страницах, кроме главной.
Последний элемент — текст без ссылки.
Разделитель единый, цепочка переносится на телефоне.
Названия в крошках короткие и без переспама.
Ссылки ведут на канонические адреса.
На странице одна цепочка и один блок BreadcrumbList.
Микроразметка проходит валидаторы Яндекса и Google.
Проверены разные типы страниц: разделы, карточки, статьи.

Через пару недель после внедрения полезно посмотреть на карте кликов и в записях визитов, пользуются ли посетители крошками на карточках. Как это сделать, описано в статье «Вебвизор в Яндекс Метрике».

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

Хлебные крошки на сайте — что это простыми словами?

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

Как сделать хлебные крошки на WordPress?

Включить их в SEO-плагине, например в Rank Math, и вывести в шаблоне функцией или шорткодом. В магазине на WooCommerce можно использовать его собственную функцию крошек — но только один источник.

Как сделать хлебные крошки на 1С-Битрикс?

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

Влияют ли хлебные крошки на SEO?

Сами по себе крошки не поднимают позиции, но улучшают внутреннюю перелинковку, помогают роботу понять структуру и вместе с микроразметкой делают сниппет понятнее.

Нужна ли ссылка на текущую страницу в крошках?

Нет. Последний элемент показывают обычным текстом.

Где размещать хлебные крошки в дизайне?

Над заголовком H1, под шапкой сайта. Это место, где их ожидают увидеть посетители.

Нужно ли показывать крошки на мобильной версии?

Да, на телефоне они даже полезнее, потому что меню скрыто. Длинную цепочку переносят на вторую строку или сокращают до ссылки на родительский раздел, сохраняя полную микроразметку.

Нужны ли крошки на лендинге?

Нет. На одностраничном сайте нет иерархии, и цепочка из одного элемента ничего не даёт.

Можно ли сократить название страницы в крошках?

Да. Название в крошках может быть короче заголовка H1 — главное, чтобы оно было понятным и совпадало с названием в микроразметке.

Должны ли крошки совпадать с адресом страницы?

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

Что делать, если товар в нескольких категориях?

Назначить основную категорию. В WordPress это делают в SEO-плагине или теме, в 1С-Битрикс — через основной раздел элемента инфоблока.

Итог

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

На WordPress крошки включают в SEO-плагине или WooCommerce, на 1С-Битрикс — стандартным компонентом навигационной цепочки. В обоих случаях главное — один источник цепочки, основная категория для товаров и проверка микроразметки после любых изменений шаблона.

Я как частный разработчик настраиваю хлебные крошки и микроразметку на WordPress и 1С-Битрикс: от выбора структуры и основной категории до вёрстки под мобильные и проверки в валидаторах. Работаю напрямую, без посредников — подробнее на странице доработки сайтов на WordPress.