Хлебные крошки
- Что такое хлебные крошки
- Зачем нужны хлебные крошки кроме навигации
- Виды хлебных крошек
- Как сделать хлебные крошки
- Правила создания хлебных крошек
Что такое хлебные крошки
Все знают историю, когда Гензель и Гретель из сказки братьев Гримм оставляли хлебные крошки, чтобы по ним вернуться домой. Увы, их склевали птицы, и найти дорогу героям не удалось. В SEO-оптимизации все по-другому.Понятие хлебные крошки на сайте произошло от английского Breadcrumbs и означает последовательность навигации, которая прослеживает путь посетителя от главной страницы до текущей.
Хлебные крошки помогают пользователю ориентироваться, в каком разделе сайта он сейчас находится.
В цепочке обычно прописывают путь: основная категория => подкатегория => страница, на которой в данный момент находится пользователь. И если вдруг захочется выбрать аналогичную категорию, то можно не возвращаться на главную и снова проделывать те же действия, а достаточно проваливаться в нужный раздел.
Навигация сайта – важный пользовательский параметр. Ее можно сравнить с указателем в крупных магазинах, который помогает ориентироваться в пространстве. Например, вам нужно купить свежие овощи в супермаркете. Вы всегда можете поднять голову и по табличкам определить, в каком направлении нужно двигаться в этот отдел.
Если покупателю удалось найти по навигации нужный отдел, то он комфортно и быстро совершает покупку и доволен результатом. Если же навигации нет, или она некорректна, то поиск нужных товаров затрудняется, можно потратить большое количество времени, чтобы найти нужный отдел или вовсе его не найти.
На сайте происходит то же самое. Пользователь обычно заходит с определенной целью, и, чтобы найти что-то конкретное, пользуется поиском или ищет нужную категорию. К сожалению, не все сайты обладают интуитивно понятной навигацией, что приводит к отказу и уходу пользователя со страницы на другие ресурсы.
Очень важно, чтобы навигация была полезной и помогала посетителям найти нужную информацию, а не вызывала досаду и раздражение.
Зачем нужны хлебные крошки кроме навигации
В 1995 году основатель компании Nielsen Norman Group Якоб Нильсен разработал десять принципов юзабилити, главный из которых: видимость статуса системы. Это означает, что пользователь всегда может понять, что происходит в системе в данный момент, в том числе в каком разделе сайта он находится прямо сейчас. В воплощении этого принципа и участвуют «хлебные крошки». Навигационная цепочка должна присутствовать всегда, независимо от типа сайта, будь то интернет-магазин или информационный сайт, корпоративный или мультилендинг.Для обеспечения удобства пользователя «хлебные крошки» берут на себя следующие задачи:
- Указывают пользователю, в каком разделе сайта он находится в конкретный момент.
- Дают представление о структуре ресурса.
- Позволяют быстрое перемещение на более высокий уровень вложенности, не используя кнопку «Назад» в браузере.
- является естественным элементом перелинковки страниц;
- положительно влияет на поведенческую статистику (время на сайте и глубину просмотра) за счет понятной навигации;
- при условии настроенной микроразметки упрощает внешний вид и повышает кликабельность сниппета в поиске.
Виды хлебных крошек
- Динамические хлебные крошки. Рассмотрим ситуацию, когда пользователь увидел на главной странице раздел со специальными предложениями и далее оттуда перешел к товару. В карточке товара в хлебных крошках отобразится именно этот путь от страницы со спецпредложениями к товару. А если пользователь воспользуется функцией поиска на сайте этого же товара, то на странице отобразится путь от главной страницы к категории, которой этот товар принадлежит (либо к марке). Этим и характеризуются динамические хлебные крошки – отображают сам путь пользователя, а не иерархию разделов и страниц.
- Хлебные крошки с выпадающим списком. Когда пользователь наводит курсор на подраздел, то отображается список с другими подразделами сайта. Это обеспечивают хлебные крошки. Данная функция призвана создать в первую очередь комфорт и удобство посетителя – ему достаточно кликнуть в выпадающем списке на нужную страницу, а не возвращаться на главную или подраздел выше, чтобы выбрать другую категорию.
- Обратные хлебные крошки. Такой вид предусматривает только кнопку «назад» на странице товара, но в более широком применении. Например, если на странице поиска посетитель использовал фильтр, то при нажатии кнопки «назад» фильтрация не сбросится.
Как сделать хлебные крошки
- Микроразметка для хлебных крошек в сниппете Для отображения навигационной цепочки в сниппете нужно обозначить хлебные крошки соответствующим видом разметки согласно стандарту Schema.org. Его поддерживают самые распространенные поисковики: Google, Yahoo! и Bing.
- Создание хлебных крошек для WordPress Можно использовать специальные плагины (Breadcrumb NavXT, SEO by Yoast) или настроить хлебные крошки самостоятельно.
- Как сделать с плагином
- Без плагина
- Добавляем хлебные крошки для Joomla В Joomla предусмотрен специальный модуль, который работает над отображением хлебных крошек — Навигатор сайта (mod_breadcrumbs). Приводим путь к нему: Панель управления — Расширения — Менеджер модулей.
- Теги HTML Для тех, кому не подходят варианты WordPress или Joomla есть и ручной вариант создания хлебных крошек – с помощью обычных тегов HTML:
- Не создавайте хлебные крошки на главной странице. Иначе она будет ссылаться на саму себя, а это вредит оптимизации и выглядит по меньшей мере странно. То же самое и в навигационной цепочке – она не должна содержать ссылку на страницу, на которой находится пользователь. Эти нюансы можно отметить в настройках плагинов хлебных крошек.
- Размещайте их в интуитивно понятном месте для пользователя. Обычно это делают под меню сайта. Но бывают случаи, когда хлебные крошки дублируют и внизу страницы для удобства в пользовании ресурсом (нажав несколько раз «Показать еще» пользователь может легко вернуться вверх страницы.
- Не забывайте про микроразметку (обозначение контента соответствующими HTML-тегами), чтобы поисковые системы могли считать нужную информацию с вашего сайта и использовать ее для сниппетов. Это делается, чтобы поисковые роботы распознавали, что является логотипом, где указана стоимость и какие элементы отвечают за хлебные крошки на вашем сайте.
Рекомендуем применять форматы Microdata и RDFa для оформления хлебных крошек.
Подробную инструкцию по разметке можно найти в справочниках Google. Не забудьте проверить корректность оформления микроразметки с помощью специального инструмента валидности – следует избегать ошибок. Для Google воспользуйтесь инструментом проверки структурированных данных.
Хлебные крошки на сайт удобно добавлять при помощи плагинов, которые существуют для всех распространённых CMS.
Сам плагин доступен бесплатно для скачивания, при этом версия WordPress должна быть не ниже версии 3.0, а хостинг поддерживается PHP5.
Добавить код хлебных крошек нужно в файл single.php (для всех записей), файл page.php (для статических страниц), category.php (для всех рубрик) или в файл header.php (чтобы показать везде).
Приводим пример кода для добавления:
<div class="breadcrumb">
<?php
if(function_exists('bcn_display'))
{
bcn_display();
}
?>
</div>
После этого в меню BreadcrumbNavXT (заходим через административную панель WordPress) можно задать значок разделителя между крошками, настроить ссылки и отредактировать другие опции.
Для начала ищем файл functions.php и вставляем в него такой код:
function the_breadcrumb() {
echo '<div id="breadcrumb"><ul><li><a href="/">Home</a></li><li>></li>';
if ( is_category() || is_single() ) {
$cats = get_the_category();
$cat = $cats[0];
echo '<li><a href="'.get_category_link($cat->term_id).'">'.$cat->name.'</a></li><li>></li>';
}
if(is_single()){
echo '<li>';
the_title();
echo '</li>';
}
if(is_page()){
echo '<li>';
the_title();
echo '</li>';
}
echo '</ul><div class="clear"></div></div>';
}
Критично! Не вставляйте эту функцию внутри другой функции, чтобы не было конфликта.
Далее для отображения хлебных крошек на сайте нужно разместить код «вызова хлебных крошек» в те места, где они предполагаются.
<?php the_breadcrumb(); ?>
В целом, это все, но можно доработать внешний вид и поэкспериментировать с дизайном хлебных крошек. Для этого нужно отредактировать файл style.css в части идентификатора id=”breadcrumbs”.
Пробуйте разные варианты! Положительный момент отсутствия плагина заключается в том, что сайт будет быстрее загружаться и работать.
Функция модуля навигатора позволяет посетителю сайта понять, где он находится и при желании вернуться обратно.
В настройках модуля можно сделать индивидуальную настройку. Для этого следует выбрать символ для разделителя крошек и указать название для главной страницы и деталях отображения навигационной цепочки.
Плагины и модули для хлебных крошек есть в любых CMS, и это доказывает значимость данного вида навигации.
<a href="https://sait/glavnaia/">Главная</a> — <a href="https:// sait/glavnaia/razdel/">Название раздела</a> — <a href="https:// sait/glavnaia/razdel/podrazdel/">Подраздел</a>
Данный код нужно руками проставить на всех страницах.