Навигация по хлебным крошкам: В чем преимущества?

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

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

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

• начальная страница > категория > текущая позиция.

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

• Начальная страница > Категория 1 > Начальная страница > Категория 3 > Категория 2 > Начальная страница.

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

• Start page > Clothing > Menswear > Trousers > Jeans > Blue > Size 32

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

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

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

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

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

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

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

Хлебные крошки должны предлагать дополнительную ценность

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

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

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

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

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

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

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

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

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

Многое в теории о том, как на самом деле реализовать хлебные крошки, еще нуждается в уточнении. В зависимости от требований и существующей CMS, у вас есть разные способы сделать это: хлебные крошки можно легко создать с помощью HTML. Затем вы можете настроить их внешний вид с помощью CSS. Следующий пример кода показывает, как реализовать хлебные крошки с помощью HTML:

В приведенном примере кода местоположение текущей позиции является единственным недостающим аспектом для логичной, основанной на местоположении навигационной системы. Никакой дополнительной гиперссылки не требуется, поскольку вы уже находитесь в этом месте. Вы также можете использовать элемент списка (‘li’). В качестве альтернативы тегу ‘id’ можно также использовать ‘class’ вместо ‘div’, а также тег ‘nav’. Чтобы сделать хлебные крошки более удобными для поиска, можно также использовать микроданные, RFDa или JSON-LD. Если хлебные крошки в исходном коде семантически разграничены таким образом, поисковые системы могут считывать различные элементы, которые также могут отображаться в виде богатых сниппетов в SERP’s.

Помимо внедрения с помощью HTML и CSS, существует еще несколько способов интеграции хлебных крошек: самый простой вариант предлагают системы управления контентом. С помощью систем управления бэкенд внедрение происходит легко, всего за несколько кликов. CMS, которая не предлагает полного решения, имеет несколько доступных соответствующих плагинов. Также можно реализовать навигацию по хлебным крошкам на динамических сайтах с помощью PHP или JavaScript.