Микроразметка: джентльменский набор


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

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

Микроразметка хлебных крошек

Ну, это классика жанра, которая в обязательном порядке должна присутствовать на каждом сайте. Например, для страницы https://pingoblog.ru/21-tipy-poiskovyh-zaprosov.html она имеет следующий вид:

<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> //1 уровень: главная страница
<a href="https://pingoblog.ru/" itemprop="url">
<span itemprop="title">SEO блог Пинго</span>
</a>
</span>

<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> //2 уровень: категория
<a href="https://pingoblog.ru/novichkam/" itemprop="url">
<span itemprop="title">Новичкам</span>
</a>
</span>

<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> //3 уровень: конечный материал
<span itemprop="title">Типы поисковых запросов</span>
</span>

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

  1. Объявление элемента: itemscope itemtype="http://data-vocabulary.org/Breadcrumb"
  2. Определение значения атрибута ссылки: itemprop="url"
  3. Определение значения атрибута имени: itemprop="title"

У последнего элемента также может быть атрибут url, но на мой взгляд он не нужен — зачем странице указывать на саму себя в навигационной цепочке?

Атрибуты могут использоваться в связке с любыми тегами — важен лишь порядок и уровень вложенности. Например:

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="https://pingoblog.ru/novichkam/" itemprop="url">
<b itemprop="title">Новичкам</b>
</a>
</div>

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

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

Микроразметка статьи

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

<div itemscope itemtype="http://schema.org/Article" class="base fullstory">
//Объявляем название элемента
<meta itemprop="datePublished" content="2013-08-18T19:07">
//Определение атрибута «Дата публикации»
<h1 itemprop="headline">Конкурентность поисковых запросов</h1>
//Определение атрибута «Имя публикации»
<p>Категория: <span itemprop="articleSection"> //Определение атрибута «Категория публикации»
<a href="https://pingoblog.ru/novichkam/">Новичкам</a>
</span></p>
<span itemprop="description">Содержимое статьи.</span> //Определение атрибута «Содержимое статьи»

<span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">Средняя арифметическая оценка</span>
<span itemprop="bestRating">Максимальное значение оценки</span>
<span itemprop="worstRating">Минимальное значение оценки</span>
<span itemprop="ratingCount">Количество оценок</span>
</span>

</div>

Тут всё тоже самое, что и для хлебных крошек, кроме следующего:

  • Атрибут «Дата публикации» должен быть указан в формате ISO-8601 вида YYYY-MM-DDTHH:MM, где T — просто символ, YYYY — год, MM — месяц, DD — дата, HH — час, а MM — минута.
  • При определении атрибута «Категория публикации» и «Имя публикации» совершенно не страшно, что в область значения попадает также и ссылка — робот вытянет лишь соответствующие ожидаемому для атрибута значения данные.

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

Микроразмета товара (продукта или услуги)

Данный тип микроформата незаменим для страниц с описанием товаров и услуг:

<span itemscope itemtype="http://schema.org/Product">  //Объявляем элемент
<h1 itemprop="name">Розовый слон</h1> //Определяем наименование товара или услуги
<span itemprop="description">Хороший слон.</span> //Определяем описание товара или услуги

<span itemprop="offers" itemscope itemtype="http://schema.org/Offer">
//Объявляем подтип «Предложение»
<meta itemprop="price" content="5"> //Определяем стоимость товара или услуги
<meta itemprop="priceCurrency" content="RUB"> //Указываем валюту цены товара или услуги</span>

<span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">Средняя арифметическая оценка</span>
<span itemprop="bestRating">Максимальное значение оценки</span>
<span itemprop="worstRating">Минимальное значение оценки</span>
<span itemprop="ratingCount">Количество оценок</span>
</span>

</span>

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

Сниппет микроразмеченного продукта

Проверить внедренную микроразметку в режиме онлайн можно через валидатор Яндекса или Google.

Материал обновлен: 10 января 2016


Оцените статью:
5 1 17


Смотрите также:

