Микроразметка Microformats

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

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

Разработкой микроформатов занималась инициативная группа с 2007 г., в которую входил руководитель по продуктам Google, поэтому большинство микроформатов успешно перетекло в schema.org, которой Google занимается по настоящее время.

Популярность микроформатов на данный момент стала очень низкой из-за schema.org, которая внедряется намного проще (с помощью дополнительных свойств) и поддерживает большее количество свойств и объектов.

Микроформаты, как и любая микроразметка, внедряются на уровне HTML кода.

Зачем нужно использовать микроформаты

Микроформаты используются для показа расширенного сниппета в поисковых системах.

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

Поддержка микроформатов

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

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

Google поддерживает все микроформаты, но с учетом соответствия стандартам schema.org. В списке отсутствуют более сырые/неактуальные микроформаты: hAtom, hCalendar, hListing, hMedia, hResume. Все микроформаты можно увидеть на официальном сайте.

Способы разметки микроформатов

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

1. <span class="fn">название товара</span>
2. <span class="fn"><span class="value-title" title="реальное_название_товара">название товара видное пользователям</span>

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

Пример разметки контактных данных:

<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">ул. Энтузиастов 2</span>
   </div>
   <div>Телефон: <span class="tel">+7 (351) 225-64-27</span></div>
   <div>Мы работаем <span class="workhours">ПН-ПТ с 09:00 до 18:00</span></div>
</div>

Теги hCard

* - обязательные свойства.

Подробнее о разметке микроформата hCard читайте на официальном сайте. Как обрабатывает hCard Яндекс можно почитать здесь.

Генерация разметки hCard

Для генерации разметки рецептов можно воспользоваться:

• hCard Creator — официальный онлайн сервис для генерации разметки;
• hcardcreator.com — онлайн сервис генерации разметки;
• Wordpress plugin — плагин CMS Wordpress для генерации hCard.

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

Пример простой разметки рецепта:

 <div class="hrecipe">
    <h1 class="fn">Манка</h1>
    <h2>Ингредиенты</h2>
    <ul>
        <li class="ingredient">
            <span class="name">Молоко</span>
            <span class="amount">1</span>
            <span class="type">л</span>
        </li>
        <li class="ingredient">
            <span class="name">Манная крупа</span>
            <span class="value">0.5</span>
            <span class="type">л</span>
        </li>
        <li class="ingredient">
            <span class="name">соль</span>
        </li>
        <li class="ingredient">
            <span class="name">перец</span>
        </li>
        <li class="ingredient">
            <span class="name">специи</span>
            <span class="amount">по вкусу</span>
        </li>
    </ul>
    <h2>Способ приготовления</h2>
    <ul class="instructions">
        <li class="instruction">1. Поставить кастрюлю с водой, высыпать манную крупу в холодную воду, добавить молока, посолить, поперчить, добавить специи по вкусу.</li>
        <li class="instruction">2. Готовить на медленном огне, помешивать до полного приготовления в течение 20 минут.</li>
    </ul>
</div>

Теги hRecipe

* — обязательные свойства.

** — расширения от Яндекса, не предусмотренные в стандарте hRecipe. Подробнее.

Подробнее о разметке микроформата hRecipe читайте на официальном сайте. Как обрабатывает hRecipe Яндекс можно почитать здесь.

Генерация разметки hRecipe

Для генерации разметки рецептов можно воспользоваться:

• RecipeSEO — онлайн сервис генерации разметки;
• Wordpress plugin — плагин для CMS Wordpress;
• Расширение Google Chrome — расширение для автоматического считывания и проверки размеченных данных.

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

Пример простой разметки отзыва о товаре или услуге:

<div class="hreview">
   <h2 class="summary"><span class="item fn">iPhone 10</span> просто супер</h2>
   <div class="item">
      <img src="ссылка_на_изображение_товара" class="photo" />
      <span class="fn">Название_товара</span>
   </div>
   <div class="type">product</div>
   <p class="description">Лучший товар из всех, что я покупал!</p>
   <div class="reviewer">Автор отзыва:
      <span class="fn">Иванов Иван</span>,
      <time class="dtreviewed" datetime="2020-01-01">2020-01-01</time>
   </div>
   <a href="ссылка_на_отзыв" class="permalink">ссылка_на_отзыв</a>
</div>

Пример простой разметки отзыва о ресторане:

<div class="hreview">
   <h2 class="summary"><span class="item fn">Цифровой элемент</span> просто класс!</h2>
   <div>Автор отзыва:
      <span class="reviewer fn">Иванов Иван</span>,
      <time class="dtreviewed" datetime="2020-01-01" title="2020-01-01">2020-01-01</time>
   </div>
   <div class="type">business</div>
   <div class="description">Пользовались услугами рекламы, остались всем довольны, спасибо!</div>
   <div class="reviewer">
      <span class="fn">Аноним</span>
   </div>
   <a href="ссылка_на_отзыв" class="permalink">ссылка_на_отзыв</a>
</div>

больше примеров на официальном сайте.

Теги hReview

* — обязательные свойства.

Подробнее о разметке микроформата hReview читайте на официальном сайте.

Генерация разметки hReview

Для генерации разметки отзывов можно воспользоваться:

• hReview creator — официальный онлайн сервис генерации разметки;
• Wordpress plugin — плагин для CMS Wordpress.

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

Пример простой разметки товара или услуги:

<div class="hproduct">
  <div class="brand">BMW</div>
  <div class="category">auto</div>
  <div class="price">1 990 000 руб.</div>
  <div class="description">Автомобиль BMW по выгодной цене! Успей купить!</div>
  <div class="fn">BMW X5 Sports</div>
  <div><img class="photo" src="ссылка"></div>
  <div class="identifier">
     <span class="type">SKU</span>
     <span class="value">1666</span>
  </div>
</div>

Больше примеров на официальном сайте.

* - обязательные свойства.

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

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

Проверить установку микроразметки можно через:

• Проверка через валидатор Яндекс
• Проверка через валидатор Google (устарело). Google полностью перенес проверку микроформатов на стандарты schema.org
• Проверка hCard

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

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

Во-первых, поисковые системы вскоре могут отказаться от их поддержки из-за сложностей в их установке. Во-вторых, установка микроформатов внедряется, в основном, с помощью классов, что может создавать конфликтные ситуации с CSS (стилями), которые установлены для этих классов.