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

Сообщить об ошибке

Отменить
10670
How-to Читать 8 минут

Какими должны быть хлебные крошки и как их добавить на сайт

Как создать хлебные крошки
ЧЕК-ЛИСТ: ТЕХНИЧЕСКАЯ ЧАСТЬ — ССЫЛКИ
Сайт, имеющий неудобную навигацию или сбрасывающий фильтры при поиске, — идеальный донор клиентов для конкурентов. Разбираемся, как избежать такой участи и повысить позиции в выдаче с помощью «хлебных крошек».

Что такое хлебные крошки

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

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

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

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

Виды хлебных крошек

#1

Линейные

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

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

Обратные

Вместо полного маршрута на страницу добавляется кнопка «Назад». Фактически она дублирует аналогичную функцию браузера, но делает ее удобнее и вариативнее.

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

Атрибутивные

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

Комбинированные

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

К такому выводу пришел Baymard Institute — институт, изучающий веб-юзабилити. UX-дизайнеры проанализировали 50 крупнейших интернет-магазинов и обнаружили, что 45% из них используют только один тип крошек, а 23% — вообще не имеют подобной навигации, теряя потенциальных клиентов.

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

Построенные по принципу истории переходов

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

Особенности создания хлебных крошек

При добавлении хлебных крошек нужно помнить: они создаются для людей. Главная цель — облегчить навигацию по сайту. Общие правила, к которым стоит прислушаться при настройке:
1
Навигационная строка органичнее всего выглядит в верхней части страницы. Оформляйте ее в стиле дизайна сайта, она должна не выглядеть инородным объектом, а ненавязчиво дополнять страницу.
Верстка хлебных крошек
2
На главной странице крошек быть не должно. Во-первых, потому что именно с главной начинается структура сайта. Во-вторых, циклические ссылки, направляющие пользователя на страницу, с которой он пришел, — один из факторов, ухудшающих ранжирование сайта.
Хлебные крошки для главной страницы Хлебные крошки на странице товара
3
Название текущей страницы не должно быть кликабельным, его стоит написать в виде текста. Причина — все те же циклические ссылки и отношение поисковых систем к ним.
Оформление хлебных крошек

Как создать хлебные крошки в WordPress

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

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

Самый удобный плагин хлебных крошек в WordPress — плагин Breadcrumb NavXT. Он скачивается в панели управления WordPress. Чтобы Breadcrumb NavXT заработал после установки и активации, необходимо вставить код вызова плагина в нужные шаблоны WordPress:
<div class="breadcrumb"> 
<?php 
if(function_exists('bcn_display')) 
{ 
bcn_display(); 
} 
?> 
</div> 
Затем можно задать нужные параметры плагина в настройках. На вкладке «Основное» можно изменить знак распределителя, убрать или добавить ссылку на главную и текущую страницу, настроить форматы строк с помощью шаблонов.

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

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

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

Итоги

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

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

Советы:

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

Сверстать хлебные крошки можно самостоятельно или с помощью готовых расширений. Если вы используете CMS, второй вариант будет гораздо проще и дешевле, поскольку настроить хлебные крошки WordPress без плагина можно лишь обладая навыками разработки.
Эта статья — часть модуля «Список задач» в Serpstat
«Список задач» в Serpstat
«Список задач» — готовый to-do лист, который поможет вести учет
о выполнении работ по конкретному проекту. Инструмент содержит готовые шаблоны с обширным списком параметров по развитию проекта, к которым также можно добавлять собственные пункты.
Начать работу со «Списком задач»

Сэкономьте время на изучении Serpstat

Хотите получить персональную демонстрацию сервиса, тестовый период или эффективные кейсы использования Serpstat?

Оставьте заявку и мы свяжемся с вами ;)

Оцените статью по 5-бальной шкале

4 из 5 на основе 9 оценок
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.