В статье:
- Что такое хлебные крошки
- Зачем нужны хлебные крошки: юзабилити и SEO
- Каким сайтам нужны хлебные крошки
- Виды хлебных крошек
- Как добавить разметку с хлебными крошками на сайт
- Как проверить правильность настройки
- Автоматизация: плагины для разных CMS
- Бонус: фишка для повышения CTR в выдаче
- Подводим итоги
В детской сказке «Гензель и Гретель» по пути в лес брат и сестра крошили хлеб, чтобы по крошкам найти дорогу домой. Отсюда свое название получили «хлебные крошки» на сайте — они помогают пользователям ориентироваться в иерархии страниц. В сказке крошки склевали птицы, зато на сайте путь от главной до искомой страницы будет надежным.
Разберемся, каким сайтам нужна такая разметка и как ее настроить правильно.
Что такое хлебные крошки на сайте и как они выглядят
Хлебные крошки в SEO (Breadcrumbs) — это навигационная цепочка, показывающая место страницы в иерархии сайта. Она нужна, чтобы пользователь мог быстро перейти на главную, в предыдущий раздел или в корневой каталог. Как они выглядят на странице:
Правильно размеченные хлебные крошки могут попасть в сниппет сайта в выдаче Яндекса и Google. На сниппете вместо обычной ссылки отобразится навигационная цепочка:
Отображаемая цепочка в сниппете может меняться в зависимости от пользовательского запроса, но с помощью крошек поисковику будет проще определить категорию контента для поискового запроса.
Зачем нужны хлебные крошки: юзабилити и SEO
В 1995 году Якоб Нильсен определил 10 ключевых принципов удобства использования сайтов. Первый из них — «Видимость статуса системы» — подчеркивает важность понимания пользователем происходящего на сайте. Пользователь всегда должен знать, где он находится. Хлебные крошки как раз и служат этой цели.
Такая навигационная цепочка полезна для любых сайтов со сложной структурой: информационных порталов, интернет-магазинов, сайтов компаний и сервисов. Везде, где есть разделы и подразделы, хлебные крошки улучшают навигацию.
С точки зрения удобства использования, хлебные крошки выполняют три важные функции:
Показывают текущее местоположение пользователя на сайте.
Наглядно представляют структуру сайта.
Позволяют быстро вернуться в родительский раздел, не используя кнопку «Назад» в браузере.
Кроме улучшения навигации, хлебные крошки полезны для SEO:
Органично перелинковывают страницы. Ссылки в хлебных крошках участвуют во внутренней перелинковке, так что помогают выстроить поток ссылочного веса по сайту.
Улучшают поведенческие факторы (время на сайте и глубину просмотра). Хлебные крошки делают страницы удобнее для пользователей, с ними проще ориентироваться в разделах и переходить к общим категориям.
При правильной настройке микроразметки делают сниппеты в Google более привлекательными и информативными. В сниппете благодаря крошкам появляются понятные названия категорий. Это может повысить кликабельность сниппета. Пользователи могут сразу перейти на нужный раздел прямо из выдачи.
Каким сайтам нужны хлебные крошки
В хлебных крошках нет нужды, если сайт имеет простую линейную структуру без уровней вложенности. Тогда в крошках будет нечего отображать — там будет только главная и искомая страница.
Если у сайта больше двух уровней вложенности, то хлебные крошки могут помочь в навигации на сайте. Крошки точно нужны, чтобы ориентироваться в каталогах интернет-магазинов, разделах порталов, форумов, блогов с разными рубриками.
Виды хлебных крошек
Есть несколько видов хлебных крошек. Каждый из них обладает уникальными особенностями организации и представления.
Динамические
Динамические хлебные крошки формируются автоматически, отображая путь пользователя по сайту. Для их реализации используются специальные плагины, такие как Breadcrumbs, Breadcrumbs NavXT и Yoast SEO для WordPress.
Цепочка навигации представляет собой линейный маршрут от главной страницы до текущего местоположения пользователя. Например:
Главная > Категория > Подкатегория > Текущая страница
Чтобы перейти на более высокий уровень структуры, нужно просто кликнуть по названию нужной страницы.
Если цепочка получается слишком длинной, ее можно сократить: удалить очевидные подразделы или начать отсчет не с главной страницы, а с каталога или категории.
С выпадающим списком
Хлебные крошки с выпадающим списком используют на сайтах с большим количеством категорий. Пользователь может самостоятельно выбирать необходимый уровень вложенности, сворачивая и разворачивая разделы и подразделы.
Обычно это выглядит так:
Иногда элементы навигационной цепочки дополняются выпадающими списками, чтобы пользователь мог быстро выбрать нужный раздел.
Обратные
Обратные хлебные крошки показывают пройденный пользователем путь до текущей страницы. Навигационная цепочка строится от текущей страницы вверх по иерархии. Например:
Название товара > Подкатегория товаров > Категория товаров > Главная
В некоторых случаях обратные хлебные крошки сделаны в виде кнопки «Назад». Она сохраняет историю посещений с учетом всех фильтров и позволяет вернуться на предыдущую страницу.
Атрибутивные
Атрибутивные хлебные крошки используются в интернет-магазинах и онлайн-каталогах. Содержание и путь страницы формируются на основе выбранных пользователем свойств и фильтров.
Добавляя и удаляя свойства, пользователь создает уникальный путь к странице с товарами. Это улучшает удобство использования:
пользователь настраивает выдачу товаров с помощью фильтров;
просматривает подробную информацию о товаре в его карточке;
возвращается к каталогу с сохраненными фильтрами.
Как добавить разметку хлебных крошек на сайт
Для настройки используют разметку Breadcrumbs. Благодаря разметке поисковикам проще считывать информацию о странице.
Советы для создания правильных хлебных крошек
На главной крошки не нужны.
Главная страница — стартовая, в цепочке навигации на главной просто нечего отображать.
Ссылка на страницу, где находится пользователь, не нужна.
Если в крошках будет кликабельная ссылка на текущую страницу, образуется циклическая ссылка. Страница будет ссылаться сама на себя, это бессмысленно и может ухудшить ранжирование сайта.
Есть два варианта оформления хлебных крошек, чтобы избежать циклической ссылки. Название текущей страницы делают некликабельным, как на сайте apteka.ru:
Второй вариант — текущую страницу убирают из цепочки. В этом примере с lamoda.ru крошки заканчиваются на разделе «Декор настольный», это предыдущая страница для товара Philippi.
Привычное место для хлебных крошек — верхняя часть страницы.
Так сложилось, что навигационную цепочку размещают под меню над информацией о товаре или над заголовком материала. В этом случае оригинальность не нужна, сделайте так, как пользователям привычно и удобно.
Замените первую ссылку на ключ или бренд.
Специалист по оптимизации Сергей Кокшаров (Devaka) советует использовать потенциал первой ссылки в хлебных крошках: вместо слова «Главная» писать основное ключевое слово сайта или название бренда, если один короткий ключ подобрать не получается.
Вместо крошек вида «Главная > Продукция > Пиломатериалы > Брус» сделать «Строительные материалы > Продукция > Пиломатериалы > Брус».
Как настроить разметку BreadcrumbList на сайте
Яндекс формирует крошки по своему алгоритму. Для Google настроить разметку можно вручную с помощью разметки Schema.org.
Еще по теме:
Как внедрить микроразметку информации Schema.Org на сайт
Разметка «BreadcrumbList» — разновидность «ItemList». Она предполагает использование форматов Microdata и RDFa.
Пример разметки «BreadcrumbList» через Microdata:
<ol itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
<a itemprop="item" href="/">
<span itemprop="name">Главная</span></a>
<meta itemprop="position" content="1″ />
</li>
</li><li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
<a itemprop="item" href="/catalog/">
<span itemprop="name">Каталог</span></a>
<meta itemprop="position" content="2″ />
</li>
</li><li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
<a itemprop="item" href="/catalog/woman/">
<span itemprop="name">Женская одежда</span></a>
<meta itemprop="position" content="3″ />
</li>
</li>
<a itemprop="item" href=" /catalog/woman/dress/">
<span itemprop="name">Платья</span></a>
<meta itemprop="position" content="4″ />
</li>
</ol>Типичная ошибка разметки хлебных крошек
Пользователи часто сталкиваются с ошибкой «Отсутствует поле "id"». Ошибка обычно связана с тем, что пользователи указывают в разметке последним пунктом текущую страницу, которая, логично, не имеет ссылки, чтобы не ссылаться сама на себя. Но все item — это ссылки, так что последний пункт тоже должен быть ссылкой, иначе появляется ошибка.
Что делать: если это активная текущая страница, то для нее не нужна ссылка, ее вообще не нужно вставлять в разметку. Последний пункт хлебных крошек должен вести на предыдущий раздел каталога.
Как проверить разметку хлебных крошек
Проверить внедрение микроразметки можно с помощью инструментов от ПС: инструмента Google и валидатора Яндекса.
В обновленной версии Google Search Console внедрили отчет «Breadcrumbs», в русской версии он называется «Строки навигации» и находится в категории «Улучшения». Отчет показывает ошибки, связанные с отображением микроразметки в выдаче Google.
Плагины разметки для разных CMS
Добавить навигационную цепочку в сниппет можно при помощи специальных плагинов для CMS.
Wordpress
Самым популярным плагином хлебных крошек для WordPress считается Breadcrumb NavXT. Есть и другие: Instant Breadcrumbs, Flexy Breadcrumb, Surbma | Yoast SEO Breadcrumb Shortcode, Breadcrumb, breadcrumb simple и еще множество.
Код разметки хлебных крошек нужно поместить в файлы:
показать крошки везде — в файл header.php;
для всех записей — в файл single.php;
для статистических страниц — в файл page.php;
для всех рубрик — в файл category.php.
В меню плагинов можно настроить ссылки, задать значок разделителя для ссылок.
Joomla
Добавить хлебные крошки в CMS Joomla можно с помощью модуля «Навигатор сайта», тип модуля — «mod_breadcrumbs». Он находится в Панели управления > Расширения > Менеджер модулей.
Настройте модуль под свой сайт и укажите:
позицию модуля, в которой он будет выводиться на странице (отображение позиций включается так: Расширения — Менеджер шаблонов — Настройки — опция Просмотр позиций модулей — Включено);
название главной страницы;
разделитель текста для элементов навигации (обычно «/»).
На главной странице хлебные крошки отображать не нужно, поэтому на вкладке «Привязка к пунктам меню» выберите опцию «На всех страницах, кроме» и отметьте пункт с домашней страницей.
Opencart
Хлебные крошки для движка Opencart устанавливают с помощью модуля. Под разные версии CMS есть разные модули: «Умные хлебные крошки» для Opencart 3.0, Правильные хлебные крошки для Opencart 2.x. Есть бесплатный модификатор, который делает неактивной ссылку на текущую страницу в хлебных крошках.
Webasyst
К этому движку для интернет-магазинов есть два платных плагина — «Навигация в хлебных крошках» и «Динамические хлебные крошки» с простыми настройками.
1С Битрикс
Разметка крошек обычно находится в комплекте решений для SEO, но есть и отдельный компонент Умные хлебные крошки. Его можно использовать в каталоге или в многоуровневых разделах, которые связаны с инфоблоками.
Moguta
Для этого движка есть бесплатный плагин Хлебные крошки. Для установки в Панели управления сайтом зайдите в раздел Маркетплейс, там найдите бесплатный плагин и запустите установку.
Проверьте правильность настройки с помощью валидатора Яндекса или Google.
Бонус: фишка для повышения CTR в выдаче с помощью хлебных крошек
Один из способов выделить сниппет — добавить эмодзи. Сниппет с яркими элементами может с большей вероятностью привлечь внимание пользователей. На отношение поисковых систем к сайту они не влияют.
Читатель блога PR-CY и оптимизатор Витя Смертный поделился своим опытом работы с сайтом 100.ks.ua: чтобы сделать сниппет в выдаче заметнее, он добавил пару тематических эмодзи в описание и хлебные крошки.
После добавления эмодзи сниппет показал рост кликабельности. Он стал заметнее на белом фоне выдачи.
Некоторые эмодзи могут неправильно отображаться в выдаче, но увидеть это можно только по факту. Тогда нужно просто подобрать другой элемент.
Витя заметил, что в Google бывают внезапные смены отображения: красивый значок может начать отображаться как монохромный символ, а потом вернуться к первоначальному виду. Такое периодически случается, нужно быть готовым к этой погрешности.
Эмодзи и смайлы можно брать из каталогов, к примеру, этого. Если в поле для копирования символ не отображается, лучше выбрать другой: велика вероятность, что он не отобразится и в сниппете.
На своем опыте оптимизатор заметил, что в некоторых тематиках красный цвет работает лучше. Это справедливо для автомобильного сегмента: если в хлебные крошки поставить зеленую машину, то CTR вырастет, но незначительно, а если красную, то вырастет намного больше.
Некоторые красные эмодзи напротив вредят кликабельности. Возможно, это связано с тем, что красный часто используют для обозначения ошибок и опасности.
С эмодзи важно не переборщить, такой сниппет выглядит пестрым и перегруженным:
Советуем подбирать эмодзи по ассоциациям под вашу тематику, чтобы пользователь сразу распознавал, в какой сфере работает сайт. И важно тестировать значки разного вида и цвета, чтобы найти те, которые будут привлекать.
Подводим итоги
Хлебные крошки — это отличный инструмент навигации, который делает сайт удобнее и улучшает его SEO. Они помогают посетителям легко находить нужный путь на сайте и быстро переходить в нужные разделы, что позитивно сказывается на поведении пользователей и, в конечном счете, на конверсии.
Но неправильная реализация хлебных крошек может привести и к обратному эффекту. Ошибки чаще всего возникают при использовании конструкторов сайтов или CMS с открытым исходным кодом, если не уделить должного внимания контролю результата.
Рекомендуем размещать крошки на страницы и в сниппет с помощью разметки, так ссылка в выдаче будет смотреться нагляднее.
Обновила Елена Жмурина
