Виды микроразметки

Наверх

Мы, команда «Цифрового Элемента», часто внедряем на сайты разные виды микроразметки. Микроразметка позволяет «улучшить» сайт для поисковых систем, социальных сетей и прочих сервисов, которые нуждаются в разметке данных. Она является неким ориентиром, который позволяет дать понять другим сайтам, какие элементы вы используете на сайте и что они содержат. Именно поэтому, микроразметку часто называют семантической разметкой.

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

Состав микроразметки

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

Каждая микроразметка состоит из словаря и синтаксиса.

Словарь — это язык микроразметки или, по-другому, набор сущностей по типу «name», «title» и пр. Например, сущность «title» будет описывать название элемента, а «name» имя.

Синтаксис — это способы разметки микроразметки, которые включают в себя теги, атрибуты и элементы, описывающие микроразметку. Например, микроразметку schema.org можно описать с помощью JSON-LD или с помощью добавления сущностей непосредственно в теги HTML, которые содержат элемент. Подробнее это разберем ниже.

Виды микроразметки

Всего существует 6 видов микроразметки:

• Schema.org. Разметка, которую разрабатывают поисковые системы Яндекс, Google и другие крупные поисковые системы. Позволяет получать расширенный сниппет в поисковой выдаче и не только;
• Open Graph. Разметка, разработанная компанией Facebook. Позволяет формировать превью сайта при публикации в социальных сетях;
• Dublin Core. Разметка, разработанная международной междисциплинарной группой профессионалов библиотечного дела, компьютерных наук, кодирования текстов, музейного дела и других смежных групп. Позволяет тематически разделить всей сайты и их страницы во всемирной паутине. Является стандартом;
• Microformats. Разметка, которая содержит несколько видов разметок. Схожа по типу schema.org. Позволяет получать расширенный сниппет в поисковой выдаче. Плавно перетекает в Schema.org;
• Data vocabulary. Устаревшая микроразметка от компании Google. Плавно перетекла в Schema.org;
• Good Relations. Устаревшая микроразметка от компании Google. Разработка перетекла в Schema.org.

1. Schema.org

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

Популярность такой разметке пришла из-за её универсальности. Во-первых, практически любой элемент можно разметить. Во-вторых, эти элементы можно разметить синтаксисом «Микроданные» (непосредственно внутри верстки), JSON-LD (через тег "script") и «RDFA» (непосредственно внутри верстки, но отличным от типа «Микроданные»).

Schema.org используется для SEO оптимизации.

Её разрабатывают и поддерживают Яндекс, Google, Bing и Yahoo!, чтобы вебмастерам не пришлось размечать данные для каждого поисковика отдельно.

Пример разметки организации внутри HTML

<div itemscope itemtype="http://schema.org/Organization">
   <div itemprop="name">название_компании</div>
   <link itemprop="url" href="ссылка_на_сайт">
   <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
       <span itemprop="postalCode">почтовый_индекс</span>,
       <span itemprop="addressCountry">Страна</span>,
       <span itemprop="addressRegion">Область</span>,
       <span itemprop="addressLocality">Город</span>,        
       <span itemprop="streetAddress">улица, номер_дома</span>
   </div>
   <div>Телефон: <a itemprop="telephone" href="tel:+79999999999">+7 (999) 999-99-99</a></div>
   <div>Почта: <a itemprop="email" href="mailto:email@email. ru">email@email. ru</a></div>
   <div>Факс: <a itemprop="faxNumber" href="tel:+79999999999">+7 (999) 999-99-99</a></div>
</div>

Та же разметка, но с помощью JSON-LD:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Organization",
  "address": {
     "@type": "PostalAddress",
     "postalCode": "почтовый_индекс",
     "addressCountry": "Страна",
     "addressRegion": "Область",
     "addressLocality": "Город",
     "streetAddress": "улица, номер_дома"
  },
  "email": "email@email. ru",
  "faxNumber": "+7 (999) 999-99-99",
  "name": "название_компании",
  "url": "ссылка_на_сайт",
  "telephone": "+7 (999) 999-99-99"
}
</script>

Подробнее о том, как установить schema.org к себе на сайт мы описали в статье.

Официальный сайт Schema.org.

Русскоязычная версия с неполным переводом: http://ruschema.org.

2. Open Graph

Изначально микроразметка была создана для социальной сети Facebook, но после её начали использовать и другие социальные сети. Сейчас Open Graph используют Facebook, Яндекс, Вконтакте, Google+, Twitter, Pinterest и др. В Яндексе микроформат используется для передачи данных в Яндекс.Видео. Её используют даже WhatsApp, Viber и Telegram.

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

Таким образом, пользователь понимает, что это за ссылка и её краткое содержание.

Пример разметки страницы внутри HTML

<meta property="og:title" content="Какой текст необходим для продвижения / Блог Цифрового Элемента" />
<meta property="og:description" content="Какой текстовый контент должен быть на сайте, чтобы привлечь целевую аудиторию и увеличить трафик сайта? Самые популярные вопросы при составлении ТЗ копирайтеру." />
<meta property="og:type" content="article" />
<meta property="og:image" content="https://d-element.ru/upload/iblock/f48/oblozhka.png" />
<meta property="og:url" content="https://d-element.ru/about/blog/kakoy-tekst-neobkhodim-dlya-prodvizheniya" />

Подробнее о том, как установить Open Graph к себе на сайт мы описали в статье.

Официальный сайт Open Graph.

3. Dublin Core

Микроразметка Dublin Core была создана в 1995 г. для формирования большой библиотеки сайтов во всемирной паутине. Является стандартом разметки всемирной паутины.

