Юлия Торчинская
Дек 02, 2019 | Время чтения: 13 мин

Хлебные крошки — один из видов навигации сайта. Название вдохновила сказка братьев Гримм, в которой дети разбрасывали хлебные крошки в лесу, чтобы найти дорогу обратно домой. Так и на сайте — посетитель может всегда понять, где он находится и при необходимости вернуться в предыдущий раздел, если у вас правильно настроены хлебные крошки. 

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

Что такое хлебные крошки и какая у них структура 

Хлебные крошки — дословный перевод английского термина breadcrumbs. Такое название прижилось для навигационной цепочки, размещенной в верхней части страницы сайта. 

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

Обычно на этой цепочке отображается путь от главной страницы до той, на которой сейчас находится пользователь. Стандартно, выглядит это так: Главная страница — Раздел — Подраздел — Страница

Но встречаются и другие варианты.

Динамические хлебные крошки. Это когда навигационная цепочка отображает вложенность страниц в зависимости от пути пользователя, а не от иерархии страниц. Например, на вашем сайте есть разделы с товарами «Подарки для парня» и «Подарки для друга». Носки могут одновременно находиться в двух разделах, поэтому навигационная цепочка для страницы с этим товаром может выглядеть по-разному — в зависимости от того, как на нее попал пользователь.

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

динамическая навигация на сайте

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

хлебные крошки с выпадающим списком

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

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

Еще можно столкнуться с примерами, когда навигационная цепочка начинается не с главной страницы сайта, а с каталога. 

крошки с каталога

Если вы сейчас задумались над тем, а надо ли хлебные крошки на вашем сайте, прочитайте следующий раздел. Спойлер: хлебные крошки нужны не только большим интернет-магазинам.

Каким сайтам нужны хлебные крошки

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

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

3 причины полюбить хлебные крошки

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

1. Улучшение юзабилити  

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

Рассмотрим пример. Вы ищите хлебопечку, но модель, которую вы искали, вам не понравилась. Что делать? Конечно же, посмотреть другие хлебопечки, а сделать это можно, воспользовавшись хлебными крошками на сайте.

польза хлебных крошек

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

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

назад в хлебных крошках

2. Качественная внутренняя перелинковка

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

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

внутренняя перелинковка

Узнать детальнее про внутреннюю перелинковку и проверить ее качество можно с помощью инструментов SE Ranking. 

3. Прокачанный сниппет и рост позиций

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

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

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

Посмотреть, как выглядел сниппет в выдаче за разные даты, можно в SE Ranking. Для этого нужно добавить свой сайт и интересующие ключевые слова в проект. Все данные про сниппет распределены по поисковым системам и датам, хранятся в разделе «Аналитика и трафик» в течение 30 дней.

просмотр сниппета

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

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

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

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

Здесь все просто — нужно соблюдать основные правила настройки хлебных крошек и проверить правильность микроразметки данных, прежде чем добавлять их на сайт. Обязательно учтите следующие нюансы:

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

  • Хлебные крошки лучше размещать в видимом и привычном для посетителя месте. Стандартное местоположение — под структурным меню веб-ресурса. Но встречаются и такие примеры, когда хлебные крошки дублируются внизу страницы для удобства пользования (нажав много раз «Показать еще», пользователю может быть проблемно быстро вернуться вверх страницы). 

крошки в футере

  • Чтобы ПС могли считать нужную информацию с вашего сайта и использовать ее для сниппетов, вы должны обозначить контент соответствующими HTML-тегами — то есть добавить микроразметку. Так поисковые роботы будут понимать, что на вашем сайте является логотипом, где указана цена, а какие элементы отвечают за хлебные крошки.

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

Чтобы навигационная цепочка отображалась в сниппете, нужно обозначить хлебные крошки соответствующим видом разметки согласно стандарту Schema.org. Его поддерживают все самые популярные поисковые системы — Google, Яндекс, Yahoo! и Bing.

микроразметка

Для оформления хлебных крошек рекомендуется использовать такие форматы микроразметки — Microdata и RDFa

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

валидатор микроразметки

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

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

Можно использовать специальные плагины (Breadcrumb NavXT, SEO by Yoast) или настроить хлебные крошки самостоятельно. 

