Хлебные крошки на сайте — что это?

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

Зачем и кому нужны?

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

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

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

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

Влияние на SEO

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

  1. Хорошая перелинковка между внутренними страницами сайта. Хлебные крошки – это разновидность навигации, повышающая эффективность внутренней перелинковки и улучшающая распределение веса ссылок. Более высокие в иерархии страницы считаются важнее, поэтому они получают вес от всех документов, находящихся ниже. Правильная иерархия должна выглядеть следующим образом: страницы с описанием товаров ссылаются на подразделы, подразделы – на разделы, а разделы – на главную страницу.
  2. Качественное юзабилити. Хлебные крошки облегчают пользователям навигацию по сайту, способствуя увеличению время посещения и глубины просмотра, а также показывают, где они находятся в данный момент и как им попасть в необходимый раздел. Например, вы заходите по ссылке из поиска на страницу с ноутбуком, который вам не понравился. Тогда вы захотите посмотреть другие ноутбуки. И чтобы не выходить на главную страницу и не вводить в поиске “ноутбуки”, с помощью хлебных крошек вы попадете в нужный раздел всего в один клик.
  3. Привлекательный сниппет. Грамотно настроив на сайте хлебные крошки, с большой вероятностью в SERP-е поисковиков у вашего сайта появятся сниппеты, содержащие навигационные цепочки. Подобные сниппеты позволяют пользователям заходить в различные разделы сайта сразу с выдачи. Все это приводит к улучшению поведенческих факторов, увеличению видимости других разделов ресурса на странице выдачи, а также к более эффективному ранжированию страниц.

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

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

Правила использования хлебных крошек

Чтобы корректно настроить навигацию при помощи хлебных крошек, нужно следовать нескольким важным правилам перед их добавлением на ресурс:

  1. Никаких хлебных крошек на главной странице. В противном случае, это приведет к тому, что документ будет ссылаться сам на себя, и в этом нет никакой логики. По аналогичной причине в хлебных крошках запрещается ссылаться на документ, на котором в данный момент пребывает пользователь.
  2. Хлебные крошки рекомендуется размещать вверху страницы. Для посетителей верхняя часть документа наиболее видимая, да и элементы навигации зачастую располагаются под структурным меню сайта, к чему пользователи уже давно привыкли. Иногда для удобства хлебные крошки повторяются внизу страницы, чтобы не нужно было возвращаться в верхнюю часть, но это не обязательно.
  3. Добавляйте микроразметку. Благодаря микроразметке вы разметите контент соответствующими HTML-тегами, тем самым помогая поисковикам понять, какие данные относятся к стоимости товаров, а что отвечает за навигацию. Микроразметка позволит просканировать необходимые материалы с вашего ресурса и использовать их в сниппетах.

Примеры использования хлебных крошек

Есть несколько основных видов хлебных крошек:

1. Линейные

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

Линейные хлебные крошки также делятся на 2 типа:

  1. Динамические. Когда навигация показывает вложенность страниц исходя из пути посетителя, а не иерархии документов. Они нужны тогда, когда один и тот же товар подходит для двух разделов. Например, “подарки для девушки” и “подарки для подруги”.
  2. С выпадающим списком. В данном случае при наведении на какой-либо раздел списка отображается список примыкающих разделов. Так посетитель сайта может не просто вернуться на уровень выше, а и зайти в смежные разделы различных категорий.

2. Кнопка “Назад”

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

3. Смешанный

Объединяет в себе два вышеперечисленных вида, когда на сайте есть и линейные хлебные крошки, и кнопка “Назад”. Кнопку лучше применять лишь на страницах, куда пользователи заходят из внутреннего поиска. В других документах использовать смешанный тип навигации бессмысленно.

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

Сниппет — что это и как его изменить?

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

Елена Заглядкина · 19.02.2020

Хлебные крошки в выдаче

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

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

Поисковые системы работают со следующими форматами микроразметки:

  1. RDFa;
  2. Microdata;
  3. JSON-LD.

Вот так в формате Microdata выглядит микроразметка хлебных крошек для страницы “Samsung S10”, навигационная цепочка которого включает ссылки:

Главная > Каталог > Смартфоны > Samsung:

 <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/smartfoni/">
<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/smartfoni/samsung/">
<span itemprop="name">Samsung</span></a>
<meta itemprop="position" content="4″ />
</li>
</ol>

Строчка itemscope itemtype=http://schema.org/BreadcrumbList означает, что этот элемент отвечает за хлебные крошки и содержит цепочки связанных документов.

Затем для всех навигационных элементов указываем атрибуты:

  • itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem — указывает, что элемент относится к отдельному пункту списка;
  • itemprop="item" — для разметки ссылки;
  • itemprop="name"> — у тега с названием хлебной крошки;
  • В конце блока хлебной крошки добавляем <meta itemprop="position" content="%number%" />, сообщающий позицию элемента в цепочке.

Если в коде отсутствует атрибут itemprop=”item” у последнего элемента навигации, то валидатор микроразметки покажет предупреждение. Вся проблема в том, что у элемента нет ссылки.

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

Заключение

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

Вам понравилась статья?

Поделитесь статьей с друзьями и коллегами

Комментарии

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

Похожие статьи

Получить сборник 60 сервисов

по рекомендации наших пользователей
и подписку на инсайды раз в неделю.

Подпишитесь на нас в соцсетях

Узнавайте о новостях и событиях там, где вам удобно