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

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

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

Подписаться

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

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

Пример сайта без микроразметки Schema.org:

Так выглядит сайт без микроразметки в выдаче поисковой системы

Сайт с микроразметкой:

Как выглядит сайт в поисковой системе с микроразметкой

Так видит размеченные данные поисковой робот

Так видит размеченные данные поисковой робот


Микроразметка Shema.org внедряется на уровне HTML кода. Ознакомиться с полным описанием микроразметки schema.org можно на официальном сайте.

Зачем нужна микроразметка Schema.org

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

А еще, при поиске определенного товара по ключевым запросам, Яндекс или Google может предложить ваш товар на своих площадках и сервисах с указанием свойств, которые вы разметили.

Какие данные можно разметить с помощью schema.org

Schema.org включает в себя большой набор объектов и их свойств. Сейчас их уже больше сотни.

Микроразметкой Schema.org можно разметить:

Типы разметки данных Schema.org

Любое свойство разметить по-разному. Например, название товара можно разными способами:

  1. <meta itemprop="name" content="название товара" />
  2. <div itemprop="name">название товара</div>
  3. <div itemprop="name"><h1>название товара</h1></div>

Ссылку на товар можно описать способами:

  1. <a itemprop="url" href="ссылка"></a>
  2. <meta itemprop="url" content="ссылка" />
  3. <link itemprop="url" href="ссылка" />

Способ разметки свойств зависит от преследуемых целей и задач. Некоторые интернет-магазины используют скрытую микроразметку с помощью тегов <meta> или <link>, которые изначально не видны, но доступны для просмотра через исходный код страницы.



Допустим, у нас есть такая шапка:

<head>
      <title>название_страницы</title>>
      <meta name="description" content="описание_сайта">
      <meta name="keywords" content="ключевые_слова_тематики_сайта">
      …
</head>

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

<head itemscope itemtype="http://schema.org/WPHeader">
       <title itemprop="headline">название_страницы</title>
       <meta itemprop="description" name="description" content="описание_страницы">
       <meta itemprop="keywords" name="keywords" content="ключевые_слова_для_страницы">
       …
</head>

Для WPHeader предусмотрено множество свойств. Ознакомиться c ними и добавить их вы сможете самостоятельно, просмотрев страницу о объекте.



Главное меню без разметки:

<ul>
      <li>
            <a href="ссылка">название_пункта_меню_1</a>
      </li>
      <li>
            <a href="ссылка">название_пункта_меню_2</a>
      </li>
      <li>
            <a href="ссылка">название_пункта_меню_3</a>
      </li>
      <li>
            <a href="ссылка">название_пункта_меню_4</a>
      </li>
      <li>
            <a href="ссылка">название_пункта_меню_5</a>
      </li>
      <li>
            <a href="ссылка">название_пункта_меню_6</a>
      </li>
</ul>

Главное меню с микроразметкой:

<ul itemscope itemtype="http://schema.org/SiteNavigationElement">
       <li>
              <a itemprop="url" href="ссылка">название_пункта_меню_1</a>
       </li>
       <li>
              <a itemprop="url" href="ссылка">название_пункта_меню_2</a>
       </li>
       <li>
              <a itemprop="url" href="ссылка">название_пункта_меню_3</a>
       </li>
       <li>
              <a itemprop="url" href="ссылка">название_пункта_меню_4</a>
       </li>
       <li>
              <a itemprop="url" href="ссылка">название_пункта_меню_5</a>
       </li>
       <li>
              <a itemprop="url" href="ссылка">название_пункта_меню_6</a>
       </li>
</ul>


Хлебные крошки без микроразметки:

<ul>
      <li>
            <a href="ссылка">
                <span>название_1_пункта</span>
            </a>
      </li>
      <li>
            <a href="ссылка">
                <span>название_1_пункта</span>
            </a>
      </li>
      <li>
            <a href="ссылка">
                <span>название_1_пункта</span>
            </a>
      </li>
      …
</ul>

Хлебные крошки c микроразметкой:

<ul itemscope itemtype="http://schema.org/BreadcrumbList">
       <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
              <a itemprop="item" href="ссылка">
                     <span itemprop="name">название_1_пункта </span>
              </a>
              <meta itemprop="position" content="1" />
       </li>
       <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
             <a itemprop="item" href="ссылка" >
                    <span itemprop="name">название_2_пункта</span>
             </a>
             <meta itemprop="position" content="2" />
       </li>
       <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
             <a itemprop="item" href="ссылка">
                    <span itemprop="name">название_3_пункта</span>
             </a>
             <meta itemprop="position" content="3" />
       </li>
       …
</ul>

Другие примеры можно посмотреть на официальном сайте schema.org.

Как разметить последний элемент хлебных крошек (breadcrumbs)

Последний элемент размечать нужно ссылкой, через тег <a> без атрибута href:

<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
   <a itemprop="item">
     <span itemprop="name">название_последнего_пункта</span>
   </a>
   <meta itemprop="position" content="4">
</li>

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



Пример разметки организации (Organization и LocalBusiness)

Объект Organization – более крупная организация, частью которой является объект LocalBusiness, если есть. Пример Organization – школа, НПО, корпорация. и др.

Объект LocalBusiness – филиал объекта Organization. Обычно LocalBusiness – это ресторан, ресторан сети ресторанов, филиал банка, клуб, боулинг и др.

Рекомендуем размечать юр. адрес типом Organization, остальные филиалы – через LocalBusiness. Объекты не должны быть вложены в друг друга (!), как может показаться изначально.

Организация без микроразметки (Organization):

<div>
       <div>название_компании</div>
       <div><img src="ссылка_на_логотип" /></div>
       <div>почтовый_индекс, Страна, Область, Город, улица, номер дома</div>
       <div>Телефон: <a href="tel:+79999999999">+7 (999) 999-99-99</a></div>
       <div>Почта: <a href="mailto:email@email.ru">email@email.ru</a></div>
       <div>Факс: <a href="tel:+79999999999">+7 (999) 999-99-99</a></div>
</div>

Организация с микроразметкой (Organization):

<div itemscope itemtype="http://schema.org/Organization">
       <div itemprop="name">название_компании</div>
       <link itemprop="url" href="ссылка_на_сайт">
       <div itemprop="address" itemscope itemtype="https://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>

Филиал без микроразметки (LocalBusiness):

<div>
    <span>ООО «Цифровой элемент»</span>
    <div>454000, Челябинск, ул. Энгельса, д.2, оф. 200</div>
    <span>8 (800) 555–85–89</span>
    <span>info@d-element.ru</span>
    <time>Пн-Пт, 9:00 – 18:00</time>
</div>

Филиал с микроразметкой (LocalBusiness):

