Поисковики

Как сделать хлебные крошки на сайте 🍞 [Полное руководство + бонус]

Всё о хлебных крошках в SEO: зачем нужны, как добавить на сайт, какую разметку внедрить. Решения для WordPress, Bitrix, Joomla и других CMS.

В статье:

  • Что такое хлебные крошки
  • Зачем они в SEO и каким сайтам нужны
  • Как добавить разметку с хлебными крошками на сайт
  • Как проверить правильность настройки
  • Автоматизация: плагины для разных CMS
  • Бонус: фишка для повышения CTR в выдаче
  • В детской сказке «Гензель и Гретель» по пути в лес брат и сестра крошили хлеб, чтобы по крошкам найти дорогу домой. Отсюда свое название получили «хлебные крошки» на сайте — они помогают пользователям ориентироваться в иерархии страниц. В сказке крошки склевали птицы, зато на сайте путь от главной до искомой страницы будет надежным.

    Разберемся, каким сайтам нужна такая разметка и как ее настроить правильно.

    Хлебные крошки в SEO (Breadcrumbs) — это навигационная цепочка, показывающая место страницы в иерархии сайта. Она нужна, чтобы пользователь мог быстро перейти на главную, в предыдущий раздел или в корневой каталог. Как они выглядят на странице:

    Товарная страница citilink.ru

    Правильно размеченные хлебные крошки могут попасть в сниппет сайта в выдаче Яндекса и Google. На сниппете вместо обычной ссылки отобразится навигационная цепочка:

    Выдача Google

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

    Каким сайтам нужны хлебные крошки и чем они полезны в SEO

    Польза разметки «Breadcrumbs»:

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

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

    • Делают сниппет нагляднее.
      В сниппете благодаря крошкам появляются понятные названия категорий. Это может повысить кликабельность сниппета. Пользователи могут сразу перейти на нужный раздел прямо из выдачи.

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

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

    Как добавить разметку хлебных крошек на сайт

    Для настройки используют разметку Breadcrumbs. Благодаря разметке поисковикам проще считывать информацию о странице.

    Советы для создания правильных хлебных крошек

    • На главной крошки не нужны.

    Главная страница — стартовая, в цепочке навигации на главной просто нечего отображать.

    Главная и товарная страницы petshop.ru

    • Ссылка на страницу, где находится пользователь, не нужна.

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

    Есть два варианта оформления хлебных крошек, чтобы избежать циклической ссылки. Название текущей страницы делают некликабельным, как на сайте apteka.ru:

    Страница товара

    Второй вариант — текущую страницу убирают из цепочки. В этом примере с lamoda.ru крошки заканчиваются на разделе «Декор настольный», это предыдущая страница для товара Philippi.

    Cтраница товара

    • Привычное место для хлебных крошек — верхняя часть страницы.

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

    Новость на seroundtable.com

    • Замените первую ссылку на ключ или бренд.

    Специалист по оптимизации Сергей Кокшаров (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 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 itemprop="itemListElement" itemscope
    itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="/catalog/ladieswear/">
    <span itemprop="name">Женская одежда</span></a>
    <meta itemprop="position" content="3″ />
    </li>
    <li itemprop="itemListElement" itemscope
    itemtype="http://schema.org/ListItem">
    <a itemprop="item" href=" /catalog/ladieswear/dress/">
    <span itemprop="name">Платья</span></a>
    <meta itemprop="position" content="4″ />
    </li>
    </ol>

    Типичная ошибка разметки хлебных крошек

    Пользователи часто сталкиваются с ошибкой «Отсутствует поле “id”». Ошибка обычно связана с тем, что пользователи указывают в разметке последним пунктом текущую страницу, которая, логично, не имеет ссылки, чтобы не ссылаться сама на себя. Но все item — это ссылки, так что последний пункт тоже должен быть ссылкой, иначе появляется ошибка.

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

    Как проверить разметку хлебных крошек

    Проверить внедрение микроразметки можно с помощью инструментов от ПС: инструмента Google и валидатора Яндекса.

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

    Отчет в Google Search Console

    Плагины разметки для разных 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: чтобы сделать сниппет в выдаче заметнее, он добавил пару тематических эмодзи в описание и хлебные крошки.

    Сниппет сайта в выдаче

    После добавления эмодзи сниппет показал рост кликабельности. Он стал заметнее на белом фоне выдачи.

    График с CTR сниппета

    Рост CTR сниппета

    Некоторые эмодзи могут неправильно отображаться в выдаче, но увидеть это можно только по факту. Тогда нужно просто подобрать другой элемент.

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

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

    Эмодзи не отображается

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

    Выбор эмодзи для автомобильной тематики

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

    Красные маркеры

    С эмодзи важно не переборщить, такой сниппет выглядит пестрым и перегруженным:


    Перебор элементов

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

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

    Автор:

    Тарас Черкасский

    Теги поста или какие разделы почитать еще:

    Источник: pr-cy.ru

    Похожие статьи

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

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

    Кнопка «Наверх»
    Закрыть