Хлебные крошки – что это и как сделать их на сайте

Вместе с Мартой Гофман, SEO-специалистом digital-агентства «Директ Лайн», команда Топвизор-Журнала разберется, что такое «хлебные крошки», зачем они нужны в SEO и какие бывают.

Также покажем, как сделать «хлебные крошки» на сайте вручную и с помощью плагинов для WordPress, Joomla, Opencart и других CMS. Расскажем, как проверить правильность настройки навигации и какие ошибки часто допускают в «хлебных крошках».

Что такое «хлебные крошки» (ХК)

«Хлебные крошки» (от англ. breadcrumbs) – это средство навигации на сайте. Оно представляет собой цепочку ссылок, по которой движется пользователь. Цепочка начинается на главной странице сайта и заканчивается в том разделе, в котором на данный момент находится пользователь. По цепочке пользователь может вернуться обратно на любой шаг своего пути.

«Хлебные крошки» обычно располагают в верхней части страницы, под основной навигацией сайта. Выглядят они как горизонтальный список названий страниц сайта, внутри которых зашиты ссылки.

«Хлебные крошки» на сайте ozon.ru

Также «хлебные крошки» можно встретить в сниппетах. Например, в Яндексе они располагаются под заголовком:

«Хлебные крошки» в сниппете в поисковой выдаче

А в Google – над заголовком:

«Хлебные крошки» в сниппете в поисковой выдаче Google

Зачем «хлебные крошки» в SEO

Они выполняют две основные функции: улучшение пользовательского опыта и положительное влияние на SEO.

С точки зрения пользователя «крошки» подсказывают ему, в какой части сайта он находится, делают понятной структуру, помогают перемещаться между более высокими или более низкими уровнями вложенности в один клик. При этом не нужно нажимать кнопки «назад», «вперед» в браузере.

«Хлебные крошки» участвуют и в SEO-продвижении:

• Улучшают поведенческие метрики

«Хлебные крошки» помогают пользователю проще ориентироваться на сайте, за счет чего увеличиваются показатели поведенческих метрик, например время, проведенное на сайте, или глубина просмотра.

• Упрощают работу поисковым роботам

Роботам поисковых систем Яндекса и Google будет легче понять структуру и содержание страниц сайта, а в процессе сканирования – проще переходить к странице на уровень выше.

• Формируют правильную перелинковку

Такая перелинковка увеличивает ссылочный вес верхних уровней за счет нижних. Таким образом поисковые роботы понимают, что чем больше вес страницы, тем она важнее.

• Создают привлекательный сниппет

«Хлебные крошки» делают сниппет человекочитаемым, а за счет узнаваемых ключевых слов повышают CTR – количество переходов из поисковой выдачи.

Пример сниппета в выдаче Google

Каким сайтам необходимы

В первую очередь «хлебные крошки» нужны сайтам, где уровень вложенности страниц более двух. Это особенно касается сайтов со сложной структурой и множеством категорий, например интернет-магазинов, где в каждой категории товаров находятся десятки или сотни отдельных страниц – карточек товаров.

«Хлебные крошки» на сайте mybook.ru

«Хлебные крошки» могут также использоваться на информационных сайтах – форумах, порталах, блогах.

Можно не создавать «хлебные крошки» для одноуровневых (одностраничных), сайтов с линейной структурой, без уровней вложенности. Для лендингов, например, где продается один товар или услуга, «хлебные крошки» не нужны:

Одностраничный сайт yakovenko-stroy.ru

Основные виды «хлебных крошек»

Навигационная цепочка может быть оформлена по-разному. Рассмотрим самые распространенные виды.

Линейные

Этот вид «хлебных крошек» очень распространен, так как является простым и удобным среди остальных способов навигации: он отражает путь от главной до текущей страницы.

Пример линейных «хлебных крошек» сайта teplodar.ru

С выпадающим списком

Этот способ навигации удобен тем, что при наведении курсора на раздел показывает список других категорий сайта. Благодаря этому пользователю не нужно будет возвращаться на главную страницу или на раздел выше, чтобы перейти к другому разделу.

