Первоклассные услуги по продвижению и раскрутке сайтов

Хлебные крошки или как существенно улучшить навигацию сайта

Опубликовано: 2016/08/06Рубрика:
Продвижение сайтов
Комментариев: 0
Просмотров: 781

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

Как выглядят «Хлебные крошки»

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

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

1

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

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

2

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

 Для чего используются

 Улучшение юзабилити

Любая визуальная навигация создается для пользователей. Чем она проще и удобнее, тем выше шанс того, что посетителю понравится сайт и он зайдет на него вновь. Хлебные крошки особенно уместны на страницах, лишенных бокового меню: часто оно не вписывается в дизайн или по каким-то иным причинам не предусмотрено в шаблоне к CMS. Например, форумы. На абсолютно всех форумных CMS типа vBullentine, phpBB, и XenForo в навигации присутствуют хлебные крошки. К формату форума просто не подойдет другой тип навигации: невозможно себе представить форум с боковым меню или древовидным каталогом, в то время как хлебные крошки позволяют перемещаться между ветками, топиками, и постами за несколько кликов. Хлебные крошки совершенны технически и впишутся в любой шаблон, посетителю не придется возвращаться на исходную страницу каталога, чтобы открыть одну из уже просмотренных.

Влияние на оптимизацию

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

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

3

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

Варианты оформления

В техническом плане хлебные крошки реализуются легко. Дополнение не потребует тяжелых библиотек и сотен строк кода, если идет разработка с нуля, программист сможет обойтись стандартными средствами HTML и PHP. А если сайт базируется на CMS, найти готовый плагин хлебных крошек не будет проблемой.

При выборе готового решения и создании собственного следует учитывать:

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

  • Нужно обозначить, в каком участке пользователь находится в данный момент. При этом нельзя оставлять ссылку активной, чтобы страница не ссылалась на саму себя.
  • Анкор ссылки должен быть минималистичным и максимально коротким, отражающим главную суть того, что расположено по ссылке.
  • Разграничивать ссылки между собой можно любым элементом. Как графическим, так и текстовым. Например: “/”, “|”, и любым другим, подходящим под дизайн.

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

Как добавить хлебную крошку в выдачу Google, Яндекс

Гугл и Яндекс – ссылки.

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

Рейтинг статьи:
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Нет рейтинга)