С плагином

Давайте рассмотрим, как добавить хлебные крошки на сайт с помощью одного из наиболее популярных плагинов для хлебных крошек BreadcrumbNavXT

Для этого скачиваем плагин (бесплатно, но должна быть версия не ниже WordPress 3.0 и хост должен поддерживать PHP5). 

Добавить код хлебных крошек нужно в файл single.php (для всех записей), файл page.php (для статических страниц), category.php (для всех рубрик) или в файл header.php (чтобы показать везде).

Пример кода для добавления:

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

После этого в меню BreadcrumbNavXT (заходим через административную панель WordPress) можно задать значок разделителя между крошками, настроить ссылки и отредактировать другие опции.

меню BreadcrumbNavXT

Без плагина 

Программный код WordPress прост и добавить в него код хлебных крошек тоже не составит особого труда. 

Для этого найдите файл functions.php и вставьте туда следующий код:

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>';
}

Главное правило — не вставляйте эту функцию внутри другой функции, чтобы не было конфликта. 

Теперь, чтобы хлебные крошки отображались на сайте, просто поместите код «вызова хлебных крошек” в те места, где они должны быть:

 <?php the_breadcrumb(); ?>

В принципе, все готово. Для улучшения внешнего вида можно поиграться с дизайном хлебных крошек, отредактировав файл style.css в части идентификатора id=»breadcrumbs».

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

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

В Joomla есть специальный модуль, который отвечает за отображение хлебных крошек — Навигатор сайта (mod_breadcrumbs). Найти его можно по этому пути: Панель управления — Расширения — Менеджер модулей

Модуль навигатора по сайту позволяет посетителям понять, где они находятся, и при  необходимости вернуться обратно.

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

крошки в джумла

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

Если ни один вариант для WP или Joomla вам не подходит, хлебные крошки можно сделать и вручную, воспользовавшись обычными тегами HTML:

<a href="https://sait/glavnaia/">Главная</a>  — <a href="https:// sait/glavnaia/razdel/">Название раздела</a> — <a href="https:// sait/glavnaia/razdel/podrazdel/">Подраздел</a>

Только код необходимо вручную проставить на всех страницах.

Почему у вас еще нет хлебных крошек?

Если на вашем сайте больше двух уровней вложенности страниц и до сих пор нет хлебных крошек, мы идем к вам 🙂 

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

А как обстоят дела с хлебными крошками на вашем сайте? Все правильно настроили?

6 комментариев
  1. отличная стаья, у меня еще вопросы по крошкам в джумла есть, но это уже технически. Оченб хорошо объяснили, спасибо

  2. Хотелось бы всё-таки увидеть также комментарии по поводу того, когда стоит внедрять нестандартные крошки и какие есть нюансы. Иначе гайд неполный.

    1. Татьяна, спасибо за комментарий.

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

БОЛЬШЕ ИНТЕРЕСНЫХ СТАТЕЙ
Экспертиза
Что имеют в виду веб-мастера, когда говорят «закрыть тегом каноникал», или что такое Canonical Tags?
Ноя 23, 2020 Время чтения: 11 мин

Использование canonical — несложная базовая механика в работе SEO-специалиста. Однако при некорректном применении канонизация может негативно влиять на ранжирование сайта. Рассказываем, как правильно использовать тег каноникал в разных целях и как избежать возможных ошибок.

Александр Лушин
Экспертиза
Что такое long-tail запросы и как их эффективно использовать в SEO
Ноя 11, 2020 Время чтения: 16 мин

Ключи long-tail — обычно низкочастотные, содержащие 3-5 и больше слов. Разбираемся в типах запросов «с хвостом» и их важности для SEO. Узнайте, как правильно использовать long-tail ключи, чтобы увеличить конверсии и поисковую видимость сайта.

Анна Чудная
Экспертиза
11 метрик, используемых в инструментах SE Ranking
Ноя 05, 2020 Время чтения: 13 мин

SE Ranking использует самые важные метрики Google и Яндекса, а также собственные алгоритмы для расчета разных SEO-параметров. В этой статье мы рассказываем, как анализировать разные типы данных по ключевым словам, доменам, трафику и рекламным объявлениям.

Анастасия Осипенко