Хлебные крошки (анг. «breadcrumbs») — это навигационная цепочка анкорных ссылок, которая обычно располагается между хедером и заголовком h1 страницы. Она необходимо для того, что пользователь всегда мог вернуться на несколько логических уровней сайта выше. А так же для нужд SEO-оптимизации сайта.
На скриншоте выше, пользователь находится на странице инструмента Проверка позиций. В хлебных крошках отражена логически верная структура расположения страницы в рамках структуру сайта. А так же пользователь может вернуться на 1 или 2 уровня выше — на разводящую страницу Инструменты или на главную страницу сайта.
Важность хк для пользовательского опыта
Тут всё просто 😋.
- Улучшение навигации для пользователей. Представьте себя в гигантском торговом центре без указателей или карты. Запутаться легко, правда? Но с хлебными крошками на сайте вы всегда знаете, где вы находитесь и как вернуться на предыдущую страницу. Это делает пребывание на сайте гораздо более комфортным и понятным для пользователя.
- Снижение процента отказов. Если пользователи знают, где они и как перемещаться по сайту, они, скорее всего, проведут на нем больше времени, а не уйдут сразу же, не найдя нужной информации. Чем меньше отказов, тем лучше для ваших SEO-показателей и, конечно, для вашего бизнеса.
Важность хк в SEO-оптимизации сайта
Тут уже посложнее 😎.
- Улучшение индексации. Навигационная цепочка помогает поисковым роботам лучше понять структуру вашего сайта и его проиндексировать.
- Оптимизация анкор-листа и расширение монолитного индекса сайта. Тут всё просто — в анкор хлебной крошки входит тематичное ключевое слово, которое соответствует тематике сайта и запросному индексу.
- Качественная перелинковка. Страницы обмениваются весом друг с другом, повышая свою значимость для ПС.
- Положительное влияние на внутренние поведенческие метрики сайта. Увеличение времени на сайте, глубина просмотра, взаимодействие с пользователя с сайтом за счёт клика — всё это положительно влияет на ПФ сайта в целом.
Примеры использования и оформление
Существует несколько основных типов хлебных крошек, и они могут быть адаптированы под специфику вашего сайта
- Линейные – это самый популярный тип хлебных крошек, который вы, скорее всего, не один раз встречали. Они отображают чёткую последовательность страниц от главной до текущей страницы. Например: Главная > Блог > Рубрика > Название статьи.
- Динамические – они отличаются тем, что изменяются в зависимости от пути, которым посетитель пришел к текущей странице. Это может быть полезно для сложных сайтов с глубокой иерархией и множеством возможных путей. Важно! Ссылки обязательно должны быть в коде и в теге <a href=»»>.
- С выпадающим списком – в этом случае каждый элемент в навигационной цепочке содержит выпадающий список, позволяющий быстро перейти к смежным страницам. Это удобно на сайтах с большим количеством взаимосвязанных страниц.
- Кнопка “Назад” – хотя это и не классический вид, но некоторые сайты используют кнопку «Назад» вместо или в дополнение к ним, чтобы пользователь мог легко вернуться на предыдущую страницу.
- Смешанный тип – это комбинация двух или более типов, которая настраивается в зависимости от конкретных нужд сайта.
Как сделать правильные хлебные крошки
Теперь, когда мы знаем, какие бывают хлебные крошки и как они могут быть полезны, давайте поговорим о том, как их правильно создать. Потому что даже самая маленькая деталь может иметь большое значение, особенно когда дело доходит до пользовательского опыта и SEO.
- На главной странице их быть не должно. Главная страница — это начало пути пользователя по сайту, поэтому хлебные крошки здесь не нужны.
- Лучше размещать в видимом месте. Обычно их помещают в верхней части страницы или непосредственно над заголовком. Помните, они должны быть доступны и видимы для пользователя в любой момент.
- Должны быть реализованы в теге <a href=»»>. Хлебные крошки — это ссылки, поэтому они должны быть размещены в соответствующих тегах. Это позволит пользователям легко переходить по страницам и улучшит индексацию сайта.
- Добавьте микроразметку. Это поможет поисковым системам лучше понять содержание вашего сайта и может улучшить вид вашего сайта в поисковой выдаче.
Микроразметка для хлебных крошек
Пришло время поговорить о микроразметке. Микроразметка позволяет поисковым машинам лучше понять структуру вашего сайта и предоставляет дополнительную информацию о каждой странице. Существует два основных типа микроразметки для хлебных крошек: 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. Когда не нужны хлебные крошки?
Они могут быть не нужны в следующих случаях:
- На веб-сайтах с простой структурой, имеющих всего несколько страниц. В этих случаях использование хлебных крошек может быть излишним, поскольку пользователи могут легко ориентироваться без них.
- На страницах, где навигационная цепочка не добавляет никакой ценности. Например, на главной странице сайта её обычно не используются, поскольку это «начальная точка» для большинства пользовательских взаимодействий.
- Если веб-сайт предполагает нелинейное путешествие пользователя. В случае когда пользователи в основном перемещаются между различными страницами без конкретного порядка или иерархии, хлебные крошки могут оказаться неэффективными или даже вводящими в заблуждение.
