Микроформаты — это формат микроразметки, похожий на 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 можно разметить способами:
<span class="fn">название товара</span>
<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 *
|
Предмет отзыва. То, о ком отзыв. Возможные значения:
|
<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
|
Наличие. Может иметь значение:
|
<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 может принимать значение:
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 (стилями), которые установлены для этих классов.