«Хлебные крошки» с выпадающим списком интернет-магазина печей pechki66.ru

Динамические

Принцип таких «хлебных крошек» заключается в том, что их формирование происходит исходя из пути пользователя. Другими словами, в «крошках» отражается путь к разделу не через иерархию страниц, а так, как пользователь к нему дошел. Товар при этом может находиться в нескольких разделах сайта сразу.

Например, на сайте pichshop.ru есть категории товаров «Подарки сестре» и «Подарки подруге» – товар «экобутылка с фильтром» находится одновременно в двух этих категориях. Поэтому «хлебные крошки» до страницы этого товара будут выглядеть по-разному в зависимости от того, как мы попали на эту страницу.

Вот, например, мы пришли через раздел «Сестре»:

Динамические «хлебные крошки» на pichshop.ru

А теперь – через раздел «Подруге»:

Динамические «хлебные крошки» на pichshop.ru

Как создать «хлебные крошки»

Вручную

Вручную «хлебные крошки» прописываются через PHP-код – тут лучше воспользоваться помощью программиста.

Приводим усредненный алгоритм создания breadcrumbs:

1. Берем URL текущей страницы, где нужно отобразить «хлебные крошки», к примеру http://mysite.com/catalogue/svetilniki.

2. Разбираем его на части – каждая часть URL разделена слешем («/»). В нашем случае это:

• корень сайта: mysite.com;

• категория сайта: catalogue;

• объект категории: svetilniki.

То есть новые части добавляются в URL, когда мы движемся по сайту от главной страницы в категории и объекты категорий сайта.

3. Каждой части URL даем название элемента «хлебных крошек» и составляем для нее свой URL. Например, для части mysite.com в «крошках» можно дать название «Главная» с URL http://mysite.com. Для части catalogue элемент «крошек» может называться «Каталог» с URL http://mysite.com/catalogue/ – и так далее.

4. Записываем название элементов и их URL в отдельную конструкцию (массив) для передачи в HTML-шаблон.

5. Передаем полученные данные в HTML-шаблон и отображаем их там.

Далее нужно посмотреть, как отображаются «хлебные крошки» на сайте, перейдя по URL, где создавались «крошки».

Вот на что нужно обратить внимание при проверке:

• как выглядит цепочка: не наезжает ли одна ссылка на другую;

• правильно ли выстроена иерархия: за главной страницей идет категория сайта, затем объект категории, а не наоборот;

• корректные ли ссылки открываются при нажатии на каждый элемент крошек.

С помощью плагинов для CMS

Рассмотрим, как создать «хлебные крошки» с помощью дополнительных плагинов популярных CMS.

WordPress

Здесь обычно используют два плагина: Breadcrumb и YoastSEO. Первый заточен именно на создание «хлебных крошек». Второй ставится для SEO-оптимизации сайта в целом и содержит в себе настройку «хлебных крошек».

Через Breadcrumb:

1. Устанавливаем плагин. Сделать это можно прямо через административную панель WordPress. Для этого переходим в Плагины → Breadcrumb → нажимаем «Активировать».

Плагин Breadcrumb в WordPress

2. Переходим в раздел Breadcrumb – здесь настраивается отображение «хлебных крошек»:

Внутренние настройки плагина Breadcrumb

3. Переходим в Shortcodes и копируем PHP-функцию:

Раздел Shortcodes в плагине Breadcrumb

4. В административной панели нажимаем «Внешний вид» → «Редактор тем» → выбираем файл для вставки → вставляем под хедером → нажимаем «Обновить файл».

Редактор тем в WordPress

После обновления можно проверить, как выглядят «хлебные крошки» на сайте.

Теперь нужно настроить отображение ХК в поисковой выдаче. Для этого понадобится плагин YoastSEO. Пошагово:

1. В административной панели WordPress переходим во вкладку «SEO» → «Отображение в поисковой выдаче» → «Хлебные крошки» → переключаем в положение «Включено».

Подключение плагина YoastSEO в WordPress

