Что такое «хлебные крошки» и для что они необходимы

Реклама. ООО «Клик.ру», ИНН:7743771327, ERID: 2VtzquiiL8b

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

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

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

Дальше в материале разберем:

для чего располагать «хлебные крошки» на веб-сайте;
как навигационная цепочка влияет на удобство юзеров и SEO;
какие методы реализации подступают для различных типов веб-сайтов.

Для чего на веб-сайте необходимы «хлебные крошки»

Еще в 1995 году спец по юзабилити Якоб Нильсен обрисовал 10 базисных принципов удобства интерфейсов. Один из их – «видимость статуса системы». Юзер в хоть какой момент должен осознавать, где он находится и что происходит на дисплее. В контексте веб-сайта это значит ординарную вещь: гостю принципиально созидать свое пространство в структуре разделов. Конкретно эту задачку и решают «хлебные крошки».

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

Исходя из убеждений юзабилити «хлебные крошки» делают сходу несколько функций:

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

Кроме удобства для гостей, навигационная цепочка приносит пользу и для SEO. «Хлебные крошки»:

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

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

В Yandex’е таковой элемент формируется автоматом: ценность получают большие веб-сайты с логичной и точной структурой. Наименования разделов поисковая машина берет из тегов title и анкорных текстов внутренних ссылок.

Главные типы «хлебных крошек»

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

Линейная навигация

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

К примеру, структура может смотреться так: основная страничка → каталог продуктов → категория «Кухни» → подкатегория «Кухонные гарнитуры» → определенный продукт. Таковая схема наглядно указывает вложенность и помогает стремительно возвратиться на хоть какой предшествующий уровень.

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

Принцип «Вспять»

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

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

Комбинированный вариант

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

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

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

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

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

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

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

Атрибутивный принцип

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

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

гость настраивает выдачу продуктов при помощи фильтров;
перебегает в карточку продукта для просмотра подробной инфы;
ворачивается в каталог с сохраненными параметрами поиска.

Как верно воплотить «хлебные крошки» на веб-сайте

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

На практике почаще всего употребляют один из последующих вариантов:

интегрированные модули и обычные составляющие CMS – к примеру, готовые решения есть в Битриксе и Joomla;
плагины и расширения для фаворитных систем управления контентом: WordPress, Opencart, Drupal и остальных;
ручную реализацию, когда разраб добавляет «хлебные крошки» при помощи PHP, CSS либо шаблонной логики веб-сайта, если готовые инструменты недосягаемы.

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

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

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

Отдельное внимание стоит уделить текстам ссылок. Не рекомендуется специально подгонять анкоры в «хлебных крошках» под SEO-ключи. Исключение – ситуации, когда главные фразы органично вписываются в логику разделов. В неприятном случае есть риск получить переспам и препядствия с поисковыми машинами.

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

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

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

Для оптимизации рекомендуется добавить микроразметку «хлебных крошек» с внедрением Microdata либо RDFa. Это дозволяет корректно показывать навигационную цепочку в поисковых результатах Гугл. Опосля внедрения разметку стоит проверить при помощи инструментов Yandex Веб-мастера и сервиса проверки структурированных данных Гугл.

И, в конце концов, навигационная цепочка обязана гармонически вписываться в дизайн веб-сайта и смотреться как его органичная часть, а не как посторонний элемент интерфейса.

Итоги

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

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

Модуль SEO PromoPult решает задачки всеохватывающей оптимизации веб-сайта: от внутренней и наружной SEO-настройки до работы с контентом. В чек-лист заходит и корректная реализация «хлебных крошек». Вы сможете доверить оптимизацию спецам PromoPult, сделать лучше пользовательский опыт и завлекать трафик и лиды из поисковых машин. Бесплатный тест SEO в PromoPult доступен в течение 2 недель.

Оригинал статьи на SEOnews