Многостраничный сайт можно сравнить с высотным зданием, где на каждом уровне расположено множество секций и помещений. Без вспомогательных указателей перемещение по зданию уподобляется прохождению квеста. Чтобы не заставлять посетителей вашего сайта блуждать в поисках нужной информации, важно снабдить их понятной и удобной навигацией, одним из элементов которой являются «хлебные крошки». Что это такое и в чем их значение – читайте далее.
Что такое хлебные крошки
Основным элементом навигации по сайту выступает меню, которое является указателем направления. Хлебные крошки (англ. термин – «Breadcrumbs») дополняют его функционал и выступают своего рода метками, фиксирующими этапы движения по заданному маршруту. Они позволяют видеть исходную точку – главную страницу сайта и пройденный путь от нее до текущей страницы. Технически навигационная цепочка представлена рядом текстовых ссылок и размещается в верхней части страницы, под «шапкой». (Рис. 1).
Рис. 1 Пример «хлебных крошек» на сайте интернет-магазина
Это удобное и полезное решение для сайтов со сложной иерархией и большим объемом контента (интернет-магазин, новостной портал, доска объявлений, форум). Навигационная цепочка помогает пользователю не потеряться при переходе с одной страницы на другую внутри одной ветви и при необходимости быстро вернуться в корневой раздел.
Своим происхождением термин «хлебные крошки» обязан сюжету детской сказки про Гензеля и Гретель, которые бросали крошки хлеба на землю, чтобы оставить своеобразные метки и суметь вернуться по ним домой. Однако пользователям сайтов, в отличие от персонажей сказки, повезло гораздо больше: навигационная цепочка ссылок всегда остается на своем месте, помогая максимально быстро находить нужную информацию.
Цель использования
1. Удобство для пользователей
Прежде всего, навигационная цепочка ориентирована на интересы пользователей. В частности, она просто незаменима, когда на сайте не предусмотрено боковое меню с каталогом. Такая ситуация типична для новостных порталов и форумов или обусловлена особенностями дизайна, когда каталог размещается на главной странице. В этом случае строка «хлебных крошек» позволяет переходить на предыдущий шаг с минимальным количеством кликов, минуя возврат к первичной навигации.
Рис. 2 Пример интернет-магазина без бокового меню каталога товаров
Например, если пользователь попадет на страницу товара (Рис. 2) из поисковой выдачи и решит посмотреть другие предметы мебели из той же серии, то без навигационной цепочки поставленная задача будет сложно выполнимой (в карточке товара отсутствуют какие-либо указания на название серии и коллекции). Чтобы найти интересующий контент, покупателю придется изучить весь ассортимент. За счет «хлебных крошек» время на поиски значительно сократится и при этом снизится показатель отказов.
2. Польза для SEO
«Хлебные крошки» дают положительный эффект для поискового продвижения сайта, участвуя в перелинковке страниц. Может возникнуть вполне логичный вопрос относительно дублирующих ссылок в основном меню и в строке навигации. Ведь, как известно, поисковики не жалуют дублирование, в данном случае – ссылок и анкоров, которые ведут на одну страницу. Как быть в такой ситуации? Мнения насчет дублирования и сокрытия анкоров сквозных ссылок меню разделяются у разных SEO-специалистов: кто-то говорит о закрытии ссылок меню в <noindex> (для неучета анкоров Яндексом), а кто-то говорит, что делать этого не стоит. Поисковые роботы хорошо умеют отличать навигацию как элемент юзабилити сайта и применяют к таким ссылкам другие правила относительно обычных внутренних ссылок. К сожалению, бывают ситуации с запутанной структурой сайта, где поисковый робот ошибается в определении навигации. В этом случае стоит исключить лишние анкоры, заключив меню в <noindex>. Но это лишь частная практика и делать это для всех сайтов не рекомендуется.
Второе полезное свойство «хлебных крошек» для SEO – помощь в оптимизации сниппетов. Поисковая система (на данный момент только Google!) использует их для отображения навигационной цепочки, что делает сниппет более привлекательным и дает пользователю представление о структуре сайта (Рис. 3).
Рис. 3 Пример сниппета с использованием микроразметки в «хлебных крошках»
Чтобы добиться этого, необходимо использовать микроразметку (любые из доступных форматов). Примеры реализации кода представлены в соответствующей справке Google для вебмастеров. Если «хлебные крошки» не оптимизированы данным образом, то цепочка навигации в сниппете выглядит неинформативно (используются URL страниц) (Рис.4).
Рис. 4 Пример сниппета без использования микроразметки в «хлебных крошках»
О принципе формирования навигационных цепочек для сниппетов в Яндексе можно узнать из его справки.
Оформление «хлебных крошек»
В рамках данного выпуска мы не будем рассматривать примеры технической реализации «хлебных крошек» (правила построения кода можно найти на профильных ресурсах для вебмастеров), а уделим внимание важным моментам визуализации, которые зачастую упускаются из виду:
Рис. 5 Пример оформления «хлебных крошек»
Рис. 6 Дизайн «хлебных крошек» на сайте интернет-гипермаркета Walmart
Выводы«Хлебные крошки» – это лаконичный, ненавязчивый и в то же время удобный элемент навигации. Если вы используете этот функционал на вашем сайте, то всегда можете проверить, насколько часто пользователи прибегают к нему для взаимодействия с ресурсом. В этом поможет инструмент Яндекса «Карта путей по сайту». Аналитика позволит не только получить статистику, но и выявить возможные ошибки в реализации навигационной цепочки, вызывающие сложности у пользователей. Для их идентификации используйте сервис «Вебвизор».
Источник: Интернет-рассылки.
Источник: