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

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

  • 01 June 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 Дмитрий Цытрош
Просмотров
2482
Рейтинг
5,0/5
Оценить
Комментариев
0
Комментировать
Оцените статью Оценка анонимная
Добавить комментарий

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

Rush Analytics

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

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

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

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

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