<div itemscope itemtype="http://schema.org/LocalBusiness">
    <span itemprop="name">ООО «Цифровой элемент»</span>
    <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
        <meta itemprop="streetAddress" content="ул. Энгельса, д.2, оф. 200">
        <meta itemprop="postalCode" content="454000">
        <meta itemprop="addressLocality" content="Челябинск">
    </span>
    <span itemprop="telephone">8 (800) 555–85–89</span>
    <span itemprop="email">info@d-element.ru</span>
    <time itemprop="openingHours" datetime="Mo-Fr, 9:00−18:00">Пн-Пт, 9:00 – 18:00</time>
    <img itemprop="image" src="ссылка на изображение филиала" />
</div>

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



Пример разметки списка товаров (Products list)

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

<ul>
        <li>
                <a href="ссылка_на_товар">
                        <img src="ссылка_на_изображение_товара">
                        <div>название_товара</div>
                        <div>
                               <span>47280</span>
                               <span>руб.</span>
                        </div>
                        <div>Бренд</div>
                        <div>Модель</div>
                </a>
        </li>
        <li>
                <a href="ссылка_на_товар">
                       <img src="ссылка_на_изображение_товара">
                       <div>название_товара</div>
                       <div>
                              <span>47280</span>
                              <span>руб.</span>
                       </div>
                       <div>Бренд</div>
                       <div>Модель</div>
                </a>
        </li>
        <li>
                <a href="ссылка_на_товар">
                       <img src="ссылка_на_изображение_товара">
                       <div>название_товара</div>
                       <div>
                              <span>47280</span>
                              <span>руб.</span>
                       </div>
                       <div>Бренд</div>
                       <div>Модель</div>
                </a>
         </li>
</ul>

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

<ul itemscope itemtype="http://schema.org/ItemList">
       <li itemscope itemprop="itemListElement" itemtype="http://schema.org/Product">
              <a itemprop="url" href="ссылка_на_товар_1">
                     <img itemprop="image" src="ссылка_на_изображение_товара">
                     <meta itemprop="description" content="описание_товара">
                     <div itemprop="name">название_товара</div>
                     <div itemscope itemprop="offers" itemtype="http://schema.org/Offer">
                            <div><span itemprop="price">47280</span> руб.</div>
                            <meta itemprop="priceCurrency" content="RUB">
                            <meta itemprop="availability" content="http://schema.org/InStock" />
</div> <div itemprop="brand">Бренд</div> <div itemprop="model">Модель</div> </a> </li> <li itemscope itemprop="itemListElement" itemtype="http://schema.org/Product"> <a itemprop="url" href="ссылка_на_товар_2"> <img itemprop="image" src="ссылка_на_изображение_товара"> <meta itemprop="description" content="описание_товара"> <div itemprop="name">название_товара</div> <div itemscope itemprop="offers" itemtype="http://schema.org/Offer"> <div><span itemprop="price">47280</span> руб.</div> <meta itemprop="priceCurrency" content="RUB" /> <meta itemprop="availability" content="http://schema.org/InStock" />
</div> <div itemprop="brand">Бренд</div> <div itemprop="model">Модель</div> </a> </li> <li itemscope itemprop="itemListElement" itemtype="http://schema.org/Product"> <a itemprop="url" href="ссылка_на_товар_3"> <img itemprop="image" src="ссылка_на_изображение_товара"> <meta itemprop="description" content="описание_товара"> <div itemprop="name">название_товара</div> <div itemscope itemprop="offers" itemtype="http://schema.org/Offer"> <div><span itemprop="price">47280</span> руб.</div> <meta itemprop="priceCurrency" content="RUB" /> <meta itemprop="availability" content="http://schema.org/InStock" />
</div> <div itemprop="brand">Бренд</div> <div itemprop="model">Модель</div> </a> </li> </ul>

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

Для Google не допускается разметка списка товаров при наличии детальной страницы (написано в документации). Поэтому, размечайте список только если ссылка на отдельную страницу товара отсутствует. Если детальная страница товара есть, размечайте только её.



Пример разметки товара (Product → Offer)

Товар без микроразметки:

<div>
   <h1>наименование_товара</h1>
   <a href="ссылка-на-увеличенное-изображение.jpg">
       <img src="ссылка_на_изображение_товара" />
   </a>
    <div>
       <div>В наличии</div>
    </div>
    <div>Описание товара</div>
</div> 

Товар с микроразметкой:

<div itemscope itemtype="http://schema.org/Product">
       <h1 itemprop="name">наименование_товара</h1>
       <a href="ссылка-на-увеличенное-изображение.jpg">
              <img itemprop="image" src="ссылка_на_изображение_товара" />
       </a>
       <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
              <meta itemprop="price" content="690.00">
              <meta itemprop="priceCurrency" content="RUB">
              <link itemprop="availability" href="http://schema.org/InStock">
              <div>В наличии</div>
       </div>
       <div itemprop="description">описание_товара</div>
</div>

Пример подробной микроразметки товаров:

<div itemscope itemtype="http://schema.org/Product">
       <span itemprop="name">Наименование_товара</span>
       <a href="ссылка-на-изображение.jpg"><img src="ссылка_на_изображение.jpg" itemprop="image" /></a>
       <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
              <span itemprop="ratingValue">4</span>
              <span itemprop="reviewCount">9</span> //рейтинг 4 основан на 9 оценках
       </div>
       <div itemprop="description">Описание_товара</div>
       <div>Производитель: <span itemprop="brand">название_бренда</span></div>
       <div>Модель: <span itemprop="model">номер_модели</span></div>
       <div>Остаток на складе: <span itemprop="sku">4</span></div>
       <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
              <span itemprop="priceCurrency" content="RUB">руб.</span>
              <span itemprop="price">699</span>
              <span><link itemprop="availability" href="http://schema.org/InStock"/>В наличии</span>
              <meta itemprop="priceValidUntil" content="2013-09-14T21:30">
              <div itemprop="review" itemscope itemtype="http://schema.org/Review">
                     <span itemprop="name">Заголовок отзыва</span>
                     от <span itemprop="author">Имя пользователя</span>,
                     <meta itemprop="datePublished" content="2013-09-14">
                     <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
                     <meta itemprop="worstRating" content="1"> //Минимальная оценка
                     <span itemprop="ratingValue">4</span> //Оценка пользователя
                     <span itemprop="bestRating">5</span>звезд. //Максимальная оценка
                     <span itemprop="description">текст_отзыва</span>
              </div>
        </div>
</div>

Каждый товар имеет свои особенности: где-то отсутствуют отзывы или нет названия бренда и т.д. Поэтому не всегда удается разметить товар подробно, но валидатор google будет это помечать.

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

Используемые свойства

Свойство или объект Описание свойства
http://schema.org/Product Указывается для начала разметки товара
http://schema.org/Offer Указывается для начала разметки свойств товара