2. Заполняем поля: указываем значок разделителя (»), отображение главной страницы в ХК, архивы, 404 страницы в ХК и другие параметры. Затем нажимаем «Сохранить изменения».

Сохранение настроек плагина YoastSEO

Но сейчас ХК не отобразятся на сайте, так как WordPress не знает, где их выводить.

3. Чтобы ХК отобразились на сайте, нужно скопировать код:

4. Идем во вкладку «Внешний вид» → «Редактор тем» → переходим в файл темы → ищем место, где нужно вывести ХК, например после тега H1 → вставляем код, который скопировали на предыдущем шаге:

Вставка кода в редактор тем WordPress

5. Нажимаем «Обновить файл». В итоге в поисковой выдаче у страницы появятся «хлебные крошки».

Joomla

«Хлебные крошки» в Joomla настраиваются через готовый модуль, который можно установить бесплатно через административную панель.

1. В административной панели Joomla заходим в Расширения → Модули → нажимаем кнопку «Создать новый»:

Управление модулями в Joomla

2. Выбираем модуль с названием «Навигатор сайта»:

Подключение модуля «Навигатор сайта»

3. Проходим поочередно все поля настроек «хлебных крошек» и указываем нужное. Рекомендуем сделать, как на скрине:

Настройки ХК через модуль «Навигатор сайта»

4. Сохраняем настройки и проверяем «хлебные крошки» на сайте.

Opencart

Для CMS Opencart навигационную цепочку создают через патч Fix Breadcrumbs, с помощью которого можно управлять «хлебными крошками» и не допускать циклических ссылок в меню навигации.

Патч «Fix Breadcrumbs» для Opencart

Как это сделать:

1. Скачиваем модуль, загрузится архив fix-breadcrumbs-3x.ocmod.zip.

2. Загружаем скачанный архив fix-breadcrumbs-3x.ocmod.zip в админку сайта через «Расширения» → «Установщик расширений».

3. Обновляем кеш модификаций (нажимаем кнопку «Обновить») в «Расширения» → «Модификации».

4. Обновляем кеш шаблона (theme cache) через «Панель инструментов» → «Настройки разработчика».

Теперь модуль будет убирать ссылку последнего уровня в «хлебных крошках».

Webasyst

Здесь плагины для создания «хлебных крошек» исключительно платные, но это оправдано удобством в настройке навигации и их функционалом.

Плагин «Навигация в „хлебных крошках“» от Webasyst

В плагинах доступны функции:

• вывод всплывающего меню при клике или при наведении;

• возможность редактирования стилей всплывающего меню;

• реализована микроразметка «хлебных крошек» (Schema.org);

• есть выбор разделителя;

• возможность задать иконку или изменить текст ссылки для главной страницы;

• и многое другое.

Как добавить ХК через плагин «Навигация в „хлебных крошках“»:

1. Оплачиваем и устанавливаем плагин (нужно быть авторизованным в системе Webasyst).

2. Чтобы настроить «хлебные крошки» в Webasyst, нужно учитывать особенности каждой отдельной темы дизайна. Подробная инструкция от разработчика для всех тем.

1С-Битрикс

В 1С-Битрикс нет отдельного плагина, который отвечает только за «хлебные крошки». По умолчанию в Битриксе используется механизм управления названиями пунктов навигационной цепочки через свойства разделов.

Заголовок раздела сайта задается в служебном файле .section.php.

Как настроить микроразметку «хлебных крошек»

Чтобы вывести «хлебные крошки» в поисковую выдачу, необходимо настроить специальную микроразметку.

Благодаря микроразметке «хлебные крошки» могут формироваться в расширенном сниппете в поисковых системах, что будет положительно влиять на CTR в выдаче. Кроме того, поисковым роботам будет проще ориентироваться в структуре сайта и индексировать его страницы.

Для отображения «хлебных крошек» в сниппетах Яндекса и Google рекомендуется использовать формат микроразметки Microdata или JSON-LD. Эти форматы подходят для обоих поисковых систем. Подробнее о создании микроразметки для поисковых систем можно почитать в справках Яндекса и Google.

