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

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

Функции и задачи «крошек»

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

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

Говоря о том, что такое «хлебные крошки» и об их пользе для юзабилити, стоит сразу упомянуть, какие задачи они решают:

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

Другими словами, «крошки» делают сайт более удобным в работе. Они оказывают влияние на SEO следующим образом:

• являются компонентом перелинковки;
• улучшают поведенческие метрики (это происходит благодаря упрощению навигации);
• способствуют оптимизации внешнего вида (если есть микроразметка) и повышению кликабельности сниппета в поиске системы Google. Таким образом, формируется навигационная видимая цепочка.

Отображение пути в «Яндексе», в отличие от Google, образуется автоматически. В приоритете большие сайты с развитой структурой. Интересно, что названия поисковая система подтягивает сама – из тегов, анкоров на страницы.

Типы «хлебных крошек»

Цепочка навигации формируется по различным принципам:

1. Линейный. Распространенный способ, который указывает путь полностью, начиная от главной странички.
2. «Назад». Этот принцип основывается на том, что цепочка заменена переходом «На предыдущую страничку» (дублирует кнопку «Назад»). Подобный ход подойдет в том случае, когда на ресурсе внедрена опция поиска.
3. Комбинированный принцип. При таком методе доступными остаются и цепочка навигации, и опция «Назад». Если принцип реализован правильно, то он отлично подойдет для страниц ресурса, на которые пользователи зашли через опцию поиска на веб-сайте. Однако бывает, что решение принято неудачно. В таких ситуациях стоит воспользоваться кнопкой «Назад», которая есть на карточках с ассортиментом.
4. Динамический. Навигация выполняется исключительно по пути переходов. Такой принцип часто внедряют в онлайн-магазинах, где категории и товары могут отображаться сразу в двух-трех разделах.
5. С использованием выпадающего меню. Такая опция рассчитана на то, что пользователи не только будут переходить на более высокие уровни, но и смогут возвращаться в нужные разделы.
6. Атрибутивный. На таком методе построена работа онлайн-каталогов и коммерческих сайтов. Путь странички и ее содержание составляются с учетом характеристик, заданных в фильтрах. При удалении или добавлении новых параметров цепочка навигации выстраивается заново. Такой метод существенно улучшает юзабилити, делает его более удобным.

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

Как делают «хлебные крошки» корректного формата

Строится навигационная цепочка следующими способами:

• с использованием стандартных компонентов или модулей движков CMS (как в Joomla);
• посредством плагинов. В большинстве систем управления предусмотрены расширения для автоматической настройки навигационной цепочки;
• добавление вручную через CSS или PHP. Такой подход применяется в тех случаях, когда готовые методы оказались недоступными.

Чтобы понять, зачем нужны «хлебные крошки», стоит соблюдать следующие правила:

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

Также стоит сверить корректность микроразметки, используя инструменты поисковиков: валидатор («Яндекс.Вебмастер») и проверка структурированной информации (Google).

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