Микроразметка представляет собой набор стандартов маркировки контента вебстраниц для поисковых систем и социальных сетей. Предназначена для улучшения обработки семантических данных.
Поисковые системы Google, Yahoo и Bing представили стандарт микроразметки летом 2011, Yandex – осенью того же года.
Благодаря микроразметке поисковые боты могут определять семантическую информацию о странице сайта с большей точностью, составлять более качественные сниппеты и эффективнее классифицировать тип страницы.
Микроразметка осуществляются внесением HTML кода в виде специальных форматов тегов <div>, <span> или их свойств class.
Существует три группы стандартов микроразметки: микроданные, микроформаты и RDFa.
Разберем пример оформления страницы автосервиса: http://schema.org/AutoRepair
В иерархии классов микроразметки автосервис наследует свойства от таких типов: локальный бизнес, организация, место, предмет. Суммарно 60 полей для данных представляют широкие возможности для детального описания автосервиса.
Три важнейших атрибута Schema.org:
Теги, в которых можно указать атрибуты микроразметки:
<div itemscope itemtype="http://schema.org/AutoRepair "><!— основные характеристики —>
<link itemprop=»url» href=»http://mysite.com/index.php»>
<meta itemprop=»name» content=»Автосервис в Москве»>
<meta itemprop=»description» content=»автосервис предоставляет такие услуги: … «>
<!— региональность —>
<meta itemprop=»inLanguage» content=»RU»>
<!— место —>
<meta itemprop=»inLanguage» content=»RU»>
<div itemprop=»address» itemscope itemtype=»http://schema.org/PostalAddress»>
Main address:
<span itemprop=»streetAddress»>ул. Кутузова 38</span>
<span itemprop=»addressLocality»>Москва, Россия</span>
</div>
Tel:<span itemprop=»telephone»> Тел.: 8 800 426-53-00 </span>
<!—рабочее время —>
<time itemprop=»openingHours» datetime=»Mo, Tu, We, Th, Fr, Sa 8:00-22:00″> с 8:00 до 22:00, ВС – выходной</time>
Для составления подобной разметки можно воспользоваться проектом русского перевода http://ruschema.org/LocalBusiness (значения атрибутов микроразметки для локального бизнеса).
Для проверки правильности реализации микроразметки можно использовать валидатор Яндекса https://webmaster.yandex.ru/tools/microtest/ или инструментом для разработчиков от Google https://developers.google.com/search/docs/advanced/structured-data .
Этот набор стандартов (Resourse Description Framework in attributes) предоставляет гораздо больше возможностей по сравнению с другими форматами, описывая элементы с их свойствами.
Пример реализации хлебных крошек с использованием микроразметки RDFa:
<div xmlns:v=»http://rdf.data-vocabulary.org/#»>
<span typeof=»v:Breadcrumb»><a href=»/» rel=»v:url» property=»v:title»>Главная страница</a></span>
<span typeof=»v:Breadcrumb»><a href=»/books/» rel=»v:url» property=»v:title»>Список книг</a></span>
<span typeof=»v:Breadcrumb»><a href=»/books/list/authors/12/» rel=»v:url» property=»v:title»>Авторы зарубежной классики</a></span>
Уильям Шекспир, Иоганн Вольфганг фон Гёте, Джек Лондон
</div>
К этой группе стандартов относится OpenGraph, применяемый для трансляции контента в социальную сеть Facebook.
Наиболее используемые атрибуты Opengraph:
Обычно используется в тегах <meta>:
<meta property=»og:title» content=»Невероятная статья – о чем никто не пишет!»>
<meta property=»og:image» content=»http://site.ru/image.jpg»>
<meta property=»og:description» content=»Не пропустите свой шанс, бросьте все дела и читайте! «>
<meta property=»og:url» content=»http://site.ru/article.php»>
Еще интересен свой собственный формат микроразметки твиттера Twitter Cards
https://dev.twitter.com/cards/markup, подробную статью про него можно прочитать тут http://habrahabr.ru/post/210996/, а проверить микроразметку на валидность – на этой странице https://cards-dev.twitter.com/validator.
Перечислим основные функции микроразметки, которые значительно улучшат юзабилити сайта:
А еще при помощи микроразметки можно выделить главное содержание страницы для базы знаний, создать специальные кнопки в почтовых сообщениях и многое другое.
Стандарты микроразметки фактически являются набором словарей, который распознается поисковыми системами и социальными сетями, существенно улучшая юзабилити вебстраниц. А реализация этих словарей не требует специальных средств, поскольку осуществляется поверх языка html5, а значит, доступна для любых сайтов.
Интересный момент: Google уже заметил накрутчиков микроразметки и пообещал бороться с такой переоптимизацией.