10 минут на чтение Отправь статью на почту?

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

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

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

Микроформаты — это формат микроразметки, похожий на 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 (стилями), которые установлены для этих классов.

Популярное

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