Пример кода микроразметки в разделе сайта электроники: Роботы-пылесосы → Xiaomi

После добавления микроразметки в выдаче появится вот такой сниппет:

Пример «хлебных крошек» в сниппете

Как проверить правильность настройки

Проверить правильность настройки «хлебных крошек» можно специальным инструментом – валидатором schema.org от Google. С его помощью возможно проверить как часть кода, который еще никуда не вставлен, так и существующую микроразметку на сайте по URL.

Алгоритм проверки микроразметки:

1. Вставьте ссылку/фрагмент кода, который нужно проверить:

Проверка микроразметки по URL

Проверка микроразметки по фрагменту кода

2. Нажмите «Запустить тест».

3. После проверки валидатор выдаст отчет:

Отчет валидатора после проверки микроразметки

4. Результаты покажут наличие ошибок и предупреждений в разметке. В идеале их не должно быть.

Если после запуска теста валидатор показывает ошибки или предупреждения, то найти их можно в Google Search Console в разделе «Улучшения» → «Строки навигации»:

Раздел «Строки навигации» в Google Search Console

Как улучшить микроразметку

Расположите «хлебные крошки» в верхнем левом углу

Пользователи инстинктивно ищут «хлебные крошки» в верхнем левом углу страницы. Важно располагать навигацию на страницах в одном и том же месте, на виду. Так пользователь быстрее запомнит, куда нажимать, чтобы вернуться на предыдущие страницы.

Соблюдайте общую стилистику

Если на всем сайте используется минималистичный шрифт без засечек, а в «хлебных крошках» слишком вычурный декоративный, это будет смотреться странно и, скорее всего, будет отвлекать пользователя от остального контента на странице.

Хлебные крошки должны соответствовать общему стилю сайта. Универсальный вариант – использовать тот же шрифт, что и на всем сайте, а цвет взять более приглушенный, чем остальные цвета на сайте. Поэтому у большинства сайтов основной цвет шрифта – чёрный, а в «хлебных крошках» – серый.

Например:

«Хлебные крошки» на сайте zarina.ru

Сделайте шрифт «хлебных крошек» на 1–2 пикселя меньше основного

Навигация по «хлебным крошкам» не должна занимать слишком много места на странице. Обычно веб-дизайнеры делают «хлебные крошки» на 1–2 пикселя меньше остального текста на странице, чтобы они не отвлекали пользователя от основного контента.

Пример «хлебных крошек» с уменьшенным шрифтом на сайте lamoda.ru:

«Хлебные крошки» на сайте lamoda.ru

Тем не менее обращайте внимание на размер. Следите, чтобы шрифт был читаемый, но не слишком большой, иначе навигационная цепочка будет слишком длинной. «Хлебные крошки» должны занимать только одну строку на странице.

Сделайте текущую страницу в «хлебных крошках» некликабельной

Текущая страница в «хлебных крошках» не должна быть кликабельной, иначе это приведет к большому количеству циклических ссылок на сайте и негативно скажется на SEO.

Пример:

«Хлебные крошки» на сайте pharmacosmetica.ru

Используйте разделители между элементами

Поскольку расстояние между ссылками в «хлебных крошках» небольшое, пользователи могут не понять, где начинается и где заканчивается одна ссылка и начинается другая. Поэтому поместите символ-разделитель между элементами.

Например, символ «больше» (>):

«Хлебные крошки» на сайте aliexpress.ru

Слеш (/):

«Хлебные крошки» на сайте centrplit.ru

Тире (–):

«Хлебные крошки» на сайте beloris.ru

Оптимизируйте «хлебные крошки» для мобильных устройств

Длинная цепочка «хлебных крошек» не уместится на экране смартфона. Более того, из-за нее основной контент страницы сдвинется вниз, что неудобно для пользователя – придется скроллить, чтобы прочитать страницу. Поэтому для мобильной версии сайта нужно уменьшить количество ссылок в «хлебных крошках».

Например, для интернет-магазина это может быть ссылка на категорию товаров. Когда пользователь попадает на страницу товара из поиска или рекламы, он может захотеть посмотреть другие товары в той же категории. «Хлебная крошка» со ссылкой на категорию товаров как раз поможет пользователю перейти на эту страницу в один клик.

