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

Нажав кнопку "Принять и продолжить", вы соглашаетесь с Политики конфиденциальности

Принять и продолжить

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

Отменить
2526
How-to Читать 8 минут 2 ноября 2018

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

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

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

Хлебные крошки (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 из 5 на основе 4 оценок
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.
Хотите узнать новые фишки по интернет-маркетингу?
Подпишитесь на нашу рассылку — только полезные статьи, реальные кейсы и новости Serpstat раз в неделю.

Поделитесь статьей с вашими друзьями

Войти Регистрация

Вы исчерпали лимит запросов.

Или email
Забыли пароль?
Или email
Back To Login

Не волнуйтесь! Напишите свой электронный адрес и мы пришлем вам новый пароль.

Вы уверены?

Awesome!

To complete your registration you need to enter your phone number

Назад

Мы отправили код подтверждения на ваш номер телефона

Your phone Resend code Осталось запросов

Что-то пошло не так.

Свяжитесь с нашей службой поддержки
Или подтвердите регистрацию с помощью Телеграм бота Перейдите по этой ссылке
Выберите один из проектов

Знакомство с сервисом

Ознакомьтесь с основными возможностями Serpstat удобным способом!

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

Имя

Email

Телефон

Будем рады вашему комментарию
Увеличить лимиты

Улучшить тариф

Экспорт недоступен для вашего тарифного плана. Вам необходимо улучшить свой тариф до Lite или выше, чтобы получить доступ к инструменту Подробнее

Зарегистрироваться

Спасибо, мы с вами свяжемся в ближайшее время

Пригласить
Просмотр Редактирование

E-mail
Сообщение
необязательно
E-mail
Сообщение
необязательно

У вас закончились лимиты

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

Я хочу больше лимитов