• 👽 SEO-оптимизация

Что это такое хлебные крошки на сайте

  • 01 июня 2023
  • 10 мин.

Хлебные крошки (анг. «breadcrumbs») — это навигационная цепочка анкорных ссылок, которая обычно располагается между хедером и заголовком h1 страницы. Она необходимо для того, что пользователь всегда мог вернуться на несколько логических уровней сайта выше. А так же для нужд SEO-оптимизации сайта.

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

Важность хк для пользовательского опыта

Тут всё просто 😋.

  1. Улучшение навигации для пользователей. Представьте себя в гигантском торговом центре без указателей или карты. Запутаться легко, правда? Но с хлебными крошками на сайте вы всегда знаете, где вы находитесь и как вернуться на предыдущую страницу. Это делает пребывание на сайте гораздо более комфортным и понятным для пользователя.
  2. Снижение процента отказов. Если пользователи знают, где они и как перемещаться по сайту, они, скорее всего, проведут на нем больше времени, а не уйдут сразу же, не найдя нужной информации. Чем меньше отказов, тем лучше для ваших SEO-показателей и, конечно, для вашего бизнеса.

Важность хк в SEO-оптимизации сайта

Тут уже посложнее 😎.

  1. Улучшение индексации. Навигационная цепочка помогает поисковым роботам лучше понять структуру вашего сайта и его проиндексировать.
  2. Оптимизация анкор-листа и расширение монолитного индекса сайта. Тут всё просто — в анкор хлебной крошки входит тематичное ключевое слово, которое соответствует тематике сайта и запросному индексу.
  3. Качественная перелинковка. Страницы обмениваются весом друг с другом, повышая свою значимость для ПС.
  4. Положительное влияние на внутренние поведенческие метрики сайта. Увеличение времени на сайте, глубина просмотра, взаимодействие с пользователя с сайтом за счёт клика — всё это положительно влияет на ПФ сайта в целом.

Примеры использования и оформление

Существует несколько основных типов хлебных крошек, и они могут быть адаптированы под специфику вашего сайта

  • Линейные – это самый популярный тип хлебных крошек, который вы, скорее всего, не один раз встречали. Они отображают чёткую последовательность страниц от главной до текущей страницы. Например: Главная > Блог > Рубрика > Название статьи.

  • Динамические – они отличаются тем, что изменяются в зависимости от пути, которым посетитель пришел к текущей странице. Это может быть полезно для сложных сайтов с глубокой иерархией и множеством возможных путей. Важно! Ссылки обязательно должны быть в коде и в теге <a href=»»>.
  • С выпадающим списком – в этом случае каждый элемент в навигационной цепочке содержит выпадающий список, позволяющий быстро перейти к смежным страницам. Это удобно на сайтах с большим количеством взаимосвязанных страниц.
  • Кнопка “Назад” – хотя это и не классический вид, но некоторые сайты используют кнопку «Назад» вместо или в дополнение к ним, чтобы пользователь мог легко вернуться на предыдущую страницу.
  • Смешанный тип – это комбинация двух или более типов, которая настраивается в зависимости от конкретных нужд сайта.

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

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

  1. На главной странице их быть не должно. Главная страница — это начало пути пользователя по сайту, поэтому хлебные крошки здесь не нужны.
  2. Лучше размещать в видимом месте. Обычно их помещают в верхней части страницы или непосредственно над заголовком. Помните, они должны быть доступны и видимы для пользователя в любой момент.
  3. Должны быть реализованы в теге <a href=»»>. Хлебные крошки — это ссылки, поэтому они должны быть размещены в соответствующих тегах. Это позволит пользователям легко переходить по страницам и улучшит индексацию сайта.
  4. Добавьте микроразметку. Это поможет поисковым системам лучше понять содержание вашего сайта и может улучшить вид вашего сайта в поисковой выдаче.

Микроразметка для хлебных крошек

Пришло время поговорить о микроразметке. Микроразметка позволяет поисковым машинам лучше понять структуру вашего сайта и предоставляет дополнительную информацию о каждой странице. Существует два основных типа микроразметки для хлебных крошек: 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. Когда не нужны хлебные крошки?

Они могут быть не нужны в следующих случаях:

  • На веб-сайтах с простой структурой, имеющих всего несколько страниц. В этих случаях использование хлебных крошек может быть излишним, поскольку пользователи могут легко ориентироваться без них.
  • На страницах, где навигационная цепочка не добавляет никакой ценности. Например, на главной странице сайта её обычно не используются, поскольку это «начальная точка» для большинства пользовательских взаимодействий.
  • Если веб-сайт предполагает нелинейное путешествие пользователя. В случае когда пользователи в основном перемещаются между различными страницами без конкретного порядка или иерархии, хлебные крошки могут оказаться неэффективными или даже вводящими в заблуждение.

Руководитель Rush Analytics Дмитрий Цытрош
Просмотров
1532
Рейтинг
0,0/5
Оценить
Комментариев
0
Комментировать
Оцените статью Оценка анонимная
Добавить комментарий

Ваш адрес email не будет опубликован

Rush Analytics

Другие наши статьи

На страницу статей

Получите 7 дней бесплатного доступа

Здесь вы можете собрать поисковые подсказки из Яндекс, Google или YouTube

Зарегистрироваться