http://schema.org/Review Указывается для начала разметки отзывов товара
http://schema.org/Rating Указывается для начала разметки рейтинга
name Название товара
image Изображение товара
price Цена товара
priceCurrency Валюта товара. Например: RUB, EURO, USD и т.д.
availability Доступность товара. Возможные значения:
  • http://schema.org/PreOrder - на заказ (товар под заказ).
  • http://schema.org/InStock - в наличии (товар есть в продаже).
  • http://schema.org/OutOfStock - отсутствует (товара нет в продаже).
description Описание товара
http://schema.org/AggregateRating Указывается для начала разметки рейтинга товара
ratingValue Сформированный рейтинг товара на основании голосов (оценка пользователей)
reviewCount Количество голосований (оценок) за рейтинг товара
brand Бренд товара
model Модель товара (артикул)
sku Остаток на складе (количество)
priceValidUntil Срок актуальности цены (до какого срока цена будет такой же)
name Заголовок отзыва (название)
author Автор отзыва (ФИО)
datePublished Дата публикации отзыва
worstRating Минимальная оценка отзыва
ratingValue Сформированный рейтинг отзыва на основании голосов (оценка пользователей)
bestRating Максимальная оценка отзыва
description Текст отзыва


Пример разметки услуги (Product → AggregateOffer)

Св-во AggregateOffer используется вместо Offer внутри объекта Product.

Бывают случаи, когда на сайте предлагают не товар, а услуги. Часто услуги не имеют точной цены и представлены "от" или в виде диапазона. Для этого случая можно использовать свойство AggregateOffer вместо обычного Offer. Примеры отображения с ценой "от" можно увидеть в нашей статье 7 способов привлечь внимание в поиске.

Рекомендуется использовать объект https://schema.org/Service в случае разметки услуг, но мы предлагаем более простое решение с использованием http://schema.org/Product.

Услуга без микроразметки:

<div>
       <div>Название услуги</div>
       <div>Описание услуги</div>
       <img src="ссылка_на_изображение_услуги" />
       <div>
              <div>Готовы оказать услугу! Оставляйте заявку!</div>
              <div>Цена: от 600 до 1000 руб.</div>
       </div>
</div>

Услуга с микроразметкой:

<div itemscope itemtype="http://schema.org/Product">
       <div itemprop="name">Название услуги</div>
       <div itemprop="description">Описание услуги</div>
       <img itemprop="image" src="ссылка_на_изображение_услуги" />

       <div itemprop="offers" itemscope itemtype="http://schema.org/AggregateOffer">
              <div>Готовы оказать услугу! Оставляйте заявку!</div>
              <meta itemprop="priceCurrency" content="RUB">
              <link itemprop="availability" href="http://schema.org/InStock">
              <div>Цена: от <span itemprop="lowPrice">600</span> до <span itemprop="highPrice">1000</span> руб.</div>
       </div>
</div>


Пример разметки списка статей блога (Blog)

Список статей без микроразметки:

<div>
       <article>
              <h2>название_статьи_1</h2>
              <time>2019-04-22T11:48:26+00:00</time>
              <img src="ссылка_на_постер_для_статьи">
              <p>краткое_описание_статьи</p>
              <p>Автор</p>
       </article>
       <article>
              <h2>название_статьи_1</h2>
              <time>2019-04-22T11:48:26+00:00</time>
              <img src="ссылка_на_постер_для_статьи">
              <p>краткое_описание_статьи</p>
              <p>Автор</p>
       </article>
       …
</div>

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

<div itemscope itemtype="http://schema.org/Blog">
       <div itemprop="description">описание_для_списка_статей</div>
       <article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting">
              <h2 itemprop="headline">название_статьи_1</h2>
              <time itemprop="datePublished" datetime="2019-04-22">22 апреля 2019</time>
              <img itemprop="image" src="ссылка_на_постер_для_статьи">
              <p itemprop="description">краткое_описание_статьи</p>
              <p itemprop="articleBody">полный_текст_статьи_анонс</p>
              <p itemprop="author">Автор</p>
              <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
                     <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
                            <img itemprop="url image" src="ссылка_на_логотип" />
                     </div>
                     <link itemprop="url" href="ссылка_на_сайт">
                     <div itemprop="address" itemscope itemtype="https://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>
                            <meta itemprop="name" content="название_сайта"> 
                     </div>
                     <meta itemprop="dateModified" content="2019-04-22T11:48:26+00:00">
                     <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="ссылка_на_статью"/>
              </div>
        </article>
        <article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting">
              <h2 itemprop="headline">название_статьи_2</h2>
              <time itemprop="datePublished" datetime="2019-04-22">22 апреля 2019</time>
              <img itemprop="image" src="ссылка_на_постер_для_статьи">
              <p itemprop="description">краткое_описание_статьи</p>
              <p itemprop="articleBody">полный_текст_статьи_анонс</p>
              <p itemprop="author">Автор</p>
              <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
                     <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
                            <img itemprop="url image" src="ссылка_на_логотип" />
                     </div>
                     <link itemprop="url" href="ссылка_на_сайт">
                     <div itemprop="address" itemscope itemtype="https://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>
                     <meta itemprop="name" content="название_сайта"> 
               </div>
               <meta itemprop="dateModified" content="2019-04-22T11:48:26+00:00">
               <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="ссылка_на_статью"/>
        </article>
        …
</div>


Как правильно разметить статью блога (Article, NewsArticle или BlogPosting)

Чем отличается тип Article, NewsArticle и BlogPostiing?

Типы используют практически одинаковые свойства и передают основные параметры (заголовок, тело статьи, дата публикации). Если поменять тип BlogPosting на Article ничего не изменится.

  • BlogPosting – схема для разметки статей в блоге и публикаций на сайте.
  • NewsArticle – схема для разметки новостей (новостных статей).
  • Article – общая схема. Подходит для всех типов текстовых материалов.

Статья без микроразметки:

<article>
       <p>Автор: Автор статьи</p>
       <span>Дата: <time>2019-04-22T11:48:26+00:00</time></span>
       <h1>название_статьи</h1>
       <img src="ссылка_на_изображение_статьи" />
       <div>полное_текст_статьи</div>
</article>

В разметке ниже, замените общий объект Article на NewsArticle или на BlogPosting, валидность сохранится. Это универсальная разметка.

Статья с микроразметкой:

<div itemscope itemtype="http://schema.org/Article">
       <p>Автор: <span itemprop="author">Автор статьи</span></p>
       <p>Дата публикации: <time itemprop="datePublished" datetime="2019-04-22">22 апреля 2019</time></p>
       <h1 itemprop="headline">название_статьи</h1>
       <img itemprop="image" src="ссылка_на_изображение_статьи" />
       <article itemprop="articleBody">полное_текст_статьи</article>
       <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
               <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
                      <img itemprop="url image" src="ссылка_на_логотип" />
                </div>
               <link itemprop="url" href="ссылка_на_сайт">
               <div itemprop="address" itemscope itemtype="https://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>
               <meta itemprop="name" content="название_сайта">
       </div>
       <meta itemprop="dateModified" content="2019-04-22T11:48:26+00:00">
       <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="ссылка_на_статью"/>
</div>


Как правильно разметить научную работу (CreativeWork)

Под научной работой можно понимать разные виды работы: реферат, книга, диссертация, курсовая и т.д.

Научная работа без микроразметки:

<div>
       <img alt="essay cover" src=​"essay.jpg" />
       <span>Сказки Пушкина</span>
       <span>Иван Петров</span>,
       <span>Александр Сергеевич Пушкин как выдающийся, великий русский поэт, драматург и прозаик. Общая характеристика творчества Пушкина в середине 20-х годов XIX века. История создания сказок. Образный мир и исторические корни сюжетов поэтических произведений.</span>
</div>

Научная работа с микроразметкой:

<div itemscope itemtype="http://schema.org/CreativeWork">
       <img itemprop="image" alt="essay cover" src=​"essay.jpg" />
       <meta itemprop="learningResourceType" content="StudentEssay">
       <span itemprop="name">Сказки Пушкина</span>
       <span itemprop="author">Иван Петров</span>,
       <span itemprop="description">Александр Сергеевич Пушкин как выдающийся, великий русский поэт, драматург и прозаик. Общая характеристика творчества Пушкина в середине 20-х годов XIX века. История создания сказок. Образный мир и исторические корни сюжетов поэтических произведений.</span>
</div>

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

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



Как правильно разметить фильм (Movie)

Фильм без микроразметки:

<div itemscope itemtype="http://schema.org/Movie"/>
       <h1>название_фильма</h1>
       <span>альтернативное_название_на_латинице</span>
       <a href="ссылка_на_фильм">
              <img src="ссылка_на_изображение_превьюшку_фильма" />
       </a>
       <p>
              <a href="ссылка_на_режиссера">фио_режиссера</a>,
              <a href="ссылка_на_режиссера">фио_режиссера</a>.
       </p>
       <p>
              <a href="ссылка_на_продюсера">фио_продюсера</a>,
              <a href="ссылка_на_продюсера">фио_продюсера</a>,
              <a href="ссылка_на_всех_продюсеров">и другие</a>.
       </p>
       <p>
              <a href="ссылка_на_композитора">фио_композитора</a>,
              <a href="ссылка_на_композитора">фио_композитора</a>.
       </p>
       <p>
              <a href="ссылка_на_категорию_жанра">название_жанра</a>,
              <a href="ссылка_на_категорию_жанра">название_жанра</a>,
              <a href="ссылка_на_категорию_жанров">и другие</a>.
       </p>
       <p>В главных ролях:</p>
       <div>
              <a href="ссылка_на_актёра">фио_актёра</a>
              <a href="ссылка_на_актёра">фио_актёра</a>
              <a href="ссылка_на_актёра">фио_актёра</a>
       </div>
</div>

Фильм c микроразметкой:

<div itemscope itemtype="http://schema.org/Movie"/>
       <h1 itemprop="name">название_фильма</h1>
       <span itemprop="alternativeHeadline">альтернативное_название_на_латинице</span>
       <a itemprop="url" href="ссылка_на_фильм">
              <img src="ссылка_на_изображение_превьюшку_фильма" itemprop="image" />
       </a>
       <p>
              <a itemprop="director" href="ссылка_на_режиссера">фио_режиссера</a>,
              <a itemprop="director" href="ссылка_на_режиссера">фио_режиссера</a>.
       </p>
       <p>
              <a itemprop="producer" href="ссылка_на_продюсера">фио_продюсера</a>,
              <a itemprop="producer" href="ссылка_на_продюсера">фио_продюсера</a>,
              <a href="ссылка_на_всех_продюсеров">и другие</a>.
       </p>
       <p>
              <a itemprop="musicBy" href="ссылка_на_композитора">фио_композитора</a>,
              <a itemprop="musicBy" href="ссылка_на_композитора">фио_композитора</a>.
       </p>
       <p>
              <a itemprop="genre" href="ссылка_на_категорию_жанра">название_жанра</a>,
              <a itemprop="genre" href="ссылка_на_категорию_жанра">название_жанра</a>,
              <a href="ссылка_на_категорию_жанров">и другие</a>.
       </p>
       <p>В главных ролях:</p>
       <div>
              <a itemprop="actor" href="ссылка_на_актёра">фио_актёра</a>
              <a itemprop="actor" href="ссылка_на_актёра">фио_актёра</a>
              <a itemprop="actor" href="ссылка_на_актёра">фио_актёра</a>
       </div>
       <div itemprop="video" itemscope itemtype="http://schema.org/VideoObject"/>
              <!-- Описание видеоролика, общее для всех видео -->
              <link itemprop="url" href="ссылка_на_фильм" />
              <span itemprop="description">описание_фильма</span>
              <meta itemprop="contentRating" content="официальный_рейтинг_фильма_возрастной_категории" />
              <meta itemprop="duration" content="PT1H30M" />
              <meta itemprop="uploadDate" content="2019-04-23T09:12:32+00:00" />
              <meta itemprop="inLanguage" content="ru" />
              <meta itemprop="isFamilyFriendly" content="true" />
              <meta itemprop="productionCompany" content="фио_компании_выпустившая_фильм" />
              <div>
                     <h1 itemprop="name">название_фильма</h1>
                     <span itemprop="alternativeHeadline">альтернативное_название_на_латинице</span>
                     <img src="ссылка_на_изображение_превьюшку_фильма" itemprop="thumbnailUrl thumbnail" />
              </div>
       </div>
       <meta itemprop="dateCreated" content="2019-04-23T09:12:32+00:00" />
</div>

Используемые свойства

Свойство или объект Описание свойства
http://schema.org/Movie Указывается для начала разметки фильма
http://schema.org/VideoObject Указывается для начала разметки объекта видео
director Режиссер фильма
producer Продюсер фильма
musicBy Композитор фильма или название группы
genre Жанр фильма
actor Актёр фильма
url Ссылка на фильм (видео)
description Краткое описание фильма
contentRating Возрастная категория фильма. Например, «MPAA R»
duration Продолжительность фильма, в формате ISO 8601. Например, промежуток 1 час 30 минут записывается как PT1H30M.
dateReleased Дата выхода фильма на экраны. Например, «2019-01-08T00:00:00»
uploadDate Дата загрузки фильма. Например, «2019-01-08T00:00:00»
dateCreated Дата окончания съемок фильма. Например, Например, «2019-01-08T00:00:00»
inLanguage Оригинальный язык фильма (ru, en, de и т.д.)
isFamilyFriendly True или False. Указывает, подходит ли этот фильм для семейного просмотра
productionCompany Кинокомпания, выпустившая фильм. Например, «Warner bros»
name Название фильма
alternativeHeadline Альтернативное название фильма на латинице
thumbnailUrl Постер фильма (изображение)
subtitleLanguage Язык субтитров (ru, en, de и т.д.)


Как правильно разметить рецепт (Recipe)

Рецепт без микроразметки:

<div>
       <h1>название_рецепта</h1>
       <div>описание_рецепта</div>
       <img src="ссылка_на_изображение_готового_блюда" />
       <ul>
              <li>Автор рецепта: Автор</li>
              <li>После приготовления вы получите 4 порции</li>
              <li>Время приготовления: 45 минут</li>
       </ul>
       <h2>ингредиенты</h2>
       <ul>
              <li>1 курица</li>
              <li>5 л пива</li>
              <li>соль</li>
              <li>перец</li>
              <li>специи по вкусу</li>
       </ul>
       <h2>способ_приготовления</h2>
       <ul>
              <li>
                     <img src="ссылка_на_изображение_ингредиента" />
                     Курицу нарезать на кусочки, выложить в форму для запекания, посолить, поперчить, добавить специи по вкусу.
              </li>
              <li>
                     <img src="ссылка_на_изображение_ингредиента" />
                     Курицу залить пивом, поставить в духовку.
              </li>
              <li>
                     <img src="ссылка_на_изображение_ингредиента" />
                     Жарить при температуре 180 градусов в течение 40—45 минут.
              </li>
       </ul>
       <span>Блюда из курицы</span>
       <div>
              Пищевая ценность: 
              <ul>
                     <li>Калории: 120 ккал.</li>
                     <li>Жиры: 7 г.</li>
                     <li>Углеводы: 1 г.</li>
              </ul>
       </div>
       Приятного аппетита!
</div>

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

<div itemscope itemtype="http://schema.org/Recipe"/>
       <h1 itemprop="name">название_рецепта</h1>
       <div itemprop="description">описание_рецепта</div>
       <div>Теги: <span itemprop="keywords">ключевые, слова, для, рецепта</span></div>
       <img itemprop="image" src="ссылка_на_изображение_готового_блюда" />
       <ul>
              <li>Автор рецепта: <span itemprop="author">Автор</span></li>
              <li>После приготовления вы получите <span itemprop="recipeYield">4 порции</span></li>
              <li>Время приготовления: <meta itemprop="totalTime" content="PT45M" />45 минут</li>
       </ul>
       <h2>ингредиенты</h2>
       <ul>
              <li itemprop="recipeIngredient">1 курица</li>
              <li itemprop="recipeIngredient">5 л пива</li>
              <li itemprop="recipeIngredient">соль</li>
              <li itemprop="recipeIngredient">перец</li>
              <li itemprop="recipeIngredient">специи по вкусу</li>
       </ul>
       <h2>способ_приготовления</h2>
       <ul itemprop="recipeInstructions" itemtype="https://schema.org/ItemList" itemscope>
              <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"/>
                     <img itemprop="image" src="ссылка_на_изображение_ингредиента" />
                     Курицу нарезать на кусочки, выложить в форму для запекания, посолить, поперчить, добавить специи по вкусу.
              </li>
              <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"/>
                     <img itemprop="image" src="ссылка_на_изображение_ингредиента" />
                     Курицу залить пивом, поставить в духовку.
              </li>
              <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"/>
                     <img itemprop="image" src="ссылка_на_изображение_ингредиента" />
                     Жарить при температуре 180 градусов в течение 40—45 минут.
              </li>
       </ul>
       <span itemprop="recipeCategory">Блюда из курицы</span>
       <div itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation"/>
              Пищевая ценность:
              <ul>
                     <li>Калории: <span itemprop="calories">120 ккал.</span>,</li>
                     <li>Жиры: <span itemprop="fatContent">7 г.</span></li>
                     <li>Углеводы: <span itemprop="carbohydrateContent">1 г.</span></li>
              </ul>
       </div>
       Приятного аппетита!
</div>

Используемые свойства

Свойство или объект Описание свойства
http://schema.org/Recipe Указывается для начала разметки рецепта
name Обязательное поле. (Текст) Название рецепта или блюда.
image (URL) URL изображения результата приготовления. Рекомендуем указать данное поле для формирования расширенного сниппета.
author (Текст, Person/name, Organization/name) Автор рецепта.
recipeYield (Текст) количество порций, получаемых с помощью рецепта.
totalTime (Duration) время приготовления. Указывается в формате ISO 8601. Например, «PT30M» (30 минут).
recipeIngredient Обязательное поле. (Текст) ингредиент рецепта и его объем, количество (может быть несколько).
recipeInstructions (Текст) Инструкция по приготовлению
image (URL) URL изображение процесса приготовления, может быть несколько. Рекомендуем указать данное поле для формирования расширенного сниппета.
recipeCategory (Текст) тип блюда. Например, горячее блюдо, десерт.
nutrition (NutritionInformation) энергетическая или пищевая ценность блюда, то есть содержание калорий, белков, жиров, углеводов, витаминов и т. д.
calories Калорийность.
fatContent Жиры.
carbohydrateContent Углеводы.
sugarContent Сахар.
fiberContent Клетчатка.
proteinContent Белки.
cholesterolContent Холестерин.
servingSize (Текст) порция, объем или вес для которого указывается информация о энергетической и пищевой ценности.


Как правильно разметить рисунок (Painting)

Изображение без микроразметки:

<div>
       <h1>название_изображения</h1>
       <img src="ссылка_на_изображение" />
       <a href="ссылка_на_автора">фио_автора</a>
       <span>Портрет</span>
       <span>описание_изображения</span>
</div>

Изображение с микроразметкой:

<div itemscope itemtype="http://schema.org/Painting" />
       <h1 itemprop="name">название_изображения</h1>
       <img src="ссылка_на_изображение" />
       <a href="ссылка_на_автора" itemprop="author">фио_автора</a>
       <span itemprop="genre">Портрет</span>
       <span itemprop="description">описание_изображения</span>
</div>


Как правильно разметить картинку (ImageObject)

Картинка без микроразметки:

<div>
       <div>Компьютер</div>
       <img src=​"computer.jpg" />
       <span>Компьютер стоит на столе.</span>
</div>

Картинка с микроразметкой:

<div itemscope itemtype="http://schema.org/ImageObject">
       <div itemprop="name">Компьютер</div>
       <img src="computer.jpg" itemprop="contentUrl" />
       <span itemprop="description">Компьютер стоит на столе.</span>
</div>


Как правильно разметить видео (VideoObject)

Видео без микроразметки:

 <div>
	 <link href="ссылка_на_видео">
	 <meta content="название_видео" />
	 <p>описание_видео</p>
	 <p>Дата загрузки: 2013-06-05T00:00:00</p>
</div>

Видео с микроразметкой:

