Мы используем cookie-файлы
Для оптимизации работы нашего сайта мы используем cookie-файлы. Продолжая использовать сайт, Вы соглашаетесь с использованием cookie-файлов.
  • Русский
  • Українська
  • UAH
  • USD
  • RUB
  • EUR
  • +38(044) 392-74-33  Киев
  • +38(057) 728-39-00  Харьков
  • +38(056) 794-38-31  Днепр
  • +38(032) 229-58-93  Львов
  • +38(048) 738-57-70  Одесса
  • +38(093) 170-15-42  Life
  • +38(067) 400-88-44  Киевстар
  • +38(095) 630-90-82  Vodafone
  • +1(888)393-24-51  USA, Toll free
  • +44(131)507-01-14  Great Britain
  • +7(499) 348-28-61  Москва

Что такое «хлебные крошки» на сайте и зачем они нужны?

Блог SEO оптимизация Что такое «хлебные к...
  1. Зачем нужны хлебные крошки на сайте?
  2. Наиболее распространенные виды крошек
  3. Динамические хлебные крошки
  4. Хлебные крошки основанные на истории посещения
  5. Хлебные крошки с выпадающим списком
  6. Каким сайтам нужны хлебные крошки?
  7. На что влияют хлебные крошки?
  8. Позиция поисковых систем
  9. Почему хлебные крошки так важны для продвижения сайта
  10. Нужно ли делать хлебные крошки на мобильной версии?
  11. Качественная внутренняя перелинковка
  12. Как сделать правильные хлебные крошки?
  13. Микроразметка для хлебных крошек в сниппете
  14. Из-за чего же Rich Snippets так актуален при выдаче?
  15. Как добавить хлебные крошки для WordPress?

Система хлебных крошек (англ. bread-crumbs) – представляют собой разновидность альтернативной навигации. Она указывает месторасположение юзера на ресурсе вообще или на отдельном разделе сайта. 

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

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

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

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

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

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

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

 

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

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

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

Хлебные крошки на основе иерархии

Представляют собой иерархическое (или основанное на местоположении) меню. Это типичные хлебные крошки, которые вы можете найти в блогах или на сайтах с простой иерархической структурой.

Вот пример из Amazon:

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

 

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

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

Вот пример сайта электронной коммерции:

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

 

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

Хлебные крошки основанные на истории посещения

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

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

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

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

 

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

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

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

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

На что влияют хлебные крошки?

Существует три основных группы факторов, на которые влияют хлебные крошки:

  • время нахождения посетителей на сайте;

  • процент вернувшихся посетителей;

  • повышения рейтинга выдачи.

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

Позиция поисковых систем

Google и Яндекс подчеркивают важность хлебных крошек во всех своих документах и руководствах по SEO.

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

Как говорят на хабре: покормите своими хлебными крошками гугли-гугли и они будут возвращаться к вам снова и снова.

Почему хлебные крошки так важны для продвижения сайта

Крошки являются важным элементом SEO-дружественного сайта по нескольким причинам:

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

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

  • Они хороши для использования дополнительных ключевиков в SEO.

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

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

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

Например, постоянная ссылка на страницу ниже: https://www.ukraine.com.ua/ но поскольку там есть оптимизированные для SEO крошки, они показывают подразделы навигации в результатах, что дает пользователям возможность заранее узнать, куда они попадут.

Почему хлебные крошки так важны для продвижения сайта

 

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

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

Вот пример мобильной крошки:

пример мобильной крошки


 

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

Чтобы оптимизировать ваши хлебные крошки, вы можете применить несколько рекомендаций.

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

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

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

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

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

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

Хорошо отформатированные крошки улучшают показания, связанные с получением фрагментов меню в поисковой выдаче.

Вот как можно добавить схему крошки на ваш сайт:

Вот как можно добавить схему крошки на ваш сайт

 

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

  • Элемент - URL страницы для определенного элемента.

  • Название - название крошки.

  • Положение - положение этого элемента в следе крошки.

Вот как выглядит код для книжного магазина:

Крошки: Книги – Автор - Анна Лики – Слуги Правосудия

Крошки: Книги – Автор - Анна Лики – Слуги Правосудия

 

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

Rich Snippets (синоним «богатые результаты») - это обычные результаты выдачи Google с отображением параметров структурной разметки. Эти дополнительные данные обычно берутся из информации, полученной роботом из HTML-кода страницы. Наиболее популярные разновидности Rich Snippet включают аналитику, рейтинги, рецепты, рекомендации и события.

Из-за чего же Rich Snippets так актуален при выдаче?

Классические результаты выдачи Google или Яндекс отображают три категории данных:

  • тег заголовка;

  • мета-описание;

  • URL.

Из-за чего же Rich Snippets так актуален при выдаче?

 

Это типичный «фрагмент». Rich Snippets можно получить, если вы возьмете обычный фрагмент и добавите к нему микроразметку. В данном случае используется не только крошки в меню, но и разметка рейтинга и количества голосов.

Вот пример «богатых результатов»:

Вот пример «богатых результатов»

 

Даже при первом взгляде, результаты со звездочками и цифрами более привлекательны на вид, чем обычные результаты поиска – и это приводит к более высокому показателю CTR (количества кликов).

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

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

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

 

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

Информация о соответствующей схеме автоматически добавляется на все ваши веб-страницы. Для этого используются темы Genesis (WordPress) - темы, основанные на плагине Genesis.

Когда вы используете вместо WordPress  иную CMS или применяете другую тему, лучше всего сначала проверить, активирована ли в принципе схема хлебных крошек на вашем ресурсе. Перейдите к тестрировочному плагину структурированных данных и введите URL-адрес одной из страниц, на которых включены хлебные крошки.

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

проверка микроразметки крошек

 

В данном случае тест показывает правильность вывода информации.

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

В заключение можно сказать, что тенденция использовать хлебные крошки прочно закрепилась практически на всех типах ресурсов. Исключение составляют разве что Лендинг Пейджес (посадочные страницы), на которых актуальная информация размещается полностью.


Только зарегистрированные пользователи могут оставлять комментарии

256

711

Подпишитесь на рассылку

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

Присоединяйтесь к нам в соцсетях