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

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

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

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

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

❓Почему они так именуются

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

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

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

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

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

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

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

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

Для чего «хлебные крошки» в SEO

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

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

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

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

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

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

Ботам поисковых машин Yandex’а и Гугл будет легче осознать структуру и содержание страничек веб-сайта, а в процессе сканирования – проще перебегать к страничке на уровень выше.

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

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

  • Делают симпатичный сниппет

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

Пример сниппета в выдаче Гугл

Каким веб-сайтам нужны

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

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

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

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

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

Главные виды «хлебных крошек»

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

Линейные

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

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

С выпадающим перечнем

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

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

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

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

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

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

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

А сейчас – через раздел «Подруге»:

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

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

Вручную

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

❗️Всепригодного метода сотворения «крошек» для веб-сайтов на различных движках нет, и для начала необходимо осознать, на каком движке изготовлен веб-сайт. Всё дело в том, что в различных CMS различные разделы, куда необходимо вставлять готовый PHP-код с «крошками».

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

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

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

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

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

  • объект группы: svetilniki.

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

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

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

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

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

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

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

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

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

При помощи плагинов для CMS

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

WordPress

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

Через Breadcrumb:

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

Плагин Breadcrumb в WordPress

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

Внутренние опции плагина Breadcrumb

  1. Перебегаем в Shortcodes и копируем PHP-функцию:

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

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

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

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

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

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

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

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

Сохранение опций плагина YoastSEO

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

  1. Чтоб ХК отобразились на веб-сайте, необходимо скопировать код:

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

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

    ❗️Расположить «хлебные крошки» можно снутри файла single.php и/либо page.php прямо над заголовком странички. Еще вариант – просто вставить код в header.php самый конец.

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

    Joomla

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

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

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

    1. Избираем модуль с заглавием «Навигатор веб-сайта»:

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

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

    Опции ХК через модуль «Навигатор веб-сайта»

    ❗️Если на вашем веб-сайте включено кеширование, то в настройках модуля необходимо указать «Не кешировать». Это необходимо, чтоб навигатор веб-сайта работал верно.

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

    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, необходимо учесть индивидуальности каждой отдельной темы дизайна. Подробная {инструкция} от разраба для всех тем.

    ❗️Для корректной работы плагина необходимо поменять код дефолтных ХК. В различных темах дизайна они могут находиться в различных файлах, почаще всего в шаблоне main.html.

    1С-Битрикс

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

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

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

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

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

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

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

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

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

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

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

    Метод проверки микроразметки:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    К примеру:

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

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

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

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

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

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

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

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

    Пример:

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

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

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

    К примеру, знак «больше» (>):

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

    Слеш (/):

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

    Тире (–):

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

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

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

    Что тогда располагать в строке навигации, если всё не умещается?

    В исследовании NN Group NN Group молвят, что для неких страничек быть может довольно одной «хлебной крошки», которая будет вести на страничку уровнем выше.

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

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

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

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

    Смотрится это так:

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

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

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

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

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

    Схожая переоптимизация может привести к штрафам от поисковых машин за переспам. О этом говорится в справке Yandex’а (раздел «Внедрение SEO-текстов») и в справке Гугл (раздел «Сокрытый текст и/либо лишнее количество главных слов»).

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

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

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

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

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

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

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

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

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

    Что уяснить

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

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

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

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

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

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

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

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

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *