Хлебные крошки: как сделать и добавить на сайт

В статье:

  • Что такое «хлебные крошки»

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

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

  • Плагины CMS для «хлебных крошек»

  • Как проверить отображение разметки «хлебных крошек»

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

    «Хлебные крошки» («Breadcrumbs»)— навигационная цепочка, показывающая место страницы в иерархии сайта. Их помещают на страницы, чтобы пользователь мог быстро перейти на главную или в корневой каталог:

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

    С помощью разметки настраивают отображение «Breadcrumbs» в сниппете:

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

    В сниппете они заменяют обычную ссылку в поиске названием разделов и подразделов, в которых находится страница.

    Зачем нужна разметка с «крошками»

    Преимущества разметки «Breadcrumbs»:

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

    Откуда взялось название и причем здесь хлеб

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

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

    Яндекс формирует «крошки» по своему алгоритму, а настроить разметку для Google можно вручную, самостоятельно изменив код сайта. Разметка «BreadcrumbList» — это разновидность «ItemList» Schema.org, этот вариант предполагает использование микроданных или RDFa.

    Почитать по теме:
    Как внедрить микроразметку информации Schema.Org

    Пример разметки «BreadcrumbList» через микроданные:

    <ol itemscope=»» itemtype=»http://schema.org/BreadcrumbList»>
    <li itemprop=»itemListElement» itemscope=»» itemtype=»http://schema.org/ListItem»>
    <a itemprop=»item» href=»https://example.com/dresses»>
    <span itemprop=»name»>Dresses</span></a>
    <meta itemprop=»position» content=»1″>
    </li>
    <li itemprop=»itemListElement» itemscope=»» itemtype=»http://schema.org/ListItem»>
    <a itemprop=»item» href=»https://example.com/dresses/real»>
    <span itemprop=»name»>Real Dresses</span></a>
    <meta itemprop=»position» content=»2″>
    </li>
    </ol>

    Пример разметки «BreadcrumbList» через язык RDFa:

    <ol vocab=»http://schema.org/» typeof=»BreadcrumbList»>
    <li property=»itemListElement» typeof=»ListItem»>
    <a property=»item» typeof=»WebPage» <br=»»>href=»http://www.theguardian.com/arts»>
    <span property=»name»>Arts</span></a>
    <meta property=»position» content=»1″>
    </li>

    <li property=»itemListElement» typeof=»ListItem»>
    <a property=»item» typeof=»WebPage» <br=»»>href=»http://www.theguardian.com/arts/books»>
    <span property=»name»>Books</span></a>
    <meta property=»position» content=»2″>
    </li>

    <li property=»itemListElement» typeof=»ListItem»>
    <a property=»item» typeof=»WebPage» <br=»»>href=»http://www.theguardian.com/arts/books/poetry»>
    <span property=»name»>Poetry</span></a>
    <meta property=»position» content=»3″>
    </li>
    </ol>

    С помощью разметки страницы с книгой Тима Минчина на сниппете видна детализация URL-адреса — Arts› Books› Poetry (Искусство› Книги› Поэзия).

    Сниппет с разметкой

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

    Почитать по теме:
    Микроразметка для сайта интернет-магазина

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

    Было:
    Главная > Продукция > Пиломатериалы > Брус

    Стало:
    Строительные материалы > Пиломатериалы > Брус

    Ошибки разметки

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

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

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

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

    Один из оптимизаторов в Твиттере спросил у представителя Google Джона Мюллера:

    «Скажите, как вы относитесь к такому использованию эмодзи?»

    Много эмодзи в расширенном сниппете

    Джон был скептичен:

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

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

    Читатель блога PR-CY и оптимизатор Витя Смертный поделился своим опытом работы с сайтом 100.ks.ua:  чтобы сделать сниппет в выдаче заметнее, он добавил тематические эмодзи в описание и «хлебные крошки». Эмодзи было мало, так что сниппет выглядел аккуратно.

    Эмодзи в хлебных крошках в сниппете сайта

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

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

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

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

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

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

      Отображение эмодзи из каталога

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

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

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

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

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

      Отталкивающие символы

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

      Плагины CMS для «хлебных крошек»

      Добавить навигационную цепочку в сниппет можно при помощи специальных плагинов для CMS.

      WordPress

      Самым популярным плагином хлебных крошек для WordPress считается Breadcrumb NavXT. Есть и другие: Instant Breadcrumbs, Flexy Breadcrumb, Surbma | Yoast SEO Breadcrumb Shortcode, Breadcrumb, breadcrumb simple и еще множество.

      Joomla

      Добавить «Хлебные крошки» в CMS Joomla можно с помощью модуля «Навигатор сайта», тип модуля — «mod_breadcrumbs». Он находится в Панели управления — Расширения – Менеджер модулей.

      Настройка модуля

      Настройте модуль под свой сайт и укажите:

      • позицию модуля, в которой он будет выводиться на странице (отображение позиций включается так: Расширения — Менеджер шаблонов — Настройки — опция Просмотр позиций модулей — Включено);
      • название главной страницы;
      • разделитель текста для элементов навигации (обычно «/»).

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

      Opencart

      «Хлебные крошки» для движка Opencart устанавливают с помощью модуля. Под разные версии CMS есть разные модули: «Умные хлебные крошки» для Opencart 3.0, Правильные хлебные крошки для Opencart 2.x. Есть бесплатный модификатор, который делает неактивной ссылку на текущую страницу в хлебных крошках.

      Webasyst

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

      Настройка плагина

      1С Битрикс

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

      Moguta

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

      Установка плагина

      Правильно внедренная навигационная цепочка будет одинаково успешно распознаваться Google и другими поисковыми системами – Яндексом, Yahoo!, Bing и прочими. Без разницы, внедрили вы ее самостоятельно или с помощью плагина.

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

      Проверить внедрение микроразметки «хлебных крошек» можно с помощью инструментов Google и Яндекса.

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

      Отчет «Breadcrumbs» в Google Search Console

      Отчет есть в англоязычной версии, но некоторые российские пользователи отмечали, что и у них он есть.

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

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

      Ссылка на основную публикацию