+7(982) 597-7179

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

1 мин. на прочтение

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

Хлебные крошки(breadcrumbs) – навигационная логическая цепочка, указывающая путь от главной страницы к текущей. Название «Хлебные крошки» является иронической отсылкой к немецкой сказке «Гензель и Гретель», в которой дети, когда их завели в лес во второй раз, не смогли найти обратную дорогу, так как на этот раз вместо маленьких камешков они оставляли за собой хлебные крошки, впоследствии склёванные лесными птицами.

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

В этой статье мы рассмотри виды хлебных крошек у популярных сайтов и научимся правильной разметке от shema.org.

Для чего нужны хлебные крошки на сайте

  • Данный элемент сайты выполняет следующие функции:
  • Помогает посетителя понять где он находится (в какой директории сайта)
  • Облегчает переход к верхнему родительскому пункту меню, тем самым выполняя функцию «назад».
  • Создает внутреннюю перелинковку сайта.
  • Оптимизируют внутреннюю структуру сайта.

Виды хлебных крошек на сайтах

Ниже представлены варианты хлебных крошек с различных сайтов.

На данном сайте реализованы хлебные крошки с простым «/» разделением

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

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

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

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

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

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

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

Советы по использованию хлебных крошек

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

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

Нужны ли хлебные крошки в мобильной версии сайта?

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

Убирать ли дублирование заголовка в хлебных крошках?

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

По данным сайта  xandeadx.ru 70% ТОП20 сайтов не используют заголовок в хлебных крошках.  wpschool.ru считает, это дублирование и советует убирать. Этот факт не подтвержден поисковиками, но все равно убирают заголовок «на всякий случай».

Мы предлагаем убирать дублирующие заголовки в интернет магазинах (например, ЯндексМаркет не дублирует контент в хлебных крошках), потому что это смотрится не очень красиво, а так же убирать на тех сайтах, где присутствуют длинные заголовки.

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

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

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

Ниже предоставлен правильный код shema

<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="//prodengiblog.ru">
          <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="//prodengiblog.ru/optimizaciya">
          <span itemprop="name">Оптимизация</span>
          <meta itemprop="position" content="2">
       </a>
   </span>
</div>
 

Хлебные крошки в WordPress

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

Плагины хлебных крошек для WordPress

Если ваш сайт на WordPress, то существуют множество плагинов для хлебных крошек, например:

  • Breadcrumb NavXT
  • Yoast WordPress SEO
  • Breadcrumb Trail
  • Yummi «хлебные крошки»
  • Really Simple Breadcrumb
  • DP RDFa Breadcrumb Generator

Код хлебных крошек для WordPress без плагина

Так же данную функцию можно реализовать без плагина. Это самый простой вариант, который будет работать. Он без микроразметки. Микроразметку вы должны настроить сами по нуждам. Так же мы можем помочь вам с реализацией данной функции за дополнительную плату.

В файл  functions.php вставляете следующий код:

function the_breadcrumb() {
    if (!is_front_page()) {
        echo '<a href="';
        echo get_option('home');
        echo '">Главная';
        echo "</a> » ";
        if (is_category() || is_single()) {
            the_category(' ');
            if (is_single()) {
                echo " » ";
                the_title();
            }
        } elseif (is_page()) {
            echo the_title();
        }
    }
    else {
        echo 'Главная';
    }
}

Второй код и размещаем его в то место, где нужно вывести сами хлебные крошки:

<?php
the_breadcrumb();
?>

Читайте также:

Приглашаем поучавствовать в обсуждении статьи:

Комментариев 0

Войти через: