«Хлебные крошки» на сайте: всё для удобства пользователя

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

Что такое «хлебные крошки» на сайте

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

Упомянутая выше навигационная цепочка – это элемент, который показывает путь от стартовой площадки (корня файловой системы, главной страницы сайта) до того уровня, на котором располагается нужный объект (веб-страница, файл и пр.).

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

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

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

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

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

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

Еще один аргумент в пользу breadcrumbs – возможность отражать путь к нужному разделу в сниппете (информационный блок о ресурсе, который выводится в поисковой выдаче), если выполнена микроразметка.

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

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

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

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

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

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

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

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

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

5. Повышение релевантности веб-страницы. SEO-специалисты в большинстве своем указывают высокочастотное ключевое слово в заголовке первого уровня (Н1). «Хлебные крошки» будут дублировать на странице заголовок, а значит, и ключевики.

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

Какими могут быть «хлебные крошки» на сайте

Существует четыре основных вида «хлебных крошек» на сайте:

• Указание пути линейным способом

• Функция «Назад»

• Линейный способ + функция «Назад»

• В пути указываются атрибуты

Рассмотрим каждый из видов немного подробнее.

Указание пути линейным способом

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

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

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

Функция «Назад»

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

Линейный способ + функция «Назад»

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

В пути указываются атрибуты

Такой вид навигации используется сайтами с возможностью онлайн-покупки (магазины, каталоги и пр.). Путь к конечному объекту указывается в зависимости от выбранных пользователем параметров (фильтров). Каждый раз навигационная цепочка будет уникальной, поскольку посетитель задает разные критерии отбора.

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

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

Где «хлебные крошки» на сайтах просто необходимы

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

Однако на некоторых интернет-площадках «хлебные крошки» рекомендованы к использованию:

• онлайн-каталоги;

• тематические форумы и блоги;

• веб-сайты, на которых недоступна к просмотру полная структура;

• веб-ресурсы, на которых нет карты сайта.

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

Существует два формата, которые обязательно нуждаются в breadcrumbs, – интернет-магазины и тематические форумы. Проблема многих интернет-магазинов заключается в том, что навигация у них сложная и неудобная. Бывает, что часть товаров даже не распределяется по конкретным разделам, а поиск по внутреннему запросу лишь создает сложности для пользователя.

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

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

Как добавить «хлебные крошки» на сайт с помощью WordPress

Существует универсальный способ оформления меню навигации на любой CMS (WordPress в том числе) – с помощью языка разметки HTML и языка программирования PHP. Последний используется, чтобы установить скрипт и не прописывать теги каждый раз вручную.

Используя шаблон

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

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

Используя плагин Yoast SEO

Подключать меню навигации можно и с помощью программного модуля. Однако не стоит забывать, что он создает определенную нагрузку на систему управления сайтом (WordPress в частности), что может привести к замедленной загрузке страниц.

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

Альтернативный способ – добавить этот код в конец файла header.php, однако предсказать результат не получится, проверить, сработает ли этот вариант, можно только опытным путем.

Инструментарий CMS WordPress позволяет вносить изменения в шаблоны страниц, что можно выполнить следующим способом: зайти в раздел «Внешний вид», затем «Редактор» и выбрать из списка нужный файл, в котором уже содержатся PHP-код и HTML-разметка. Ничего сложного нет, нужно лишь внимательно изучить инструменты и понять, что и где располагается.

Навигационное меню лучше внедрять прямо под header с помощью функции get_header (). Чтобы лента навигации выглядела органично, придется отдельно прописать для нее стили, которые хоть и предусмотрены самим программным модулем, но не всегда соответствуют дизайну сайта.

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

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

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

Установить на веб-сайте навигационное меню можно не только с помощью Yoast SEO, но и пользуясь другими плагинами.

Breadcrumb NavXT

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

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

Breadcrumb

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

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

jQueryrCrumbs

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

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

Bootsnipp

Кажется, что «хлебные крошки», представленные на портале, дублируют друг друга. Это объясняется тем, что фрагменты дополняются работами разработчиков, которые бесплатно выпустили свои коды для копирования и обмена. Фрагменты полезны только тем программистам, которые работают с Bootstrap.