<div itemscope itemtype="http://schema.org/VideoObject">
	<link itemprop="url" href="ссылка_на_видео">
	<meta itemprop="name" content="название_видео">
	<p itemprop="description">описание_видео</p>
	<meta itemprop="duration" content="PT6M58S" />
	<meta itemprop="isFamilyFriendly" content="true">
	<link itemprop="thumbnailUrl" href="превьюшка_изображение"/>
	<p>Дата загрузки: <span itemprop="uploadDate">2013-06-05T00:00:00</span></p>
	<div itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject">
        <img itemprop="contentUrl" src="превьюшка_изображение">
	       <meta itemprop="width" content="250">
	       <meta itemprop="height" content="120">
	</div>
</div>


Как правильно разметить событие (Event)

Событие без микроразметки:

<div itemscope itemtype="http://schema.org/Event" />
        <img src="изображение_или_постер_события.jpg" />
	<div>название_события</div>
	<div>описание_события</div>
	<div>
	       Концерт состоится 8 мая, в 19:30
	       Окончание концерта 8 мая, в 20:30
	</div>
	<div>
	       Место проведения: страна_или_город, полный_адрес
	</div>
	<div>фио_исполнителя_или_название_группы</div>
</div>

Событие c микроразметкой:

<div itemscope itemtype="http://schema.org/Event" />
	<img itemprop="image" src="изображение_или_постер_события.jpg" />
	<div itemprop="name">название_события</div>
	<div itemprop="description">описание_события</div>
	<div>
                Концерт состоится
	       <time itemprop="startDate" datetime="2019-05-08T19:30">8 мая, в 19:30</time>
	       Окончание концерта
	       <time itemprop="endDate" datetime="2019-05-08T20:30">8 мая, в 20:30</time>
	</div>
	<div itemprop="location" itemscope itemtype="http://schema.org/Place" />
	       Место проведения: <span itemprop="name">страна_или_город</span>,
	       <span itemprop="address">полный_адрес</span>
	</div>
	<div itemprop="performer" itemscope itemtype="http://schema.org/Person" />
	        <span itemprop="name">фио_исполнителя_или_название_группы</span>
	 </div>
</div>


Как правильно разметить Вопрос-ответ (Question)

Является дочерним объектом типа FAQPage и QAPage.

Вопрос-ответ без микроразметки:

<div>
       <div>Как продвинуть сайт в Москве?</div>
       <div>Сколько не пытаюсь, не получается.</div>
       <div>Ответ №1: <span>Для начала прочитайте статью на тему, как продвинуть сайт в регионах: https://d-element.ru/about/blog/kak-prodvinut-sayt-v-regionakh/</span></div>
       <div>Ответ №2: <span>Кто бы умел...</span></div>
</div>

Вопрос-ответ c микроразметкой (FAQ Page) (один вопрос — один ответ):

<div itemscope itemtype="https://schema.org/FAQPage">
       <div itemprop="mainEntity" itemscope itemtype="https://schema.org/Question">
              <div itemprop="name">Как продвинуть сайт в Москве?</div>
              <div itemprop="text">Сколько не пытаюсь, не получается.</div>
              <span itemprop="answerCount">1</span> ответ</div>
              <div itemprop="upvoteCount">196</div> //Всего голосов за вопрос
              <div itemprop="acceptedAnswer" itemscope="" itemtype="http://schema.org/Answer"> 
                     <div itemprop="upvoteCount"/>3</div> //Всего голосов за ответ
                     Ответ: <span itemprop="text">Для начала прочитайте статью на тему, как продвинуть сайт в регионах: https://d-element.ru/about/blog/kak-prodvinut-sayt-v-regionakh/</span>
              </div>
       </div>
</div>

Пример подробной микроразметки Вопрос-ответ (с возможностью ответа на вопросы, один вопрос — несколько ответов) для типа QAPage:

<div itemscope itemtype="https://schema.org/QAPage">
       <div itemscope itemtype="http://schema.org/Question">
              <h1 itemprop="name">Как продвинуть сайт в Москве?</h1>
              <div itemprop="upvoteCount">196</div>
              <div itemprop="text">Как добиться результата? С чего лучше начать?</div>
              <span itemprop="answerCount">2</span> ответа</div>
              <div><time itemprop="dateCreated" datetime="2019-11-11T20:07Z">11 ноября, 20:03</time></div>
     
              <div itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">Имя_пользователя_кто_задал_вопрос</span></div>
              <div>Всего задал <span itemprop="answerCount">4</span> вопроса</div>
              <div itemprop="suggestedAnswer acceptedAnswer" itemscope itemtype="http://schema.org/Answer">
                     <div itemprop="upvoteCount">всего_голосов_за_этот_ответ</div>
                     <div itemprop="text">текст_ответа</div>
                     <div>Ответ оставлен <time itemprop="dateCreated" datetime="2019-12-01T22:06Z">1 декабря, 22:06</time></div>
                     <div itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">Имя_пользователя_кто_оставил_ответ</span></div>
              </div>

              <div itemprop="suggestedAnswer" itemscope itemtype="http://schema.org/Answer">
                     <div itemprop="upvoteCount">всего_голосов_за_этот_ответ</div>
                     <div itemprop="text">текст_ответа</div>
                     <div>Ответ оставлен <time itemprop="dateCreated" datetime="2019-12-01T22:10Z">1 декабря, 22:10</time></div>
                     <div itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">Имя_пользователя_кто_оставил_ответ</span></div>
              </div>
       </div>
</div>


Как правильно разметить отзывы (Review)

В данный момент Яндекс принимает отзывы только про автомобили или организации, Google же принимает отзывы на организации, книгу (Book), курс (Course), мероприятие (Event), инструкцию (HowTo), фильм (Movie), товар (Product), рецепт (Recipe), приложение (Game).

Ниже приведен пример на основе отзыва об организации (Organization).

Отзывы без микроразметки:

<div>
       <span>Отличная организация!</span> от <span>Николай Правдин</span>, 
       <span>Очень хорошая организация! Пользовался их услугами, все ок!</span>
</div>

Отзывы c микроразметкой shema.org:

<div itemscope itemtype="http://schema.org/Review">
       <a href="ссылка_на_отзыв" itemprop="url">№134</a>
       <span itemprop="name">Отличная организация!</span> от <span itemprop="author">Николай Правдин</span>,
       <time itemprop="datePublished" datetime="2005-08-09">09 августа 2005</time>
    
       <div itemprop="itemReviewed" itemscope itemtype="https://schema.org/Organization">
              <div itemprop="name">название_компании</div>
              <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
                     <img itemprop="contentUrl" src="ссылка_на_логотип_" alt="Logo">
              </div>
              <link itemprop="url" href="ссылка_на_сайт">
              <div itemprop="address" itemscope itemtype="https://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>
       <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
              <meta itemprop="worstRating" content="0">
              <span itemprop="ratingValue">9</span>
              <span itemprop="bestRating">10</span>
       </div>
       <span itemprop="reviewBody">Очень хорошая организация! Пользовался их услугами, все ок!</span>
</div>

Используемые свойства

