Содержание
- Что такое хлебные крошки
- Зачем нужны хлебные крошки: юзабилити и SEO
- Каким сайтам нужны хлебные крошки
- Виды хлебных крошек
- Как добавить разметку с хлебными крошками на сайт
- Как проверить правильность настройки
- Автоматизация: плагины для разных CMS
- Бонус: фишка для повышения CTR в выдаче
- Подводим итоги
Краткое саммари
Хлебные крошки помогают пользователю понять, где он находится на сайте, а поисковым системам точнее считать структуру разделов. В статье разбираем, когда они нужны, как выбрать тип навигационной цепочки, как внедрить Schema.org BreadcrumbList и чем проверить разметку.
Кому стоит прочитать эту статью:
- SEO-специалистам, которые настраивают сниппеты, внутреннюю перелинковку и структуру сайта;
- владельцам интернет-магазинов, каталогов, блогов и медиа с несколькими уровнями вложенности;
- разработчикам и вебмастерам, которым нужно добавить хлебные крошки в WordPress, 1С‑Битрикс, Joomla, OpenCart или самописный сайт.
В детской сказке «Гензель и Гретель» по пути в лес брат и сестра крошили хлеб, чтобы по крошкам найти дорогу домой. Отсюда свое название получили «хлебные крошки» на сайте — они помогают пользователям ориентироваться в иерархии страниц. В сказке крошки склевали птицы, зато на сайте путь от главной до искомой страницы будет надежным.
Разберемся, каким сайтам нужна такая разметка и как ее настроить правильно.
Что такое хлебные крошки на сайте и как они выглядят
Хлебные крошки в SEO (Breadcrumbs) — это навигационная цепочка, показывающая место страницы в иерархии сайта. Она нужна, чтобы пользователь мог быстро перейти на главную, в предыдущий раздел или в корневой каталог. Как они выглядят на странице:
Правильно размеченные хлебные крошки могут попасть в сниппет сайта в выдаче Яндекса и Google. На сниппете вместо обычной ссылки отобразится навигационная цепочка:
Отображаемая цепочка в сниппете может меняться в зависимости от запроса и решения поисковой системы. Но с корректной разметкой BreadcrumbList поисковику проще определить категорию страницы и показать пользователю понятный путь. У Google актуальная документация по хлебным крошкам находится в разделе Breadcrumb structured data.
FAQ по разделу
Нужно ли показывать крошки на главной?
Нет, потому что на главной странице нет родительского раздела.
Влияют ли хлебные крошки на сниппет?
Они могут повлиять на отображение пути в выдаче, но поисковая система не обязана показывать их всегда.
Зачем нужны хлебные крошки: юзабилити и SEO
В 1995 году Якоб Нильсен определил 10 ключевых принципов удобства использования сайтов. Первый из них — «Видимость статуса системы» — подчеркивает важность понимания пользователем происходящего на сайте. Пользователь всегда должен знать, где он находится. Хлебные крошки как раз и служат этой цели.
Такая навигационная цепочка полезна для любых сайтов со сложной структурой: информационных порталов, интернет-магазинов, сайтов компаний и сервисов. Везде, где есть разделы и подразделы, хлебные крошки улучшают навигацию.
С точки зрения удобства использования, хлебные крошки выполняют три важные функции:
Показывают текущее местоположение пользователя на сайте.
Наглядно представляют структуру сайта.
Позволяют быстро вернуться в родительский раздел, не используя кнопку «Назад» в браузере.
Кроме улучшения навигации, хлебные крошки полезны для SEO:
Органично перелинковывают страницы. Ссылки в хлебных крошках участвуют во внутренней перелинковке, так что помогают выстроить поток ссылочного веса по сайту.
Улучшают поведенческие факторы (время на сайте и глубину просмотра). Хлебные крошки делают страницы удобнее для пользователей, с ними проще ориентироваться в разделах и переходить к общим категориям.
Помогают поисковым системам точнее понимать структуру сайта. В Google корректная разметка BreadcrumbList может участвовать в расширенном результате, а в Яндексе понятная навигация помогает сформировать аккуратную цепочку в сниппете.
FAQ по разделу
Хлебные крошки повышают позиции?
Сами по себе они не гарантируют рост, но улучшают навигацию, перелинковку и понимание структуры сайта.
Помогают ли крошки CTR?
Да, если поисковик показывает понятный путь в сниппете и пользователь быстрее понимает, куда ведет страница.
Каким сайтам нужны хлебные крошки
В хлебных крошках нет нужды, если сайт имеет простую линейную структуру без уровней вложенности. Тогда в крошках будет нечего отображать — там будет только главная и искомая страница.
Если у сайта больше двух уровней вложенности, то хлебные крошки могут помочь в навигации на сайте. Крошки точно нужны, чтобы ориентироваться в каталогах интернет-магазинов, разделах порталов, форумов, блогов с разными рубриками.
Виды хлебных крошек
В SEO и интерфейсах используют несколько видов хлебных крошек. Выбор зависит от структуры сайта. Каталог, блог, маркетплейс, справочник или сервис с личным кабинетом требуют разных сценариев навигации.
Динамические
Динамические хлебные крошки формируются автоматически по структуре сайта, правилам CMS или пути пользователя. Для WordPress их настраивают через Breadcrumb NavXT, Yoast SEO, Rank Math SEO или похожие плагины.
Цепочка навигации представляет собой линейный маршрут от главной страницы до текущего местоположения пользователя. Например:
Главная > Категория > Подкатегория > Текущая страница
Чтобы перейти на более высокий уровень структуры, нужно просто кликнуть по названию нужной страницы.
Если цепочка получается слишком длинной, ее можно сократить: удалить очевидные подразделы или начать отсчет не с главной страницы, а с каталога или категории.
С выпадающим списком
Хлебные крошки с выпадающим списком используют на сайтах с большим количеством категорий. Пользователь может самостоятельно выбирать необходимый уровень вложенности, сворачивая и разворачивая разделы и подразделы.
Обычно это выглядит так:
Иногда элементы навигационной цепочки дополняются выпадающими списками, чтобы пользователь мог быстро выбрать нужный раздел.
Обратные
Обратные хлебные крошки показывают пройденный пользователем путь до текущей страницы. Навигационная цепочка строится от текущей страницы вверх по иерархии. Например:
Название товара > Подкатегория товаров > Категория товаров > Главная
В некоторых случаях обратные хлебные крошки сделаны в виде кнопки «Назад». Она сохраняет историю посещений с учетом всех фильтров и позволяет вернуться на предыдущую страницу.
Атрибутивные
Атрибутивные хлебные крошки используются в интернет-магазинах и онлайн-каталогах. Содержание и путь страницы формируются на основе выбранных пользователем свойств и фильтров.
Добавляя и удаляя свойства, пользователь создает уникальный путь к странице с товарами. Это улучшает удобство использования:
пользователь настраивает выдачу товаров с помощью фильтров;
просматривает подробную информацию о товаре в его карточке;
возвращается к каталогу с сохраненными фильтрами.
FAQ по разделу
Какой тип самый универсальный?
Иерархические крошки от главной к разделу и текущей странице подходят большинству сайтов.
Когда нужны атрибутивные крошки?
В каталогах, где пользователь часто фильтрует товары по бренду, размеру, цене или другим свойствам.
Стоит ли делать кнопку «Назад» вместо крошек?
Можно, но она не заменяет понятную структуру сайта и разметку BreadcrumbList.
Как добавить разметку хлебных крошек Schema.org BreadcrumbList на сайт
Для настройки используют разметку Breadcrumbs. Благодаря разметке поисковикам проще считывать информацию о странице.
Советы для создания правильных хлебных крошек
На главной крошки не нужны.
Главная страница — стартовая, в цепочке навигации на главной просто нечего отображать.
Ссылка на страницу, где находится пользователь, не нужна.
Если в крошках будет кликабельная ссылка на текущую страницу, образуется циклическая ссылка. Страница будет ссылаться сама на себя, это бессмысленно и может ухудшить ранжирование сайта.
Есть два варианта оформления хлебных крошек, чтобы избежать циклической ссылки. Название текущей страницы делают некликабельным, как на сайте apteka.ru:
Второй вариант — текущую страницу убирают из цепочки. В этом примере с lamoda.ru крошки заканчиваются на разделе «Декор настольный», это предыдущая страница для товара Philippi.
Привычное место для хлебных крошек — верхняя часть страницы.
Так сложилось, что навигационную цепочку размещают под меню над информацией о товаре или над заголовком материала. В этом случае оригинальность не нужна, сделайте так, как пользователям привычно и удобно.
Замените первую ссылку на ключ или бренд.
Специалист по оптимизации Сергей Кокшаров (Devaka) советует использовать потенциал первой ссылки в хлебных крошках: вместо слова «Главная» писать основное ключевое слово сайта или название бренда, если один короткий ключ подобрать не получается.
Вместо крошек вида «Главная > Продукция > Пиломатериалы > Брус» сделать «Строительные материалы > Продукция > Пиломатериалы > Брус».
Как настроить разметку BreadcrumbList на сайте
Яндекс и Google формируют хлебные крошки в выдаче по своим алгоритмам. Разметка BreadcrumbList не гарантирует нужный вид сниппета, но снижает риск ошибок, потому что поисковик получает явный список страниц, их названия и порядок.
Еще по теме:
Как внедрить микроразметку информации Schema.Org на сайт
Разметка «BreadcrumbList» — разновидность «ItemList». Она предполагает использование форматов Microdata и RDFa. Сейчас для SEO выбирают JSON‑LD: его проще добавить в шаблон, он не ломает верстку и поддерживается Google. Но Microdata и RDFa тоже допустимы, если они уже используются в проекте.
Пример разметки «BreadcrumbList» через Microdata:
<ol itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
<a itemprop="item" href="/">
<span itemprop="name">Главная</span></a>
<meta itemprop="position" content="1″ />
</li>
</li><li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
<a itemprop="item" href="/catalog/">
<span itemprop="name">Каталог</span></a>
<meta itemprop="position" content="2″ />
</li>
</li><li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
<a itemprop="item" href="/catalog/woman/">
<span itemprop="name">Женская одежда</span></a>
<meta itemprop="position" content="3″ />
</li>
</li>
<a itemprop="item" href=" /catalog/woman/dress/">
<span itemprop="name">Платья</span></a>
<meta itemprop="position" content="4″ />
</li>
</ol>Пример той же цепочки в JSON‑LD:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Главная",
"item": "https://example.com/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Каталог",
"item": "https://example.com/catalog/"
},
{
"@type": "ListItem",
"position": 3,
"name": "Женская одежда",
"item": "https://example.com/catalog/woman/"
}
]
}
</script>Типичная ошибка разметки хлебных крошек
Пользователи часто сталкиваются с ошибкой «Отсутствует поле "id"». Ошибка обычно связана с тем, что пользователи указывают в разметке последним пунктом текущую страницу, которая, логично, не имеет ссылки, чтобы не ссылаться сама на себя. Но все item — это ссылки, так что последний пункт тоже должен быть ссылкой, иначе появляется ошибка.
Что делать: если это активная текущая страница, то для нее не нужна ссылка, ее вообще не нужно вставлять в разметку. Последний пункт хлебных крошек должен вести на предыдущий раздел каталога.
FAQ по разделу
Что выбрать, JSON‑LD или Microdata?
Лучше использовать JSON‑LD. Microdata оставляйте, если проект уже на нем работает без ошибок.
Нужно ли размечать каждую страницу?
Нет, размечайте только страницы с вложенностью: категории, карточки товаров, статьи в рубриках, разделы справочников.
Можно ли ставить ключи в крошки?
Можно, если они естественно называют раздел. Но не превращайте цепочку в набор поисковых фраз.
Как проверить разметку хлебных крошек
Проверить внедрение микроразметки можно в нескольких инструментах: валидаторе микроразметки Яндекса, Google Rich Results Test и Schema Markup Validator.
В Google Search Console есть отчет по хлебным крошкам в разделе улучшений. Он показывает ошибки и предупреждения по BreadcrumbList: пропущенные поля, неверный порядок элементов, проблемы с URL. Отчет появляется не сразу после внедрения, а после обхода страниц роботом Google.
Плагины хлебных крошек для разных CMS
Добавить навигационную цепочку и разметку BreadcrumbList можно вручную в шаблоне или через плагин CMS. Перед установкой проверьте дату обновления модуля, совместимость с вашей версией движка и наличие поддержки Schema.org.
Wordpress
Для WordPress популярны Breadcrumb NavXT, Yoast SEO, Rank Math SEO, SEOPress и All in One SEO. Если на сайте уже стоит SEO-плагин, сначала проверьте его настройки. Часто хлебные крошки и Schema.org BreadcrumbList уже включены в функциональность, и отдельный модуль не нужен.
Код разметки хлебных крошек нужно поместить в файлы:
показать крошки везде — в файл header.php;
для всех записей — в файл single.php;
для статистических страниц — в файл page.php;
для всех рубрик — в файл category.php.
В меню плагинов можно настроить ссылки, задать значок разделителя для ссылок.
Joomla
В Joomla хлебные крошки можно вывести штатным модулем Breadcrumbs («Навигатор сайта»). В Joomla 4/5 он настраивается через System → Manage → Site Modules: создайте или откройте модуль Breadcrumbs, задайте позицию шаблона и условия показа.
Настройте модуль под свой сайт и укажите:
позицию модуля, в которой он будет выводиться на странице (отображение позиций включается так: Расширения — Менеджер шаблонов — Настройки — опция Просмотр позиций модулей — Включено);
название главной страницы;
разделитель текста для элементов навигации (обычно «/»).
На главной странице хлебные крошки отображать не нужно, поэтому на вкладке «Привязка к пунктам меню» выберите опцию «На всех страницах, кроме» и отметьте пункт с домашней страницей.
Opencart
Хлебные крошки для OpenCart устанавливают через модуль или дорабатывают в шаблоне. Перед покупкой проверьте поддержку вашей версии PHP, темы и OpenCart. Для OpenCart 4 лучше искать расширение в актуальном маркетплейсе или поручить правку разработчику, потому что старые OCMOD-модули могут не подойти.
Webasyst
К этому движку для интернет-магазинов есть два платных плагина — «Навигация в хлебных крошках» и «Динамические хлебные крошки» с простыми настройками.
1С Битрикс
В 1С‑Битрикс хлебные крошки выводят штатным компонентом bitrix:breadcrumb или через SEO-решения. Есть и отдельные компоненты, например «Умные хлебные крошки». Их используют в каталогах и многоуровневых разделах, связанных с инфоблоками.
Moguta
Для этого движка есть бесплатный плагин Хлебные крошки. Для установки в Панели управления сайтом зайдите в раздел Маркетплейс, там найдите бесплатный плагин и запустите установку.
После установки проверьте видимые крошки на страницах разных типов и валидность разметки в Яндексе, Google Rich Results Test или Schema Markup Validator. Особенное внимание уделите карточкам товаров, пагинации, фильтрам и страницам с несколькими родительскими категориями.
FAQ по разделу
Что лучше, плагин или ручная доработка?
Для типовой CMS быстрее плагин, а для сложного каталога надежнее доработка шаблона.
Можно ли включить крошки прямо в SEO-плагине?
Да, например, в WordPress это уже есть в Yoast SEO, Rank Math и других SEO-плагинах.
Что проверить после установки?
Порядок элементов, отсутствие циклической ссылки, валидность BreadcrumbList и отображение на мобильных устройствах.
Бонус: фишка для повышения CTR в выдаче с помощью хлебных крошек
Один из способов выделить сниппет — добавить эмодзи. Сниппет с яркими элементами может с большей вероятностью привлечь внимание пользователей. На отношение поисковых систем к сайту они не влияют.
Читатель блога PR-CY и оптимизатор Витя Смертный поделился своим опытом работы с сайтом: чтобы сделать сниппет в выдаче заметнее, он добавил пару тематических эмодзи в описание и хлебные крошки.
После добавления эмодзи сниппет показал рост кликабельности. Он стал заметнее на белом фоне выдачи.
Некоторые эмодзи могут неправильно отображаться в выдаче, но увидеть это можно только по факту. Тогда нужно просто подобрать другой элемент.
Витя заметил, что в Google бывают внезапные смены отображения: красивый значок может начать отображаться как монохромный символ, а потом вернуться к первоначальному виду. Такое периодически случается, нужно быть готовым к этой погрешности.
Эмодзи и смайлы можно брать из каталогов, к примеру, этого. Если в поле для копирования символ не отображается, лучше выбрать другой: велика вероятность, что он не отобразится и в сниппете.
На своем опыте оптимизатор заметил, что в некоторых тематиках красный цвет работает лучше. Это справедливо для автомобильного сегмента: если в хлебные крошки поставить зеленую машину, то CTR вырастет, но незначительно, а если красную, то вырастет намного больше.
Некоторые красные эмодзи напротив вредят кликабельности. Возможно, это связано с тем, что красный часто используют для обозначения ошибок и опасности.
С эмодзи важно не переборщить, такой сниппет выглядит пестрым и перегруженным:
Советуем подбирать эмодзи по ассоциациям под вашу тематику, чтобы пользователь сразу распознавал, в какой сфере работает сайт. И важно тестировать значки разного вида и цвета, чтобы найти те, которые будут привлекать.
Подводим итоги
Хлебные крошки — это отличный инструмент навигации, который делает сайт удобнее и улучшает его SEO. Они помогают посетителям легко находить нужный путь на сайте и быстро переходить в нужные разделы, что позитивно сказывается на поведении пользователей и, в конечном счете, на конверсии.
Но неправильная реализация хлебных крошек может привести и к обратному эффекту. Ошибки чаще всего возникают при использовании конструкторов сайтов или CMS с открытым исходным кодом, если не уделить должного внимания контролю результата.
Рекомендуем размещать крошки на страницы и в сниппет с помощью разметки, так ссылка в выдаче будет смотреться нагляднее.
