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

Помните сказку про Гензеля и Гретель, которые бросали крошки, чтобы найти дорогу назад? На сайтах работает та же идея. Хлебные крошки — это строчка-навигация вроде «Главная › Каталог › Ноутбуки». Она показывает, где человек находится и как вернуться выше. Мелочь, а пользы много — и людям, и поисковику.

Зачем они нужны

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

Как они должны выглядеть

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

Микроразметка — обязательно

Сами по себе крошки помогают навигации. Но чтобы они появились в поисковой выдаче, их нужно разметить. Для этого есть специальная микроразметка Schema.org — тип BreadcrumbList. Это блок кода, который объясняет поисковику, что вот эта строчка — навигационный путь. Без разметки человек крошки на сайте видит, а в выдаче они не покажутся.

Частые ошибки

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

Три вида хлебных крошек

Выглядят они почти одинаково, а устроены по-разному. От того, какой вид вы выберете, зависит, что человек увидит в строке навигации и как к ней отнесётся поисковик.

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

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

По атрибутам. Живёт в фильтрах интернет-магазинов: путь собирается из выбранных характеристик. Удобно в больших каталогах с фасетной навигацией — про неё отдельно в статье про фасетную навигацию и фильтры.

Как выглядит разметка: живой пример

Чтобы крошки попали в выдачу, рядом с ними ставят блок микроразметки BreadcrumbList — обычно в формате JSON-LD. Пугаться не нужно: внутри просто перечень пунктов по порядку, у каждого название, ссылка и позиция. Вот готовый кусок, по которому видно всю логику:

{
  "@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/" },
    { "@type": "ListItem", "position": 3, "name": "Ноутбуки", "item": "https://site.ru/catalog/noutbuki/" }
  ]
}

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

Как добавить крошки на разных движках

Руками их прописывают редко — почти везде за это отвечает движок или плагин. Коротко по популярным платформам:

• WordPress — крошки сразу с разметкой умеют SEO-плагины Yoast и Rank Math: включаете в настройках и вставляете вывод в шаблон. Многие современные темы выводят их и сами.
• 1С-Битрикс — есть штатный компонент «Навигационная цепочка»; разметку добавляют в его шаблон.
• Tilda и конструкторы — путь собирают блоком или в зоне HTML, а разметку дописывают отдельным кодом.
• Самописный сайт — выводите путь из дерева разделов и тут же отдаёте JSON-LD рядом.

На каком бы движке вы ни работали, после установки проверьте результат: видны ли крошки на странице и понимает ли разметку поисковик. Удобно прогнать страницу через валидатор разметки в Яндекс.Вебмастере.

Реально ли крошки помогают в SEO

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

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