Что такое хлебные крошки, и как их внедрить на сайте

Мануалы
Инна Торгашова
3604
26 мая 2020
3Нравится
12Комментарии
Поделиться
Что такое хлебные крошки, и как их внедрить на сайте

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

1. Что такое хлебные крошки

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

Одним из самых популярных и полезных элементов навигации являются хлебные крошки на сайте. Чаще всего их размещают в верхней части / шапке сайта.

Как выглядят хлебные крошки в хедере сайта

Рассмотрим плюсы использования хлебных крошек для пользователя:

  • удобная навигация,
  • демонстрация структуры сайта,
  • возможность перехода между разделами в один-два клика,
  • навигационная цепочка прямо в сниппете.

    Навигационная цепочка в сниппете в выдаче Яндекс

Хлебные крошки рекомендуется внедрять сайтам с уровнем вложенности страниц больше двух.

2. Виды хлебных крошек

Выбор типа отображения навигационной цепочки зависит от уровня вложенности страниц, длины названий разделов и тематики ресурса. Условно хлебные крошки делятся на четыре вида:

  1. Стандартные. На большинстве сайтов можно проследить такой формат: Главная → Раздел → Категория → Товар.

    Пример хлебных крошек стандартного вида

  2. Динамические. Формируются на основании переходов между страницами. Например, если вы перейдёте на страницу товара из Раздела 1, цепочка будет выглядеть так: Главная → Раздел 1 → Товар. Если вы попадёте на страницу с тем же товаром через Раздел 2, хлебные крошки отобразятся так: Главная → Раздел 2 → Товар.

    Пример динамических хлебных крошек

  3. Расширенные. При наведении стрелки на раздел навигационной цепочки выпадает список с вариантами перехода по смежным страницам.

    Пример расширенных хлебных крошек

  4. Сокращённые. При глубокой вложенности страниц навигационную цепочку сокращают до главной, текущей и смежных страниц. Либо оставляют название текущей страницы и кнопку «Назад».

    Пример сокращённых хлебных крошек

  5. Ещё один способ сократить цепочку хлебные крошки — начать их со страницы каталога товаров, а не с главной.

    Хлебные крошки, которые начинаются со страницы каталогов

3. Как хлебные крошки влияют на SEO

В продвижении SEO хлебные крошки играют важную роль:

  • улучшают юзабилити и поведенческие факторы;
  • обеспечивают внутреннюю перелинковку;
  • перенаправляют вес с нижних разделов на верхние;
  • помогают поисковым роботам переходить между страницами;
  • совершенствуют вид сниппета в выдаче при наличии микроразметки.

4. Что нужно знать при создании хлебных крошек

В процессе внедрения навигационной цепочки на сайт важно учесть несколько правил:

  1. Последнее звено цепочки (текущее положение посетителя) делайте некликабельным. В противном случае появится циклическая ссылка, которая может пагубно влиять на продвижение.
  2. На главной странице не должно быть хлебных крошек. Иначе цепочка будет включать одно звено со ссылкой на главную страницу.
  3. Расположите хлебные крошки так, чтобы они были заметны пользователям. По стандарту все привыкли видеть навигационную цепочку под шапкой. Для удобства можно продублировать её в нижней части страницы.
  4. Сочетайте хлебные крошки с микроразметкой. Поисковым системам проще считать размеченную информацию об описываемом объекте. Благодаря микроразметке поисковики узнают, что относится к цене, какая информация описывает объект, и что входит в хлебные крошки.

    Используйте популярный словарь разметки — Schema.org. Его поддерживают все поисковые системы. В WordPress для создания микроразметки хлебных крошек добавьте участок кода в нижнюю часть раздела functions.php. Пример кода:

    <div itemscope="" itemtype="http://schema.org/BreadcrumbList" id="breadcrumbs"> <span itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem"> <a rel="nofollow" itemprop="item" title="Главная" href="//yoursite.com"> <span itemprop="name">Главная</span> <meta itemprop="position" content="1"> </a> </span> <span itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem"> <a itemprop="item" title="Товары" href="//yoursite.com/tovary"> <span itemprop="name">Товары</span> <meta itemprop="position" content="2"> </a> </span> </div>

    В данном случае itemscope указывает на тип объекта, а itemprop описывает раздел, который нужно указать в цепочке хлебных крошек.

Google рекомендует использовать форматы Microdata, RDF и JSON-LD для создания хлебных крошек. Пример кода Microdata с использованием словаря schema.org:

<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 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 itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a itemprop="item" href="/catalog/planshety/"> <span itemprop="name">Планшеты</span></a> <meta itemprop="position" content="3″ /> </li> <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a itemprop="item" href=" /catalog/stolovaya/iPad/"> <span itemprop="name">iPad</span></a> <meta itemprop="position" content="4″ /> </li> </ol>

Читайте также: «Что такое микроразметка сайта, и зачем она нужна».

5. Как создать хлебные крошки на сайте

Быстрый способ создать хлебные крошки — подключить плагин CMS. Для WordPress используйте популярные плагины Breadcrumb NavXT или SEO Yoast. Рассмотрим пример с Breadcrumb. Для отображения навигационной цепочки нужно скачать плагин и добавить код в header.php, если хлебные крошки нужны на каждой странице. Пример кода:

<div class="breadcrumb"> <?php if(function_exists('bcn_display')) { bcn_display(); } ?> </div>

Редактируйте настройки отображения цепочки в соответствующем разделе плагина:

Как настролить хлебные крошки для сайта на WordPress с помощью плагина Breadcrumb

После сохранения настроек хлебные крошки появятся на сайте:

Хлебные крошки на сайте на WordPress

В Joomla подключение хлебных крошек доступно в разделе «Менеджер модулей» панели управления:

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

Настройка навигационной цепочки также возможна и вручуную. Пропишите код и добавьте его в место будущего отображения хлебных крошек в HTML. Если они нужны на всех страницах — добавьте код в раздел header.php либо добавьте в раздел functions.php. Пример:

<a href="http://sait/glavnaia/">Главная</a> — <a function the_breadcrumb() { echo '<div id="breadcrumb"><ul><li><a href="/">Home</a></li><li>></li>'; if ( is_category() || is_single() ) { $cats = get_the_category(); $cat = $cats[0]; echo '<li><a href="'.get_category_link($cat->term_id).'">'.$cat->name.'</a></li><li>></li>'; } if(is_single()){ echo '<li>'; the_title(); echo '</li>'; } if(is_page()){ echo '<li>'; the_title(); echo '</li>'; } echo '</ul><div class="clear"></div></div>'; }

Подводим итоги

Навигационная цепочка на сайте улучшает юзабилити и помогает посетителю сориентироваться в разделах и смежных страницах. Не последнюю роль играют хлебные крошки в SEO: с их помощью формируется привлекательный сниппет, создается перелинковка между страницами и равномерно распределяется вес. Для успешной поисковой оптимизации рекомендуется использовать навигационную цепочку на всех страницах сайта независимо от его тематики.