Цифровой элемент
7 минут на чтение Отправь статью на почту?

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

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

Подписаться
5236

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

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

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

Любая микроразметка внедряется на уровне 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
Результат внедрения микроразметки 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.

Результат внедрения микроразметки 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.

Результат внедрения микроразметки микроформата hCard
Результат внедрения микроразметки микроформата hCard

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, остальные виды микроразметки уже не поддерживаются или стали не актуальны.


Мне не нравится
Россия, Челябинская область, Челябинск, ул. Энтузиастов, 2, оф. 200 Телефон: +7 (351) 220-45-35

Блог

Микроразметка schema.org
Микроразметка schema.org

Schema.org – микроразметка, позволяющая структурировать данные на сайте для поисковых систем. С ее помощью поисковые системы понимают, какие данные...

28 мая 2019
96250
TОП-40 плагинов Figma
TОП-40 плагинов Figma

Для создания дизайнов и прототипов большинство современных дизайнеров использует Figma. Его основное преимущество перед другими графическими прогр...

11 марта 2021
94241
Как попасть на Яндекс.Карты, Google.Карты, 2GIS
Как попасть на Яндекс.Карты, Google.Карты, 2GIS

Если ваша компания ведет бизнес офлайн, размещение на Яндекс.Картах и Google и 2GIS поможет рассказать об этом потенциальным клиентам. Присутствие...

17 июля 2019
91938
404 ошибка – страница не найдена
404 ошибка – страница не найдена

404 ошибка (страница не найдена) – это ответ сервера, который возникает, когда сервер не может отобразить запрашиваемую страницу по указанному адре...

13 августа 2019
40136
Семантика сайта
Семантика сайта

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

21 октября 2019
17706
Как предоставить гостевой доступ к Яндекс Директ и Google Adwords
Как предоставить гостевой доступ к Яндекс Директ и Google Adwords

Контекстная реклама — один из самых простых и быстрых способов увеличения посещений веб-сайта. Особенностью этого инструмента является понятность р...

19 января 2021
13731
Как составить ТЗ на разработку сайта
Как составить ТЗ на разработку сайта

ТЗ (техническое задание) – очень полезный документ, в котором описаны все разделы сайта, все элементы страницы и функциональность всех модулей. Пол...

14 мая 2021
12766
Микроразметка Open Graph
Микроразметка Open Graph

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

5 ноября 2019
10518
Сброс кеша DNS в Google Chrome
Сброс кеша DNS в Google Chrome

Для сброса кеша DNS в Google Chrome: Введите в адресной строке браузера chrome://net-internals/#dns и нажмите кнопку Clear host cache; Зат...

31 января 2020
9554
Анализ сайта с помощью Яндекс.Метрики
Анализ сайта с помощью Яндекс.Метрики

Яндекс.Метрика – инструмент анализа аудитории сайта. Метрика позволяет сегментировать данные, определять целевую аудиторию сайта, достигать целей и...

20 декабря 2019
8909
Золотой партнер<br>1С-Битрикс
Золотой партнер
1С-Битрикс
Сертифицированное агентство <br>Яндекс.Директ
Сертифицированное агентство
Яндекс.Директ
Сертифицированное агентство <br>Google.AdWords
Сертифицированное агентство
Google.AdWords
Региональный партнер <br>Ru-center
Региональный партнер
Ru-center
Золотой партнер  <br>Битрикс24
Золотой партнер
Битрикс24