Зачем нужна микроразметка и как ее внедрить?

Микроразметка представляет собой набор стандартов маркировки контента вебстраниц для поисковых систем и социальных сетей. Предназначена для улучшения обработки семантических данных.

Зачем нужна микроразметка и как ее внедрить?

Поисковые системы Google, Yahoo и Bing представили стандарт микроразметки летом 2011, Yandex – осенью того же года.

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

Микроразметка осуществляются внесением HTML кода в виде специальных форматов тегов <div>, <span> или их свойств class.

Существует три группы стандартов микроразметки: микроданные, микроформаты и RDFa.

Микроданные

  • Стандарт разметки применяет теги <div> и <span>, устанавливая описательные имена элементам страницы.
  • Через микроданные реализуются такие типы страниц: отзывы, информация о месте и дате мероприятия, информация об авторе и т.д.
  • Специалисты Google и Yandex рекомендуют использовать для микроразметки сайтов стандарт микроданных от Schema.org.

Наглядные примеры применения Schema.org

Разберем пример оформления страницы автосервиса: http://schema.org/AutoRepair

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

Schema.org-tagcloudТри важнейших атрибута Schema.org:

  1. itemscope – указывает на объект микроразметки
  2. itemtype – задает тип объекта
  3. itemprop – свойства или значения объекта, соответствующие его типу

Теги, в которых можно указать атрибуты микроразметки:

  • Блок <div>…</div> может нести свойства микроразметки
  • В теге <span>…</span> обычно содержится текстовая информация
  • Невидимые для посетителей ссылки <link>… href=”…” на канонические страницы
  • А ссылки в тегах <a>…</a> отображаются для людей
  • Используя тег <time>…</time>, можно указать дату, время и продолжительность события
  • Тег <meta> часто используется для сокрытия лишней информации от посетителей, но злоупотреблять им не рекомендуется


<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.ua/microtest.xml  или инструментом для разработчиков от Google https://developers.google.com/structured-data/testing-tool/ .

Микроформаты

  • Стандарты микроформата выполняют функцию описания типа информации на странице. Семантические свойства страницы указываются в специальных полях, предусмотренных стандартом для этого типа страницы.
  • Для реализации своих словарей микроформаты применяют атрибут class в тегах <div> и <span>.

RDFa

Этот набор стандартов (Resourse Description Framework in attributes) предоставляет гораздо больше возможностей по сравнению с другими форматами, описывая элементы с их свойствами.

Screenshot_1

Пример реализации хлебных крошек с использованием микроразметки 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:

  • og:title – заголовок страницы, статьи или поста
  • og:type – тип публикации
  • og:image – изображение для социальной сети
  • og:url – ссылка на пост
  • og:description – анонс, краткое описание для привлечения посетителей из социальной сети

options-for-og-tags1

Обычно используется в тегах <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

TwitterCards2

https://dev.twitter.com/cards/markup, подробную статью про него можно прочитать тут http://habrahabr.ru/post/210996/, а проверить микроразметку на валидность – на этой странице https://cards-dev.twitter.com/validator.

 

Практическое применение микроразметки

Перечислим основные функции микроразметки, которые значительно улучшат юзабилити сайта:

  • Формирование привлекательного сниппета
  • Трансляция контента в социальные сети
  • Отображение адреса на картах Google и Yandex
  • Описание аудиовизуального контента
  • Обрамление ссылок

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

Итог

Стандарты микроразметки фактически являются набором словарей, который распознается поисковыми системами и социальными сетями, существенно улучшая юзабилити вебстраниц. А реализация этих словарей не требует специальных средств, поскольку осуществляется поверх языка html5, а значит, доступна для любых сайтов.

Интересный момент: Google уже заметил накрутчиков микроразметки и пообещал бороться с такой переоптимизацией.

А какую микроразметку используете вы?

Оцените статью: 1 балл2 балла3 балла4 балла5 баллов
(5 оценок, средняя: 4,80 из 5)
Loading...Loading...

Оставьте свой комментарий к статье