Что такое хлебные крошки и почему они должны быть на сайте? Разъясняем все от и до начинающим разбираться с SEO.
Хлебные крошки (breadcrumbs) – цепочка, которая указывает путь пользователя от Главной страницы до текущей.
Хлебные крошки простыми словами – аналог пути в Windows:
Рис. 1 – Крошки в Windows
Как они выглядят на сайтах:
Рис. 2 – На сайте ITForce
Типичная структура крошек:
Главная – Раздел – Подраздел – Текущая страница
Разделяют 4 вида хлебных крошек.
Линейный:
Рис. 3 – Линейный тип структуры
На рисунке 4 уровня вложенности:
Вариант с кнопкой Назад:
Рис. 4 – Кнопка Назад в цепочке
Внедрена и линейная структура, и кнопка Назад.
Выпадающее меню:
Рис. 5 – Выпадающее меню
Удобство подобной реализации в том, что пользователь может перейти не только в раздел выше, но и любой другой подраздел сайта.
Динамический:
Когда один и тот же товар находится в разных подкатегориях. Обычно это раздел Распродажа и родительская категория товара.
Рис. 6 – Динамические
Суть динамических крошек в том, что они отображают вложенность в зависимости от того, как товар нашел пользователь. Поэтому динамические крошки применяют чаще всего в интернет-магазинах, когда нужно один и тот же товар добавить в разные категории.
Первая – вы всегда знаете, в каком разделе или странице сайта находитесь. Это способствует росту юзабилити площадки.
Вторая – цепочка навигации показывает структуру сайта (Главную страницу, Разделы и подразделы).
Третья – вы можете перепрыгнуть на любой другой уровень вложенности, не нажимая в браузере Назад (и не увеличивая % выходов со страницы, и показатель отказов). Так они увеличивают время нахождения на сайте.
Структура сайта:
Рис. 7 – Структура сайта ecommerce
Бонусы использования хлебных крошек со стороны SEO:
Рис. 8 – Сниппет в Google с микроразметкой
Прежде чем внедрять цепочку навигации, учтите следующее:
Для отображения крошек Google рекомендует воспользоваться структурированными данными (микроразметкой).
Для CMS WordPress.
Есть много плагинов, которые уже содержат в своем функционале опцию включения хлебных крошек. Например:
Для включения цепочки навигации заходите в:
Рис. 10 – Yoast SEO
Рис. 11 – Yoast SEO
В файл functions.php добавляете функцию get_breadcrumb(). Далее в single.php прописываете функцию:
<div class=”breadcrumb”><?php get_breadcrumb(); ?></div>
Так вы вносите крошки во все записи сайта. Для страниц код добавляется в page.php над заголовком страницы, для рубрик – в category.php, и в header.php в конце файла.
Проверить, правильно ли настроена микроразметка крошек, можно в валидаторе Google. Вот что показала проверка сайта нашей компании:
Рис. 12 – Проверка в валидаторе Гугл
Bitrix.
В header.php (файл шаблона сайта) размещаете код вызова элемента bitrix.breadcrumb:
<?$APPLICATION->IncludeComponent(“bitrix:breadcrumb”,””, Array(
“START_FROM” => “0” – показываете уровень вложенности раздела, с которого нужно начинать цепочку;
“PATH” => “” – путь, по которому располагается цепочка. Остается пустым, если нужно, чтоб цепочка строилась для текущего пути.
“SITE_ID” => “s1” – ID сайта, для которого создается цепочка навигации
));
?>
Joomla.
Отображение цепочки активируется в панели управления в Менеджере модулей:
Чтоб не показывать цепочку на Главной, зайдите во вкладку “Привязка к пунктам меню”, выберите опцию “На всех страницах, кроме указанных”, и отметьте пункт меню Главной.
Также их можно внести вручную: добавьте код в header.php или в раздел functions.php.
Opencart.
Есть несколько модулей для установки:
Учитывайте требования из п. 3 к созданию хлебных крошек и внедряйте их на сайт.
