Как добавить микроразметку в хлебные крошки или что важнее — структура url или структурированные данные (кейс)?

Для чего нужна микроразметка для хлебных крошек (строки навигации)?

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

Пример хлебных крошек в выдаче

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

Пример хлебных крошек

В справке Яндекс.Вебмастера есть следующее объяснение предназначения микроразметки для хлебных крошек:

Для крупных сайтов, имеющих хорошо выраженную структуру, под сниппетом может показываться навигационная цепочка (ряд ссылок на разделы сайта, к которым относится найденная страница). Такая цепочка позволяет быстро оценить объём информации на сайте или тип контента, и при необходимости за один клик перейти в нужный раздел.

Таким образом, если просуммировать, то строки навигации в выдаче:

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

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

Существует много различных форматов: микроданные (microdata), schema.org, микроформаты, OpenGraph, RDFa. Все они поддерживаются и Яндексом, и Google, и имеют похожую логику и синтаксис. Какую из схем лучше выбрать? Абсолютно непринципиально, выбрать можно любую, которая окажется ближе к сердцу. Повторю — все форматы микроразметки для хлебных крошек с точки зрения поисковых систем равнозначны.

Я приведу пример микроразметки для хлебных крошек с помощью RDFa (Resource Description Framework):

1
2
3
4
5
6
7
8
9
10
11
<div xmlns:v="http://rdf.data-vocabulary.org/#">
   <span typeof="v:Breadcrumb">
     <a href="http://www.example.com/" rel="v:url" property="v:title">Главная</a> ›
   </span>
   <span typeof="v:Breadcrumb">
    <a href="http://www.example.com/football/" rel="v:url" property="v:title">Футбол</a> ›
   </span>
   <span typeof="v:Breadcrumb">
    <a href="http://www.example.com/football/zenit/" rel="v:url" property="v:title">Зенит</a> ›
   </span>
</div>

Подробнее посмотреть о разметки для хлебных крошек можно тут в справке Google.Webmaster: https://support.google.com/webmasters/answer/185417

Как проверить, что всё сделал правильно?

В Яндекс.Вебмастер есть валидатор микроразметки: http://webmaster.yandex.ru/microtest.xml

Что важнее микроразметка в хлебных крошках или структура url?

Исходные данные:

  • Страница со списком всех растений: /plants/45/
  • Страница растения: /plants/{id}/
  • Страница типа растения: /plants/list/plant_type/{id}/

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

Разметка на странице растения:

1
2
3
4
5
6
<div xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb"><a href="/" rel="v:url" property="v:title">Главная</a></span> &gt; 
<span typeof="v:Breadcrumb"><a href="/plants/" rel="v:url" property="v:title">Список растений</a></span> &gt; 
<span typeof="v:Breadcrumb"><a href="/plants/list/plant_type/12/" rel="v:url" property="v:title">Фруктовые деревья</a></span> &gt;  
Абрикос, Морель, Жердель
</div>

Результат для Яндекса

Главная -> Список растений -> Страница растения. Т.е. точно согласно вложенности url.

Навигационная цепочка в Яндексе

Результат для Google

Главная -> Список растений -> Тип растения -> Страница растения. Т.е. точное повторение цепочки ссылок, которую мы построили и разметили.

Навигационная цепочка в Google

Таким образом, можно сделать вывод, что для Яндекса важнее структура url, а для Google — микроразметка.

Вопросы?

  • Здравствуйте! Я хотела спросить вот о чем. После добавления микроразметки проверила страницу валидатором HTML и выскакивает ошибка Attribute xmlns:v not allowed here и предупреждение. Подскажите, как их примирить эти две стихии. Мне хочется исправить все ошибки валидации, у меня их не так много. И не хочу отказаться от микроразметки.

    • Добрый вечер, да, я тоже замечал такую несогласованность, но обычно её просто игнорировал. 🙂 Попробую поискать решение данного вопроса. Напишу о результатах!

  • Юрий Понятов

    Приветствую всех господа! У меня вопрос следующего характера. На сайте сделал разметку все нормально. однако она не отображается в поиске, хотя когда я все проверяю разметка появляться нормально.

    Если не трудно подскажи в чем дело http://www.intuitive-design.kz/portfolio/35-nazvanie.html

    • Юрий, Яндекс еще не переиндексировал страницу. Там копия от 7 сентября. Ждите.

      Но несколько замечаний:
      1. Добавьте ссылку на главную страницу. Цепочка: Главная — Портфолио — Текущая страница

      2. Уберите ссылку с названия текущей страницы, страница не должна ссылаться сама на себя

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

      • Юрий Понятов

        Благодарю за совет. Обязательно исправлю.
        Еще один вопрос. В элементах «хлебных крошек» можно использовать style=»display:none» чтобы на странице не отображать ненужное.

        • Я бы не советовал, невидимый текст — не очень хорошо по определению. По идее любая поисковая система порекомендует убрать, а не прятать, с сайта всё, что не нужно пользователю.