Помимо описанных, есть и другие плагины, менее востребованные, но также позволяющие встроить в сайт «хлебные крошки». Чтобы выбрать подходящий, зайдите в каталог плагинов WP и в строку поиска введите breadcrumbs. Система предложит вам множество разных модулей.

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

Существуют весомые аргументы в пользу того, чтобы создавать меню навигации без плагинов:

1. Установка дополнительного программного модуля создает нагрузку на систему администрирования сайта, что сказывается на скорости загрузки страниц, повышает риск взлома и заражения вредоносными программами.

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

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

4. Еще один аргумент в пользу breadcrumbs без плагина – микроразметка для отображения цепочки в сниппете.

Код функции

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

В коде можно указать такие параметры, как:

• текст ссылок для отдельных страниц;

• название класса для блока, в котором находятся «хлебные крошки»;

• разделитель между элементами навигационного меню.

Наглядно о том, как сделать «хлебные крошки» на сайте с помощью html и php:

Код вставляется либо в файл header.php, либо в single.php и page.php.

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

Специалисты рекомендуют протестировать оба варианта и выбрать оптимальный.

Немного о дизайне и месторасположении «хлебных крошек»

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

Общепринятым и востребованным считается символ ”>”, который применяется для разделения ссылок в «хлебных крошках». Альтернативными вариантами являются символы “»”и ”/”.

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

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

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

10 советов, которыми стоит воспользоваться при создании «хлебных крошек» на сайте

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

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

3. Стандартное оформление breadcrumbs– горизонтальная линия, расположенная в верхней части веб-страницы. Вертикальное расположение встречается гораздо реже.

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

5. Не нужно специально вставлять ключевые фразы в навигационные ссылки. Исключение составляют те случаи, когда ключевик вписывается в логику навигации.

6. Микроразметка «хлебных крошек» позволит отображать цепочку в сниппетах поисковой системы («Яндекс», Google и т. д.). Информацию о том, как создается микроразметка, можно найти в справке по веб-мастерингу «Гугл».

7. Если вы используете линейный способ, то указывайте последовательность до конечного элемента, чтобы не вводить в заблуждение пользователей.

8. Исключите циклические гиперссылки. Финальный элемент в меню навигации не должен быть кликабельным.

9. Для удобства посетителей вставляйте блок с «хлебными крошками» на каждой странице в одном и том же блоке.

10. Навигационное меню должно быть оформлено в соответствии со стилем, в котором выполнен весь сайт.

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

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

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

Как уже было неоднократно сказано, breadcrumbs – это дополнительный элемент навигации, который предназначен для того, чтобы помочь посетителю быстрее и легче ориентироваться на сайте. Это означает, что навигационная цепочка не заменяет основного меню.

Скачайте полезный документ по теме:

Чек-лист: Как добиваться своих целей в переговорах с клиентами

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

Еще раз напомним про то, что конечное звено в цепочке должно быть некликабельным текстом, а не гиперссылкой.

Как убрать или отключить «хлебные крошки» в системе WordPress

В данной ситуации следует действовать от обратного – сначала выяснить, как они были созданы.

Примерный порядок действий:

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

2. Если программист правильно внедрил breadcrumbs, то после деинсталляции плагина ошибки быть не должно. В противном случае ищите в файлах шаблона код вывода навигации (WinGrep в помощь). Это могут быть, например, функции yoast_breadcrumb(), bcn_display(), bread_crumb() и т. п. Удалите соответствующие строки.

3. Проверьте, правильно ли отображается веб-страница в браузере.

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

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

Автор статьи

Дмитрий Свистунов

Руководитель SEO-отдела и разработки

Статья опубликована: 22.04.2019

Последние статьи этого автора:

• Адаптивная верстка сайта: гайд для начинающих
• Анкор ссылки: виды, правила составления, влияние на продвижение
• Белая раскрутка сайта без перехода на темную сторону

Забрать гарантированный подарок

Полезные
материалы
для руководителей

Скачать 3,2 MB