В России с 2011 года для него даже действует государственный стандарт ГОСТ Р 7.0.10-2010 (ИСО 15836:2009).

Национальный стандарт Российской Федерации. Система стандартов по информации, библиотечному и издательскому делу. Набор элементов метаданных «Дублинское ядро».

Dublin Core устанавливается также, как Open Graph – для всей страницы сразу.

Разметка используется для разметки страниц сайта и разделения его на тематически составляющие страницы.

Таким образом, можно сказать поисковым роботам как правильно индексировать эту страницу.

В настоящее время нельзя увидеть явные изменения по сайту, используя разметку Dublin Core, но абсолютно точно можно сказать, что поисковые системы не могут игнорировать её. По крайней мере, в России. Влияет ли разметка на SEO доподлинно неизвестно. Именно из-за отсутствия видимого результата многие не используют эту разметку.

Мы связались с тех. поддержкой Яндекса, они ответили, что разметка Dublin Core никак не влияет на его продвижение.

Пример разметки страницы внутри HTML

<meta name="DC.title" content="заголовок"/>
<meta name="DC.creator" content="создатель"/>
<meta name="DC.description" content="описание" />
<meta name="DC.subject" content="ключевые слова"/>
<meta name="DC.publisher" content="издатель" />
<meta name="DC.publisher.url" content="полная ссылка на сайт издателя" />
<meta name="DC.contributor" content="соисполнитель" />
<meta name="DC.date" content="дата в формате UTC" />
<meta name="DC.type" content="тип страницы" />
<meta name="DC.language" content="ru-RU" />

Подробнее о том, как установить Dublin Core к себе на сайт мы описали в статье.

Официальный сайт Dublin Core.

4. Microformats

Микроразметка Microformats очень похожа на Schema.org. Имеет множество свойств для разметки данных, но большая часть находится в стадии черновиков. Проигрывает Schema.org из-за меньшего количества набора объектов и свойств.

Микроформаты (Microformats) были созданы в 2007 году инициативной группой. Они хотели создать стандарт семантической разметки сайтов, используя уже существующие технологии. И это было их реальным плюсом на старте, но сейчас добавлять разметку микроформатов стало не проще, а иногда и сложней по сравнению с schema.org. Сейчас микроразметку используют все меньше и меньше.

В 2013 г. был анонсирован новый формат — microformats 2, в котором есть новые названия классов и упрощения для уже используемых свойств, но на популярности этой микроразметки это почти никак не сыграло.

Микроформаты, как и schema.org, используются для SEO оптимизации.

В настоящее время поисковыми системами поддерживаются микроформаты:

• hCard — формат разметки контактной информации (адресов, телефонов и т.д.);
• hRecipe — формат для описания кулинарных рецептов;
• hReview — формат разметки отзывов (Яндекс не поддерживает);
• hProduct — формат разметки товаров (Яндекс не поддерживает).

Стоит отметить, что микроформаты – это открытый формат. Это означает, что вы не сможете проконтролировать, какие именно сервисы возьмут данные и как в дальнейшем они их будут использовать.

Пример разметки hCard внутри HTML

<div class="vcard">
  <div>
     <span class="category">Кафе</span>
     <span class="fn org">Шафран</span>
  </div>
  <div class="adr">
     <span class="locality">Город</span>,
     <span class="street-address">адрес</span>
  </div> 
  <div>Телефон: <span class="tel">+7 (999) 999-99-99</span></div>
  <div>
     Мы работаем 
     <span class="workhours">ПН-ПТ с 09:00 до 18:00</span>
     <span class="url">
        <span class="value-title" title="ссылка на сайт кафе"></span>
     </span>
  </div>
</div>

Подробнее о том, как установить Микроформаты к себе на сайт мы описали в статье.

Официальный сайт Microformats.org.

5. Data vocabulary

Микроразметка Data vocabulary разрабатывалась компанией Google. На данный момент, разработка словаря приостановлена и плавно перетекла в сторону schema.org.

Сейчас уже нет смысла устанавливать её на сайт, т.к. компания перестала её поддерживать в 2011 г.

Ранее разметка поддерживала типы Person, Organization, Breadcrumb, Review, Product, Address. Сейчас эти типы также используются в Schema.org.

Официальный сайт Data vocabulary.

6. Good Relations

Разметка Good Relations была создана в 2008 г. и изначально планировалось использовать её для описания товаров и услуг. В 2012 г. разработка Good Relations интегрирована в Schema.org и теперь её, по сути, не существует. В Рунете этот словарь практически не использовался и с 2008 по 2012 её распознавал только Google.

Пример разметки товара внутри HTML

<div typeof="gr:Offering" about="#offer">
   <div property="gr:name">название товара</div>
   <link rel="gr:hasBusinessFunction" resource="http://purl.org/goodrelations/v1#Sell" />
   <div rel="gr:hasPriceSpecification">
      <div typeof="gr:UnitPriceSpecification">Цена:
      <span property="gr:hasCurrency" content="валюта">валюта</span>
      <span property="gr:hasCurrencyValue" datatype="xsd:float">стоимость</span>
      <div property="gr:validThrough" datatype="xsd:dateTime" content="дата в формате UTC"></div>
   </div>
</div>

Еще примеры. У разметки также есть свой валидатор.

Официальный сайт Good Relations.

Рекомендации

На сегодняшний день рекомендуем использовать микроразметку Schema.org и Open Graph, остальные виды микроразметки уже не поддерживаются или стали не актуальны.