Какими должны быть хлебные крошки и как их добавить на сайт
Какими должны быть хлебные крошки
Хлебные крошки позволяют переходить на любую родительскую страницу в один клик. Обычно навигационная строка необходима сайтам с уровнем вложенности от трех и выше. Признак качественных хлебных крошек: полное соответствие дизайну сайта и кликабельные названия всех страниц, кроме текущей.
Виды хлебных крошек
Линейные — Выстраивается весь маршрут пользователя от главной страницы до текущей. Навигация входит в описание (description), благодаря чему структуру сайта можно понять еще со страницы выдачи. Это самый простой и популярный вид крошек, который видели все.
Линейные крошки особенно полезны в тех случаях, когда пользователь попадает в карточку товара из поисковой выдачи и хочет перейти к более общим рубрикам, продолжив поиск по сайту. Такой подход помогает не потерять потенциальных клиентов и сохранить глубину просмотра сайта. Все эти преимущества приводят к улучшению поведенческих факторов и более высоким позициям в выдаче.
Обратные — Вместо полного маршрута на страницу добавляется кнопка «Назад». Фактически она дублирует аналогичную функцию браузера, но делает ее удобнее и вариативнее.
Кнопка подойдет в первую очередь интернет-магазинам и другим сайтам с множеством фильтров. При нажатии «Назад» в браузере фильтры обычно сбрасываются, а значит пользователю придется настраивать их заново — или перейти на более удобный сайт. Функция «Назад» решает этот вопрос, возвращая его на предыдущую страницу со всеми выбранными настройками навигации и поиска.
Атрибутивные — Хлебные крошки формируются с помощью группировки тегов, категорий и подразделов, к которым относится страница. Подходит интернет-магазинам с большим количеством товаров (можно выбрать все холодильники определенной марки, цвета или размера) или информационным сайтам (можно посмотреть все новости о конкретном человеке, рубрике или стране).
Комбинированные — Для повышения удобства сайта и поведенческих факторов пользователей интернет-магазинам стоит задуматься об использовании как минимум двух типов хлебных крошек.
К такому выводу пришел Baymard Institute — институт, изучающий веб-юзабилити. UX-дизайнеры проанализировали 50 крупнейших интернет-магазинов и обнаружили, что 45% из них используют только один тип крошек, а 23% — вообще не имеют подобной навигации, теряя потенциальных клиентов.
Комбинированные хлебные крошки полезны в первую очередь потому, что у каждого их вида есть свои конкретные задачи. Один отвечает за структуру сайта, другой — за историю просмотра. Соединив все вместе, получаем более удобную навигацию и более счастливого пользователя, а значит — высшие позиции в выдаче и увеличение продаж.
Построенные по принципу истории переходов — Навигация воспроизводит всю историю переходов пользователя по сайту. Это может быть удобно при долгом серфинге в пределах одного ресурса (список просмотренных страниц сохранится в оригинальном порядке), но неудобно при переходе на конкретную страницу из поисковика (история отсутствует).
Особенности создания хлебных крошек
При добавлении хлебных крошек нужно помнить: они создаются для людей. Главная цель — облегчить навигацию по сайту. Общие правила, к которым стоит прислушаться при настройке:
- Навигационная строка органичнее всего выглядит в верхней части страницы. Оформляйте ее в стиле дизайна сайта, она должна не выглядеть инородным объектом, а ненавязчиво дополнять страницу.
- На главной странице крошек быть не должно. Во-первых, потому что именно с главной начинается структура сайта. Во-вторых, циклические ссылки, направляющие пользователя на страницу, с которой он пришел, — один из факторов, ухудшающих ранжирование сайта.
- Название текущей страницы не должно быть кликабельным, его стоит написать в виде текста. Причина — все те же циклические ссылки и отношение поисковых систем к ним.
Как создать хлебные крошки в 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.com