Микроразметка 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

Тег	Описание	Пример
vcard*	Свойство начала разметки контактных данных организации	<div class="vcard">...</div>
category	Категория пункта (офис, магазин, кафе, ресторан и пр.) для отметки контакта.	<div class="category">Офис</div>
fn*	Название (полное).	<div class="fn">ООО «Цифровой элемент</div>
org	Название организации.	<div class="org">Цифровой элемент</div>
adr	Свойство начала разметки адреса компании.	<div class="adr">…</div>
country-name	Название страны.	<div class="country-name">Россия</div>
region	Название области/округа.	<div class="region">Челябинская область</div>
locality	Название города.	<div class="locality">Челябинск</div>
street-address	Название улицы + название дома, кв или строения.	<div class="street-address">ул. Энтузиастов 2</div>
tel	Телефон организации.	<div class="tel">+7 (351) 225-64-27</div>
workhours	Время работы (это свойство добавлено Яндексом), подробнее на официальном сайте.	<div class="workhours">ПН-ПТ с 09:00 до 18:00</div>
url	Ссылка на домашнюю страницу для связи.	<div class="url"> https://d-element.ru</div>
photo	Изображение, логотип.	<div class="photo"></div>
email	Электронная почта.	<div class="email"></div>

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

Подробнее о разметке микроформата 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*	Свойство начала разметки рецепта.	<div class="hrecipe">...</div>
fn*	Название блюда (рецепта).	<div class="fn">Манка</div>
category**	Тип блюда. Текстовое значение.	<div class="category">Горячее блюдо</div>
sub-category**	Подтип блюда. Текстовое значение.	<div class="sub-category">Блюдо из птицы</div>
photo	Свойство photo может быть внутри общего класса hrecipe, либо внутри instructions.	<img class="photo" src="ссылка на изображение" />
result-photo**	Свойство result-photo не предусмотрено стандартом hRecipe, оно добавлено Яндексом в качестве расширения.	<img class="result-photo" src="ссылка на изображение">
ingredient*	Свойство начала разметки ингредиентов.	<div class="ingredient">…</div>
name	Название ингредиента.	<div class="name">Молоко</div>
value	Количество ингредиента. Рациональное число. Используется только вместе с type.	<div class="value">0.5</div>
type	Тип значения количества ингредиента.	<div class="type">л</div>
amount	Количество ингредиента в свободном формате. Используется вместо type и value.	<div class="amount">1</div> или <div class="amount">по вкусу</div>
author	Автор рецепта.	<div class="author">Матильда</div>
servingSize	Размер блюда для указаний свойств nutrion (энергетической ценности), обычно используют 100 г.	<div class="servingSize">100 г.</div>
nutrition	Свойство начала разметки энергетической ценности блюда (рецепта).	<div class="nutrion">…</div>
calories	Калорийность.	<div class="calories">200 ккал</div>
fat	Жиры.	<div class="fat">10 г.</div>
saturatedFat	Насыщенные жиры.	по примеру жиров
unsaturatedFat	Ненасыщенные жиры.	по примеру жиров
carbohydrates	Углеводы.	по примеру жиров
sugar	Сахар.	по примеру жиров
fiber	Клетчатка.	по примеру жиров
protein	Белки.	по примеру жиров
cholesterol	Холестерин.	по примеру жиров
duration	Время приготовления. В формате ISO 8601.	<div class="duration">1 час</div>
yield	Количество порций на человека.	<div>Блюдо рассчитано на <span class="yield">3 человек</span>.</div>
cuisine-type**	Национальная кухня, к которой относится блюдо. Текстовое значение.	<div class="cuisine-type">Рецепт русской кухни</div>
weight**	Вес готового блюда.	<div class="weight">2,7 кг.</div>

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

** — расширения от Яндекса, не предусмотренные в стандарте 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*	Свойство начала разметки отзыва.	<div class="hreview">...</div>
summary	Краткий синопсис, заголовок или название отзыва.	<h2 class="summary"><span class="item fn">Молочная каша</span> просто супер</h2>
item*	Объект отзыва. То, о чем отзыв. Должно иметь вложенное свойство fn.	<div class="item"><span class="fn">Цифровой элемент</span></div>
reviewer*	Автор отзыва. Должно иметь вложенное свойство fn.	<div class="reviewer fn">Иван Иванов</div>
dtreviewed*	Дата написания отзыва в формате ISO 8601.	<time class="dtreviewed" datetime="2020-01-01" title="2020-01-01">01.01.2020</time>
rating	Рейтинг отзыва с фиксированной точкой.	<div><span class="rating">4.5</span> из 5</div>
description	Полный текст отзыва.	<div class="description">Молочная каша просто супер, никогда такую не пробовал!</div>
permalink	Ссылка на полный текст отзыва. Ссылка должна быть уникальной и постоянной.	<a href="https:// d-element.ru/about/reviews/" class="permalink">ссылка_на_отзыв</div>
type*	Предмет отзыва. То, о ком отзыв. Возможные значения: event business place website person url product	<div class="type">event</div>

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

Подробнее о разметке микроформата 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*	Свойство начала разметки продукта.	<div class="hproduct">...</div>
fn*	Название. Может выступать в роли названия модели товара.	<div class="fn">Принтер HP laser 3200</div>
availability	Наличие. Может иметь значение: out of stock (нет в наличии) in stock (в наличии) instore only (только в магазине) preorder (под заказ)	<span class="availability"><span class="title-value" title="In stock">В наличии</span>
price	Цена.	<span class="price">119 руб.</span>
count	Количество в наличии. Натуральное число.	<span class="count">50</span>
identifier	Идентификатор товара. Имеет обязательные вложенные свойства type и value. type может принимать значение: model mpn upc isbn issn ean jan sn vin sku value может содержать любое обозначение в виде идентификатора.	<div class="identifier"> <span class="type">SKU</span> <span class="value">12223f</span> </div>
photo	Изображение.	<img class="photo" src="ссылка">
url	Ссылка на товар такого же типа на веб-сайте.	<a href="ссылка" class="url">ссылка</a>
review	Отзывы о товаре. Используется как объект начала разметки отзывов. Для разметки обратитесь к микроформату hReview. Подробнее на официальном сайте.	<div class="review hreview-aggregate">…</div>
brand	Бренд.	<div class="brand">BMW</div>
category	Категория.	<div class="category">Авто</div>

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

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

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

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

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

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

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

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