Starting a new project?
получить консультацию
Оставьте свои контактные данные, наш менеджер перезвонит вам.
Спасибо! Скоро с Вами свяжется наш менеджер.
Спасибо! Скоро с Вами свяжется наш менеджер.
| 1. Структура хлебных крошек |
| 2. Задачи хлебных крошек |
| 3. Требования к хлебным крошкам |
| 4. Как хлебные крошки прописать на сайте |
Что такое хлебные крошки и почему они должны быть на сайте? Разъясняем все от и до начинающим разбираться с SEO.
Хлебные крошки (breadcrumbs) - цепочка, которая указывает путь пользователя от Главной страницы до текущей.
Хлебные крошки простыми словами - аналог пути в Windows:
Рис. 1 - Крошки в Windows
Как они выглядят на сайтах:
Рис. 2 - На сайте ITForce
Типичная структура крошек:
Главная - Раздел - Подраздел - Текущая страница
Разделяют 4 вида хлебных крошек.
Линейный:
Рис. 3 — Линейный тип структуры
На рисунке 4 уровня вложенности:
Вариант с кнопкой Назад:
Рис. 4 — Кнопка Назад в цепочке
Внедрена и линейная структура, и кнопка Назад.
Выпадающее меню:
Рис. 5 — Выпадающее меню
Удобство подобной реализации в том, что пользователь может перейти не только в раздел выше, но и любой другой подраздел сайта.
Динамический:
Когда один и тот же товар находится в разных подкатегориях. Обычно это раздел Распродажа и родительская категория товара.
Рис. 6 — Динамические
Суть динамических крошек в том, что они отображают вложенность в зависимости от того, как товар нашел пользователь. Поэтому динамические крошки применяют чаще всего в интернет-магазинах, когда нужно один и тот же товар добавить в разные категории.
Первая — вы всегда знаете, в каком разделе или странице сайта находитесь. Это способствует росту юзабилити площадки.
Вторая — цепочка навигации показывает структуру сайта (Главную страницу, Разделы и подразделы).
Третья — вы можете перепрыгнуть на любой другой уровень вложенности, не нажимая в браузере Назад (и не увеличивая % выходов со страницы, и показатель отказов). Так они увеличивают время нахождения на сайте.
Структура сайта:
Рис. 7 — Структура сайта ecommerce
Бонусы использования хлебных крошек со стороны SEO:
Рис. 8 — Сниппет в Google с микроразметкой
У Яндекс в приоритете ресурсы с четкой структурой, и цепочка формируется автоматически. Причем мы видим, что в Дескрипшн подтянулась и анкорная ссылка:
Рис. 9 — Сниппет в Яндекс
Название публикации берется из Title.
Прежде чем внедрять цепочку навигации, учтите следующее:
Для отображения крошек 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 к созданию хлебных крошек и внедряйте их на сайт.
Вы уже подписаны на нашу рассылку!
Подтвердите свой Email для завершения подписки.
Спасибо! Скоро с Вами свяжется наш менеджер.