Комментарии (18)
  1. Daria
    8 июля 2014 23:50
    Здравствуйте, Олег! С удовольствием подписалась бы на ваш блог, я люблю получать  подписки по е-mail, но не нашла такой возможности. Но главное, я хотела бы спросить, а что  означает предупреждение, полученное  в вебмастере яндекса при  валидации микроразметки вашей страницы "не выполнено обязательное условие для острова Статья  обязательное поле отсутствует" и самое главное, как это исправить. 
    Заранее вам спасибо.
  2. 9 июля 2014 00:13
    Здравствуйте, Дарья. По поводу возможности подписаться по e-mail - она в ближайших перспективах. Просто я стараюсь равномерно распределять время между развитием блога и выпуском новых материалов.

    По поводу предупреждения в валидаторе - это связано с недавним запуском бета-версии Яндекс Островов, в которых они использовали немного иные поля schema.org для определения содержимого статьи: у меня это articleBody, а у них - description. 

    Для того чтобы этого предупреждения не возникало, достаточно в моём примере заменить span itemprop="articleBody" на span itemprop="description"

    Обзор на тему разметки островов будет, а пока дополнительная информация по вопросу есть тут: http://help.yandex.ru/webmaster/interactive-answers/template/article.xml  
  3. Daria
    9 июля 2014 12:16
    Олег, а не получится ли так, что просто заменив один span на другой,  утрачу микроразметку для гугл? или добавлять внутрь одного  span еще один? Но общая структура разметки, тщтательно вычищенная от лишиних дивов и спанов  переполняется этими дополнительными тегами и просто удручает.
  4. 10 июля 2014 00:31
    Нет, никаких утрат не произойдет - и articleBody и description - оба этих атрибута подходят (и оба присутствуют в списке свойств http://schema.org/Article). Обновил разметку на блоге - теперь оба валидатора - и Яндекс и Google - довольны и не ругаются ни на что.
  5. Daria
    10 июля 2014 13:43
    Олег, спасибо, и я сделала!
  6. Лена
    6 апреля 2015 23:07
    сейчас проверила Ваш сайт, яндекс не показывает разметку, гугл - да. Почему так?
  7. 7 апреля 2015 00:01
    Цитата: Лена
    сейчас проверила Ваш сайт, яндекс не показывает разметку, гугл - да. Почему так?

     
    Валидатор Яндекса может сбой дал - проверил сейчас, всё показывается.
  8. Ксенья Юрьевна
    7 декабря 2015 03:33
    Олег по всему вашему блогу видно, что вы профессиональный программист или стали им.э У меня на сайте микроразметка не такая. Она собрана с миру по нитке. В бесплатной теме микроразметка уже была, с ошибками. Исправить удалось почти все, Гугл замечаний не делает. А в Яндексе есть ошибка о пустой строке articleBody. Попробую добавить строку, как у вас, содержимое статьи. Но у меня ниже уже есть text Или пусть с ошибкой остается. Мне трудно сделать микроразметку, коды плохо знаю, для чего микроразметка понимаю, но технически ее трудно вставить в разные коды сайта. У вас здесь оченр хорошо вся микроразметка представлена блоками.
    Теперь вопрос, куда блоки вставить в код сайта, например микроразметку статей. Если бы я вставила эти блоки, то сослалась бы на вас. Но тогда тема нужна, где совсем микроразметки нет.
  9. 7 декабря 2015 11:08
    Какая у вас система управления сайтом?
  10. Ксенья Юрьевна
    12 декабря 2015 19:18
    У меня сайт на Word Press? тема бесплатная от Word Press.org, все самое обычное, без индивидуальности.
  11. 13 декабря 2015 17:04
    Так быстро тогда не объяснить - внедрение микроразметки на WP - целый опус.

    Есть два варианта, вручную (посмотреть можно тут http://marseo.ru/poiskovaya-optimizaciya/mikrorazmetka/ и тут http://marseo.ru/sozdanie-sajta-na-wordpress/breadcrumbs/)

    Либо же установить плагин для микроразметки, например, Breadcrumb NavXT, Yet Another Stars Rating и Schema Creator.

    Материалы по внедрению микроразметки в каждую из основных CMS будут, но позже.
  12. 3 декабря 2017 15:14
    Здравствуйте, уважаемый Олег!

    Спасибо за полезную статью - перешерстил кучу статей в поисках подходящих примеров. Нашел только на Вашем сайте)

    Можно небольшой вопрос - вот есть микроразметка для услуг (это с Вашего сайта)



    <span itemprop="offers" itemscope itemtype="http://schema.org/Offer">

    //Объявляем подтип «Предложение»

    <meta itemprop="price" content="5"> //Определяем стоимость товара или услуги

    <meta itemprop="priceCurrency" content="RUB"> //Указываем валюту цены товара или услуги</span>


    Эту микроразметку ставить где в структуре страницы?

    До title, h1, самого текста?
    1. 6 декабря 2017 02:41
      Здравствуйте. Без разницы где, главное, чтобы внутри блока с атрибутом itemtype="http://schema.org/Product".
  13. 21 февраля 2018 10:58
    День добрый,

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

    URL

    http://longtrade.by/company-info/turovskii_molochnii_kombinat.html

    Собственно код, который вставлен тут
    <meta itemprop="ratingValue" content="5.0" />
    <meta itemprop="bestRating" content="5.0" />
    <meta itemprop="worstRating" content="0.0" />
    <meta itemprop="ratingCount" content="4" />
    1. 22 февраля 2018 01:00
      Обратите внимание на ваш itemprop="url", на его значение вернее.

      Кроме того, наличие микроразметки не гарантирует появление рейтинга в сниппете. Для каждой страницы\запроса это индивидуально по решению Google.
  14. 22 февраля 2018 13:19
    Aluarius, а не могли бы вы подсказать какое значение должно быть там. При проверке вообще выдает

    url
    Необходимо указать значение для поля url.
    1. 22 февраля 2018 16:32
      У вас url, name и image относится к aggregateRating, хотя они там не нужны, необходимо вынести их за пределы блока aggregateRating.

      В целом как-то так: http://joxi.ru/GrqjgXVtN78nZm
  15. 22 февраля 2018 20:16
    Спасибо большое.
Оставить комментарий

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent




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