Свойство или объект Описание свойства
http://schema.org/Review Указывается для начала разметки отзыва
name Заголовок (название) отзыва
author Автор отзыва (ФИО)
datePublished Дата публикации отзыва в формате ISO 8601
itemReviewed Объект отзыва (то, о чем отзыв). Может принимать значения:
  • Action
  • CreativeWork
  • Event
  • Intangible
  • MedicalEntity
  • Organization
  • Person
  • Place
  • Product
reviewRating Рейтинг отзыва (объект)
worstRating Самая низкая оценка
bestRating Самая высокая оценка
ratingValue Рейтинг отзыва (цифра)
reviewBody Текст отзыва

Как правильно разметить рейтинг (AggregateRating)

AggregateRating — это объект, с помощью которой можно разметить рейтинг товара или статьи/новости. Используется либо как часть микрораметки, например, Article или Product.

Пример разметки рейтинга внутри товара:

<div itemscope itemtype="http://schema.org/Product">
       <h1 itemprop="name">наименование_товара</h1>
       <a href="ссылка-на-увеличенное-изображение.jpg">
              <img itemprop="image" src="ссылка_на_изображение_товара" />
       </a>
       <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
              <meta itemprop="price" content="690.00">
              <meta itemprop="priceCurrency" content="RUB">
              <link itemprop="availability" href="http://schema.org/InStock">
              <div>В наличии</div>
       </div>
       <div itemprop="aggregateRating" itemscope="" itemtype="https://schema.org/AggregateRating">;            
           <meta itemprop="bestRating" content="10">
           <meta itemprop="ratingValue" content="8.8">
           <span itemprop="ratingCount">356233</span>
       </div>      
       <div itemprop="description">описание_товара</div>
</div>

Пример разметки рейтинга внутри статьи:

<div itemscope itemtype="http://schema.org/Article">
       <p>Автор: <span itemprop="author">Автор статьи</span></p>
       <p>Дата публикации: <time itemprop="datePublished" datetime="2019-04-22">22 апреля 2019</time></p>
       <h1 itemprop="headline">название_статьи</h1>
       <img itemprop="image" src="ссылка_на_изображение_статьи" />
       <article itemprop="articleBody">полное_текст_статьи</article>
       <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
               <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
                      <img itemprop="url image" src="ссылка_на_логотип" />
                </div>
               <link itemprop="url" href="ссылка_на_сайт">
               <div itemprop="address" itemscope itemtype="https://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>
               <meta itemprop="name" content="название_сайта">
       </div>
       <div itemprop="aggregateRating" itemscope="" itemtype="https://schema.org/AggregateRating">
             <meta itemprop="bestRating" content="10">
             <meta itemprop="ratingValue" content="8.8">
             <span itemprop="ratingCount">356233</span>
       </div>
       <meta itemprop="dateModified" content="2019-04-22T11:48:26+00:00">
       <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="ссылка_на_статью"/>
</div>

В микроразметке используются следующие теги:

Свойство или объект  Описание свойства
https://schema.org/AggregateRating Этот тег указывает поисковику, что перед ним рейтинг
bestRating Шкала оценок. В данном случае материал оценивается по 10-бальной шкале
 ratingValue Рейтинг статьи. В нашем случае равен 8.8
 ratingCount Общее количество оценок. Свои оценки поставили 356 233 человека.

На сайте можно разметить любое количество поисков. Объект SearchAction является дочерним объектом WebSite.

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

<div>
	<form action="/search/">
		<input type="text" placeholder="Поиск" name="q">
		<input type="submit" name="s" value="Искать">
	</form>
</div>

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

<div itemscope="" itemtype="http://schema.org/WebSite">
	<form action="/search/" itemprop="potentialAction" itemscope="" itemtype="http://schema.org/SearchAction">
		<meta itemprop="target" content="/search/?q={query}">
		<input type="text" class="text" placeholder="Поиск" name="q">
		<input itemprop="query-input" type="hidden" name="query">
		<input type="submit" class="submit" name="s" value="Искать">
	</form>
</div>>

Поле query хранит GET запрос поиска из поля q.



Как правильно разметить пошаговую инструкцию (HowTo)

Разметку HowTo рекомендуется использовать для всех статей/обзоров/решений, которые включают в себя поэтапное выполнение (исключая приготовление блюд, для этого есть свойство Recipe). Также HowTo можно использовать для разметки условий использования или установки на страницах товара или категории товаров. Но Google требует, чтобы HowTo не использовали в рекламных целях.

На одной странице можно использовать только один объект HowTo. Контент HowTo должен быть виден пользователям.

Разметку HowTo поддерживает только Google.

HowTo без микроразметки:

<div>
	<div>Название инструкции</div>
	<div>Краткое описание</div>
	<div>Потребуется 2 минуты</div>

	<-- видео-инструкция -->
	<div>
		<video>...</video>
	</div>

	<p>Материалы, необходимые для выполнения инструкций:</p>
	<div>
		<a href="ссылка_на_материал"><span>материал №1</span></a>
		<img alt="изображение_материала_№1" src="ссылка_на_изображение"/>
	</div>
	<div>
		<a href="ссылка_на_материал"><span>материал №2</span></a>
		<img alt="изображение_материала_№2" src="ссылка_на_изображение"/>
	</div>

	<p>Все работы мы будем выполнять при помощи:</p>
	<div>
		<a href="ссылка_на_инструмент"><span>bucket</span></a>
		<img alt="изображение_инструмента" src="ссылка_на_изображение"/>
	</div>

	<-- этапы выполнения -->
	<-- этап №1 -->
	<div>
		<div>Заголовок этапа №1</div>
		<img src="ссылка_на_изображение_этапа"/>
		<div>Описание этапа</div>
	</div>

	<-- этап №2 -->
	<div>
		<div>Заголовок этапа №2</div>
		<img src="ссылка_на_изображение_этапа"/>
		<div>Описание этапа</div>
	</div>
	...
</div>


HowTo с подробной микроразметкой:

<div itemscope itemtype="http://schema.org/HowTo">
	<div itemprop="name">Название инструкции</div>
	<div itemprop="description">Краткое описание</div>
	<div>Потребуется: <span itemprop="totalTime" content="PT2M">2 минуты</span></div>

	<-- видео-инструкция -->
	<div itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
		<meta itemprop="name" content="Название видео" />
		<meta itemprop="description" content="Краткое описание видео" />
		<link itemprop="thumbnailUrl" content="ссылка_на_пост_видео" />
		<link itemprop="contentUrl" content="ссылка_на_видео" />
		<link itemprop="embedUrl" content="ссылка_на_вставку_видео" />
		<meta itemprop="duration" content="продолжительность_например_P1MT10S" />
		<meta itemprop="uploadDate" content="дата_загрузки_например_2021-01-05T08:00:00+08:00" />
		<video>...</video>
	</div>

	<p>Материалы, необходимые для выполнения инструкций:</p>
	<div itemprop="supply" itemscope itemtype="http://schema.org/HowToSupply">
		<a itemprop="url" href="ссылка_на_материал">
			<span itemprop="name">материал №1</span>
		</a>
		<img alt="изображение_материала_№1" itemprop="image" src="ссылка_на_изображение"/>
	</div>
	<div itemprop="supply" itemscope itemtype="http://schema.org/HowToSupply">
		<a itemprop="url" href="ссылка_на_материал">
			<span itemprop="name">материал №2</span>
		</a>
		<img alt="изображение_материала_№2" itemprop="image" src="ссылка_на_изображение"/>
	</div>

	<p>Все работы мы будем выполнять при помощи:</p>
	<div itemprop="tool" itemscope itemtype="http://schema.org/HowToTool">
		<a itemprop="url" href="ссылка_на_инструмент">
			<span itemprop="name">bucket</span>
		</a>
		<img alt="изображение_инструмента" itemprop="image" src="ссылка_на_изображение"/>
	</div>

	<-- этапы выполнения -->
	<-- этап №1 -->
	<div itemprop="step" itemscope itemtype="http://schema.org/HowToSection">
		<link itemprop="url" href="ссылка_якорь_на_этап" />
		<meta itemprop="position" content="1"/>
		<div itemprop="name">Заголовок этапа №1</div>
		<img itemprop="image" src="ссылка_на_изображение_этапа"/>
		<link itemprop="video" href="ссылка_на_видео_этапа" />

		<-- берем сразу одно описание -->
		<div itemprop="text">Описание этапа</div>

		<-- или делим описание на подэтапы -->
		<div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToDirection">
			<meta itemprop="position" content="1"/>
			<div itemprop="text">Сначала делай раз.</div>
    		</div>
		<div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToDirection">
			<meta itemprop="position" content="2"/>
			<div itemprop="text">Потом делай два.</div>
    		</div>

		<-- добавляем HowToTip, если используем пояснение к HowToDirection -->
		<div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToTip">
			<meta itemprop="position" content="3"/>
			<div itemprop="text">Во втором пункте будьте осторожней, мало ли.</div>
    		</div>
	</div>

	<-- этап №2 -->
	<div itemprop="step" itemscope itemtype="http://schema.org/HowToSection">
		<link itemprop="url" href="ссылка_якорь_на_этап" />
		<meta itemprop="position" content="2"/>
		<div itemprop="name">Заголовок этапа №2</div>
		<img itemprop="image" src="ссылка_на_изображение_этапа"/>
		<link itemprop="video" href="ссылка_на_видео_этапа" />

		<-- берем сразу одно описание -->
		<div itemprop="text">Описание этапа</div>

		<-- или делим описание на подэтапы  -->
		<div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToDirection">
			<meta itemprop="position" content="1"/>
			<div itemprop="text">Сначала делай раз.</div>
    		</div>
		<div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToDirection">
			<meta itemprop="position" content="2"/>
			<div itemprop="text">Потом делай два.</div>
    		</div>

		<-- добавляем HowToTip, если используем пояснение к HowToDirection -->
		<div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToTip">
			<meta itemprop="position" content="3"/>
			<div itemprop="text">Во втором пункте будьте осторожней, мало ли.</div>
    		</div>
	</div>
	...

Важно учесть, что валидатор Google выдает ошибку на корректную разметку в месте разметки HowToDirection, HowToTip при использовании объекта itemListElement. Видимо, валидатор Google сам не поддерживает то, что описал у себя в справке по HowTo.



Футер без микроразметки:

<footer>
	 <div>© 2019 Все права защищены.</div>
</footer>

Футер с микроразметкой schema.org:

<footer itemscope itemtype="http://schema.org/WPFooter">
       <meta itemprop="copyrightYear" content="2019">
       <meta itemprop="copyrightHolder" content="Держатель_копирайта">
       <div>© 2019 Все права защищены.</div>
</footer>

Schema.org WPFooter предусматривает множество свойств. Ознакомиться с ними и добавить нужные можно самостоятельно, после просмотра страницы об объекте.

Проверка микроразметки

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

  1. валидатор от Google;
  2. проверка расширенных сниппетов от Google;
  3. валидатор от Яндекс.
Мне не нравится
Россия, Челябинская область, Челябинск, ул. Энтузиастов, 2, оф. 200 Телефон: +7 (351) 220-45-35

Читайте в нашем блоге

Все статьи
Лучшие бесплатные и условно-бесплатные аналоги Figma в 2024 году

Лучшие бесплатные и условно-бесплатные аналоги Figma в 2024 году

Figma — один из наиболее востребованных инструментов для создания интерфейсов и прототипов в сфере веб-дизайна и разработки мобильных приложени...

10.12.2024
177
Интеграция Битрикс24 и Asterisk

Интеграция Битрикс24 и Asterisk

Современные компании всё чаще сталкиваются с необходимостью интеграции IP-телефонии и CRM-систем для улучшения управления клиентскими коммуника...

29.11.2024
288
Хостинг. Лучшие хостинг-провайдеры в России

Хостинг. Лучшие хостинг-провайдеры в России

В мире современных веб-технологий выбор надежного хостинга является одним из важнейших шагов для успешного функционирования любого интернет-про...

19.11.2024
432
Региональное продвижение сайта: поддомены или подпапки

Региональное продвижение сайта: поддомены или подпапки

Запросы пользователей в поисковых системах делятся на две категории: геозависимые и геонезависимые. Геозависимые запросы — это...

29.10.2024
1164
Битрикс24 vs Microsoft SharePoint: Как выбрать оптимальную платформу для вашего бизнеса?

Битрикс24 vs Microsoft SharePoint: Как выбрать оптимальную платформу для вашего бизнеса?

Эффективность бизнеса во многом зависит от правильного выбора цифровых инструментов, обеспечивающих работу команды и управление документами. Дв...

10.09.2024
1605
Внедрение системы управления персоналом и автоматизация: обзор HRM-систем

Внедрение системы управления персоналом и автоматизация: обзор HRM-систем

В современных условиях успешное управление персоналом невозможно без эффективных цифровых инструментов. HRM-системы играют ключевую роль в орга...

06.09.2024
1678
ELMA365 CRM – система автоматизации и управления бизнес процессами

ELMA365 CRM – система автоматизации и управления бизнес процессами

ELMA365 CRM – это мощная и гибкая CRM-BPM система, разработанная российской компанией ELMA, специально для удовлетворения потре...

02.09.2024
1473
Что делать, если Google Документы перестанут работать? Топ-9 альтернатив для России

Что делать, если Google Документы перестанут работать? Топ-9 альтернатив для России

Периодически в интернете появляются слухи о возможной блокировке Google Docs в России. Хотя пока нет серьезных причин для паники, лучше заранее...

27.08.2024
3763