Хлебные крошки (анг. “breadcrumbs”) – это навигационная цепочка анкорных ссылок, которая обычно располагается между хедером и заголовком h1 страницы. Она необходимо для того, что пользователь всегда мог вернуться на несколько логических уровней сайта выше. А так же для нужд SEO-оптимизации сайта.
На скриншоте выше, пользователь находится на странице инструмента Проверка позиций. В хлебных крошках отражена логически верная структура расположения страницы в рамках структуру сайта. А так же пользователь может вернуться на 1 или 2 уровня выше – на разводящую страницу Инструменты или на главную страницу сайта.
Важность хк для пользовательского опыта
Тут всё просто 😋.
- Улучшение навигации для пользователей. Представьте себя в гигантском торговом центре без указателей или карты. Запутаться легко, правда? Но с хлебными крошками на сайте вы всегда знаете, где вы находитесь и как вернуться на предыдущую страницу. Это делает пребывание на сайте гораздо более комфортным и понятным для пользователя.
- Снижение процента отказов. Если пользователи знают, где они и как перемещаться по сайту, они, скорее всего, проведут на нем больше времени, а не уйдут сразу же, не найдя нужной информации. Чем меньше отказов, тем лучше для ваших SEO-показателей и, конечно, для вашего бизнеса.
Важность хк в SEO-оптимизации сайта
Тут уже посложнее 😎.
- Улучшение индексации. Навигационная цепочка помогает поисковым роботам лучше понять структуру вашего сайта и его проиндексировать.
- Оптимизация анкор-листа и расширение монолитного индекса сайта. Тут всё просто – в анкор хлебной крошки входит тематичное ключевое слово, которое соответствует тематике сайта и запросному индексу.
- Качественная перелинковка. Страницы обмениваются весом друг с другом, повышая свою значимость для ПС.
- Положительное влияние на внутренние поведенческие метрики сайта. Увеличение времени на сайте, глубина просмотра, взаимодействие с пользователя с сайтом за счёт клика – всё это положительно влияет на ПФ сайта в целом.
Примеры использования и оформление
Существует несколько основных типов хлебных крошек, и они могут быть адаптированы под специфику вашего сайта
- Линейные – это самый популярный тип хлебных крошек, который вы, скорее всего, не один раз встречали. Они отображают чёткую последовательность страниц от главной до текущей страницы. Например: Главная > Блог > Рубрика > Название статьи.
- Динамические – они отличаются тем, что изменяются в зависимости от пути, которым посетитель пришел к текущей странице. Это может быть полезно для сложных сайтов с глубокой иерархией и множеством возможных путей. Важно! Ссылки обязательно должны быть в коде и в теге <a href=””>.
- С выпадающим списком – в этом случае каждый элемент в навигационной цепочке содержит выпадающий список, позволяющий быстро перейти к смежным страницам. Это удобно на сайтах с большим количеством взаимосвязанных страниц.
- Кнопка “Назад” – хотя это и не классический вид, но некоторые сайты используют кнопку “Назад” вместо или в дополнение к ним, чтобы пользователь мог легко вернуться на предыдущую страницу.
- Смешанный тип – это комбинация двух или более типов, которая настраивается в зависимости от конкретных нужд сайта.
конверсии вашего сайта
в Яндекс-Директ
Уже скачали 1348 раз
Как сделать правильные хлебные крошки
Теперь, когда мы знаем, какие бывают хлебные крошки и как они могут быть полезны, давайте поговорим о том, как их правильно создать. Потому что даже самая маленькая деталь может иметь большое значение, особенно когда дело доходит до пользовательского опыта и SEO.
- На главной странице их быть не должно. Главная страница – это начало пути пользователя по сайту, поэтому хлебные крошки здесь не нужны.
- Лучше размещать в видимом месте. Обычно их помещают в верхней части страницы или непосредственно над заголовком. Помните, они должны быть доступны и видимы для пользователя в любой момент.
- Должны быть реализованы в теге <a href=””>. Хлебные крошки – это ссылки, поэтому они должны быть размещены в соответствующих тегах. Это позволит пользователям легко переходить по страницам и улучшит индексацию сайта.
- Добавьте микроразметку. Это поможет поисковым системам лучше понять содержание вашего сайта и может улучшить вид вашего сайта в поисковой выдаче. Вовремя отследить изменения мета тегов на сайте можно с помощью Метасканера: это инструмент от Rush, который на ежедневной основе мониторит нежелательные модификации на сайте и помогает сохранить позицию сайта в Яндекс и Google.
Микроразметка для хлебных крошек
Пришло время поговорить о микроразметке. Микроразметка позволяет поисковым машинам лучше понять структуру вашего сайта и предоставляет дополнительную информацию о каждой странице. Существует два основных типа микроразметки для хлебных крошек: JSON-LD и Microdata.
JSON-LD
JSON-LD – это формат разметки данных, который включается в <head> тег вашего сайта. Вот пример того, как может выглядеть код для хлебных крошек:
<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/category/”
},{
“@type”: “ListItem”,
“position”: 3,
“name”: “Страница”,
“item”: “https://example.com/category/page/”
}]
}
</script>
Microdata
Микроразметка представляет собой стандарт HTML-5 и встраивается прямо в HTML-код вашей страницы. Вот пример микроразметки хлебных крошек с использованием микродаты:
<ol itemscope itemtype=”https://schema.org/BreadcrumbList”>
<li itemprop=”itemListElement” itemscope
itemtype=”https://schema.org/ListItem”>
<a itemprop=”item” href=”https://example.com/”>
<span itemprop=”name”>Главная</span></a>
<meta itemprop=”position” content=”1″ />
</li>
<li itemprop=”itemListElement” itemscope
itemtype=”https://schema.org/ListItem”>
<a itemprop=”item” href=”https://example.com/category/”>
<span itemprop=”name”>Категория</span></a>
<meta itemprop=”position” content=”2″ />
</li>
<li itemprop=”itemListElement” itemscope
itemtype=”https://schema.org/ListItem”>
<a itemprop=”item” href=”https://example.com/category/page/”>
<span itemprop=”name”>Страница</span></a>
<meta itemprop=”position” content=”3″ />
</li>
</ol>
Выбор между JSON-LD и микродатой во многом зависит от ваших личных предпочтений и конкретной ситуации. Важно помнить, что независимо от того, какой метод вы выберете, правильная микроразметка может улучшить SEO вашего сайта и сделать его более понятным для пользователей.
Как настроить хлебные крошки на своем сайте
Есть 3 пути:
- найти подходящий шаблон на WordPress с автоматически настраиваемыми ХК,
- использовать плагины
- или кодировать вручную.
Если вы не программист и имеете только теоретические представления о том, как работает сайт изнутри, то мы рекомендуем не лезть напрямую в код сайта самостоятельно, а выбрать подходящий для вашей административной системы плагин или шаблон сайта.
Рассмотрим настройку с помощью плагинов: YoastSEO и Rank Math.
YoastSEO
Rank Math
И хлебные крошки настроены!
Частые ошибки при работе с навигационной цепочкой
Ну что ж, мы все ошибаемся, верно? Это касается и работы с хлебными крошками на сайте. Но, знаете, что прекрасно в ошибках? На них можно прекрасно учиться. Давайте рассмотрим некоторые частые ошибки, которые люди делают при работе с хлебными крошками, и узнаем как их избежать.
- Ошибка №1: Не использовать данный функционал на сайте. Это может звучать странно, но не редко многие владельцы сайтов пренебрегают данным функционалом в угоду дизайну или каким-либо другим причинно-следственным связям, которые могут появится в их голове. Данный функционал не нужен, разве что, на одностраничных сайтах. На всех других сайтах он жизненно необходим.
- Ошибка №2: Ошибки в микроразметке навигационной цепочки. Чтобы поисковые системы правильно воспринимали размеченные данные, они не должны быть размечены с ошибками валидации или не соответствовать типу микроразметки. Как проверить: используйте следующие сервисы валидации: https://validator.schema.org/ или https://search.google.com/test/rich-results, а так же не забывайте про наличия функционала на панелях вебмастеров Яндекс и Google.
- Ошибка №3: Слишком сложная логика цепочки. Логика перемещения в данном функционале должна быть простой и понятной. И отражать иерархичное положение страницы на сайте. Если у вас слишком много уровней или сложных переходов, это может запутать пользователей.
- Ошибка №4: Неудобночитаемые или незаметные хлебные крошки. Они должны быть легко заметными и доступными. Если они сливаются с фоном или выглядят слишком маленькими в рамках типографики сайта, их трудно заметить и использовать.
- Ошибка №5: Наличие активной ссылки на текущую страницу. Циклическая ссылка – это активная ссылка, ведущая на ту же страницу где она размещена. Данный тип ссылки крадёт краулинговый бюджет сайта и отрицательно влияет на индексацию страниц в целом.
- Ошибка №6: Использование js-скрипта в навигационной цепочке на сайте. Если хк используются на сайте в теге <a href=””>, то всё хорошо. Но если они подгружаются динамически с помощью js-скрипта, то пользы от них для SEO-оптимизации никакой, так как поисковые системы их просто не видят и не индексируют.
Заключение
Помните, хлебные крошки – выполняют крайне важную роль в организации вашего сайта, облегчают жизнь пользователям и помогают в продвижении сайта. Они снижают процент отказов, улучшают навигацию на сайте и помогают поисковым системам лучше понимать структуру вашего сайта. Т.е. делают ваш сайт удобным для людей и более понятным для алгоритмов поисковых систем. Это всегда хорошая комбинация!
FAQ
- Вопрос №1. Почему хлебные крошки так называются?
Данный термин в контексте веб-дизайна происходит от сказки братьев Гримм “Хензель и Гретель”. В этой сказке, дети, чтобы найти дорогу домой из леса, оставляли след из крошек хлеба. В контексте веб-сайтов “хлебные крошки” показывают путь пользователя от главной страницы (дома) к текущему местоположению на сайте.
- Вопрос №2. Где должны быть хлебные крошки?
Данный элемент навигации обычно располагается в верхней части страницы и представляет собой горизонтальный список ссылок, показывающих иерархию текущего местоположения пользователя в пределах сайта. Это может быть особенно полезно на больших сайтах с большим количеством подстраниц или для сайтов с множеством уровней иерархии.
- Вопрос №3. Когда не нужны хлебные крошки?
Они могут быть не нужны в следующих случаях:
- На веб-сайтах с простой структурой, имеющих всего несколько страниц. В этих случаях использование хлебных крошек может быть излишним, поскольку пользователи могут легко ориентироваться без них.
- На страницах, где навигационная цепочка не добавляет никакой ценности. Например, на главной странице сайта её обычно не используются, поскольку это “начальная точка” для большинства пользовательских взаимодействий.
- Если веб-сайт предполагает нелинейное путешествие пользователя. В случае когда пользователи в основном перемещаются между различными страницами без конкретного порядка или иерархии, хлебные крошки могут оказаться неэффективными или даже вводящими в заблуждение.
