Микроданные (microdata) становятся очень популярны для оформления структурированных данных благодаря активной поддержки формата со стороны W3C и крупнейших поисковиков, разрабатывающих словари. Сама разметка предельно проста и, в основном, осуществляется при помощи атрибутов:
- itemscope
Группа свойств ключ-значение.
- itemtype
Тип объекта. Фактически это ссылка на страницу с описанием в свободной форме всех названий ключей, которые применимы к описываемому объекту. Этот атрибут неприменим к элементам без атрибута
itemscope
.- itemprop
Свойство объекта. Может быть строкой или другим объектом. Значение, которое будет извлечено для указанного ключа, зависит от элемента, для которого применяется этот атрибут.
А теперь расскажу о чрезвычайно полезных особенностях разметки, которые не слишком хорошо освещены в документации и примерах.
Несколько свойств у одного элемента
В атрибуте itemprop
могут быть перечислены несколько свойств, разделённые пробелом, что может сократить количество дополнительных (не нужных для оформления) элементов в документе.
<p itemscope itemtype="http://schema.org/Person">
Автор:
<a itemprop="name url" href="http://noteskeeper.ru/about/">
Владимир Кузнецов
</a>
</p>
Ссылка на свойства
Иногда так получает, что данные, относящиеся к размечаемому объекту, находятся за пределами «корневого» элемента. Специально для этого случая предусмотрен атрибут itemref
. Он применяется к элементу с itemscope
и содержит id
другого DOM-элемента, где находятся остальные свойства. Можно указать через пробел идентификаторы нескольких элементов.
Например, из-за особенностей оформления страницы, автор и комментарии к статье физически не могут находиться внутри <article>
.
<div itemscope itemtype="http://schema.org/Person" itemprop="author" id="author">
<a itemprop="name url" href="http://noteskeeper.ru/about/">
Владимир Кузнецов
</a>
</div>
<article itemscope itemtype="http://schema.org/Article" itemref="author comments">
<header>
<h2 itemprop="name">Особенности микроразметки microdata</h2>
<link itemprop="url" href="http://noteskeeper.ru/758/">
</header>
<div itemprop="articleBody">
... статья ...
</div>
</article>
<section id="comments">
<div itemprop="comment" itemscope itemtype="http://schema.org/UserComments">
<div itemprop="name commentText">
... комментарий 1 ...
</div>
</div>
<div itemprop="comment" itemscope itemtype="http://schema.org/UserComments">
<div itemprop="name commentText">
... комментарий 2 ...
</div>
</div>
</section>
Тем не менее, в результате получилась отлично структурированная разметка. Автор статьи и комментарии примешались в основной поток свойств статьи так как, если бы они были фактически размещены там.
article
itemType = http://schema.org/Article
author
person
itemType = http://schema.org/Person
name
href = http://noteskeeper.ru/about/
text = Владимир Кузнецов
url
href = http://noteskeeper.ru/about/
text = Владимир Кузнецов
comment
usercomments
itemType = http://schema.org/UserComments
name = ... комментарий 1 ...
commenttext = ... комментарий 1 ...
comment
usercomments
itemType = http://schema.org/UserComments
name = ... комментарий 2 ...
commenttext = ... комментарий 2 ...
name = Особенности микроразметки microdata
url = http://noteskeeper.ru/758/
articlebody = ... статья ...
Порядок следования свойств не оказывает никакого влияния на структуру. Парсер просто перечисляет их по мере обхода документа.
Примешивать свойства с помощью itemref
можно даже для элементов, которые не имеют содержимого. Например,
<article itemscope itemtype="http://schema.org/Article">
<meta itemprop="aggregateRating" itemref="rating" itemscope
itemtype="http://schema.org/AggregateRating">
</article>
<meta itemprop="ratingValue" content="5" id="rating">
Объект AggregateRating требует обязательного наличия свойства ratingValue, но его нельзя передать в атрибуте content
. Зато можно указать ссылку на другой элемент с нужными атрибутами.
На практике, пожалуй, этот случай лучше разметить с помощью обычных вложенных элементов с соответствующими атрибутами.
Коментарии к заметке
Спасибо :) Про itemref очень актуально!
Есть ли проблемы у гугла с itemref? проверяю страницу через страницу проверки структурированных данных ошибок нет, но если смотреть в Вид поиска → Структурированные данные, то он не обнаруживает статью, а только крошки.
Я посмотрел твою ссылку. Проблем там не увидел. Возможно, требуется чуточку подождать пока эти данные обработаются. Я сталкивался с тем, что крошки появлялись на следующий день, а остальная разметка значительно позже.
Сейчас на разметку чуточку ворчит валидатор Яндекса. Он зачем-то предупреждает о свойствах вне itemscope. По идее тут нет никакой проблемы, но если хочется избавиться от его ворчания, то сделай
itemscope itemtype="http://schema.org/Article"
прям у<html>
. В этом случае itemref уже не нужен будет. Пример можно посмотреть в текущей разметке моего блога.Времени кст прошло достаточно, 1-1,5 месяца. Попробую к корню прописать.
Спасибо! Кое как победил движковый шаблонизатор на комментариях. Зелененький, семантичненький. Жду когда сломаются ворнинги и опять начнутся приколы, но надеюсь уже все будет как есть :D Полезно ибо на драфтах нету на эту тему ничего.
Спасибо, конечно, но мне на моем уровне знания кодов все же не понятно, в какие файлы конкретно вносить микроразметку для Article и Person.
Ксения, микроразметка добавляется в HTML-файлы.
Может ли автором быть не персона, а например, организация? Если да, то как это указать?
Да, автором может быть и организация. Ознакомтесь, пожалуйста, с документацией по следующим ссылкам:
Скажите, в чем суть разметки Rating, когда в результатах Google стоят 5 звездочек с рейтингом, если каждый может вне зависимости от значения всегда просто ставить ratingValue=5? Тогда у всех в выдаче поиска будет 5/5 звезд
Да, это глупо немного. Но, зато способ выделиться. Чтобы эти звёздочки имели смысл, нужно делать в проекте систему голосования.