Такую навигацию использует магазин hoff.ru:

Пример «хлебных крошек» со ссылкой на категорию в hoff.ru

Еще один вариант оптимизации «хлебных крошек» от UX-исследователей Baymard Institute: они предлагают использовать горизонтальную прокрутку.

Выглядит это так:

Горизонтальная прокрутка «хлебных крошек» на mebelion.ru

«Хлебные крошки» такого вида позволяют пользователям проследить весь путь до текущей страницы на сайте, прямо как на десктопе. При этом вся цепочка умещается в одну строку и не заставляет посетителя скроллить лишний раз.

Какой из вариантов «хлебных крошек» выбрать, зависит от целей вашего сайта и от того, что важно для ваших посетителей. Понять это можно только через A/B-тестирование.

Чего избегать при создании «хлебных крошек»

• Чрезмерное употребление ключевых фраз в «хлебных крошках»

Подобная переоптимизация может привести к штрафам от поисковых систем за переспам. Об этом говорится в справке Яндекса (раздел «Использование SEO-текстов») и в справке Google (раздел «Скрытый текст и/или избыточное количество ключевых слов»).

• Отсутствие основного меню

Верхнее навигационное меню на сайте всё равно должно быть, несмотря на «хлебные крошки». Если верхнее меню отсутствует, это может запутать пользователя и усложнить навигацию.

Например, посетитель интернет-магазина находится в категории «Шкафы-купе», а ему нужно перейти в категорию «Диваны».

Пример использования основного меню и «хлебных крошек» на сайте kameol.ru

Ему будет удобнее воспользоваться верхним меню и из каталога сразу выбрать нужную категорию. Без верхнего меню ему бы пришлось возвращаться по «хлебным крошкам» на главную, а оттуда уже идти в нужную категорию. Это лишние действия.

Поэтому «хлебные крошки» лучше использовать как вспомогательный инструмент навигации, а не в качестве замены основного меню.

• Размещение крошек на главной странице

В этом случае главная будет ссылаться на саму себя, а это может ухудшить ранжирование сайта в поисковых системах.

В этой статье мы объяснили, что такое «хлебные крошки», зачем они нужны в SEO, какие виды бывают, и как их настроить на сайте с помощью пошаговой инструкции и примеров. Рассмотрели лучшие плагины для WordPress, Joomla, Opencart, способы проверки настройки и улучшения микроразметки, а также сделали для вас краткую выжимку того, что запомнить.

Что запомнить

1. «Хлебные крошки» необходимо использовать на многоуровневых сайтах: в интернет-магазинах, блогах и прочих. На одностраничниках делать ХК не нужно.

2. В мобильной версии сайта также нужны «хлебные крошки». Важно, чтобы они не занимали больше одной строки и не загораживали основной контент страницы. Для этого можно оформить ХК в виде горизонтальной прокрутки или оставить одну «крошку» со ссылкой на верхнюю страницу в иерархии сайта.

3. Перед ручной настройкой ХК узнайте, на какой CMS построен сайт и есть ли плагины для этой CMS. Это упростит создание ХК.

4. Для отображения «хлебных крошек» в сниппетах Яндекса и Google рекомендуется использовать формат микроразметки Microdata или JSON-LD.

5. На главной «хлебные крошки» не нужны. Страница будет ссылаться на саму себя, а это плохо для SEO.

6. Чтобы посетители сайта понимали, что перед ними «хлебные крошки» и они кликабельны, их нужно подчеркивать и разделять символами «>», «/» или «–».

7. В оформлении ХК важно придерживаться общей стилистики сайта: используйте тот же шрифт, что и на всем сайте, выбирайте приглушенные цвета. Также шрифт в «крошках» можно сделать на 1–2 пикселя меньше, чем остальной текст страницы.

8. «Хлебные крошки» – это дополнение к навигации для пользователя. Не заменяйте ими навигацию в основном верхнем меню сайта, чтобы не запутать посетителей. 

Источник