Что такое Schema.org

28 Мая 2019

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

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

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

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

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

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

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

Микроразметка Shema.org (Схема орг) внедряется на уровне HTML кода.

Пример HTML кода страницы без разметки Schema Org:

<div>
  <span>Цифровой элемент</span>
  Контакты:
  <div>
    Адрес: Энтузиастов 2,
    454000,
    Челябинск
  </div>
  Телефон: +7 999 999–99–99, 
  Факс: +7 999 999–99–99,
  Электронная почта: pochta@mail.ru
</div> 

Пример разметки HTML кода страницы с микроразметкой Schema Org:

<div itemscope itemtype="http://schema.org/Organization">
  <span itemprop="name">Цифровой элемент</span>
  Контакты:
 <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
   Адрес:
   <span itemprop="streetAddress">Энтузиастов 2</span>
   <span itemprop="postalCode">454000</span>,
   <span itemprop="addressLocality">Челябинск</span>
  </div>
  Телефон:<span itemprop="telephone">+7 999 999–99–99</span>,
  Факс:<span itemprop="faxNumber">+7 999 999–99–99</span>,
  Электронная почта: <span itemprop="email"> pochta@mail.ru</span>
</div>

Ознакомиться с полным описанием микроразметки 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>, которые изначально не видны, но доступны для просмотра через исходный код страницы.

Как правильно разметить шапку сайта (Schema.org WPHeader)

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

<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 ними и добавить их вы сможете самостоятельно, просмотрев страницу о объекте.

Примеры разметки меню (SiteNavigationElement)

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

<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>

Пример разметки хлебных крошек (Breadcrumbs)

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

<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>

Пример хлебных крошек, размеченных Schema.org:

<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>

Пример разметки контактных данных (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>

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

<div itemscope itemtype="http://schema.org/Organization">
       <div itemprop="name">название_компании</div>
       <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
<img itemprop="contentUrl" src="ссылка_на_логотип_" alt="Logo"> <meta itemprop="width" content="ширина_логотипа_в_пикселях"> <meta itemprop="height" content="высота_логотипа_в_пикселях"> </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>

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

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

<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" href="http://schema.org/InStock" content="В наличии" />
</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" href="http://schema.org/InStock"; content="В наличии" />
</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="В наличии" /> </div> <div itemprop="brand">Бренд</div> <div itemprop="model">Модель</div> </a> </li> </ul>

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

Пример правильной разметки товаров (Schema.org Product)

Разберем на конкретном примере. Представим, что у нас есть страница товара.

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

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

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

 <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>

Пример подробной микроразметки товаров Schema.org Product выглядит так:

<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-14T21:30"> <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>

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

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

Свойство или объект

Описание свойства

http://schema.org/Product

Указывается для начала разметки товара

http://schema.org/Offer

Указывается для начала разметки свойств товара

http://schema.org/Review

Указывается для начала разметки отзывов товара

http://schema.org/Rating

Указывается для начала разметки рейтинга

itemprop="name"

Название товара

itemprop="image"

Изображение товара

itemprop="price"

Цена товара

itemprop="priceCurrency"

Валюта товара. Например: RUB, EURO, USD и т.д.

itemprop="availability"

Доступность товара. Возможные значения:

  • http://schema.org/PreOrder - на заказ (товар под заказ).
  • http://schema.org/InStock - в наличии (товар есть в продаже).
  • http://schema.org/OutOfStock - отсутствует (товара нет в продаже).
itemprop="description"

Описание товара

http://schema.org/AggregateRating

Указывается для начала разметки рейтинга товара

itemprop="ratingValue"

Сформированный рейтинг товара на основании голосов (оценка пользователей)

itemprop="reviewCount"

Количество голосований (оценок) за рейтинг товара

itemprop="brand"

Бренд товара

itemprop="model"

Модель товара (артикул)

itemprop="sku"

Остаток на складе (количество)

itemprop="priceValidUntil"

Срок актуальности цены (до какого срока цена будет такой же)

itemprop="name"

Заголовок отзыва (название)

itemprop="author"

Автор отзыва (ФИО)

itemprop="datePublished"

Дата публикации отзыва

itemprop="worstRating"

Минимальная оценка отзыва

itemprop="ratingValue"

Сформированный рейтинг отзыва на основании голосов (оценка пользователей)

itemprop="bestRating"

Максимальная оценка отзыва

itemprop="description"

Текст отзыва

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

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

<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">2019-04-22T11:48:26+00:00</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&quot"> <img itemprop="url image" src="ссылка_на_логотип" /> </div> <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><article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting"> <h2 itemprop="headline">название_статьи_2</h2> <time itemprop="datePublished">2019-04-22T11:48:26+00:00</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> <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>

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

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

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

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

<div itemscope itemtype="http://schema.org/BlogPosting"/>
       <p>Автор: <span itemprop="author">Автор статьи</span></p>
       <span>Дата: <time itemprop="datePublished">2019-04-22T11:48:26+00:00</time></span>
       <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> 
               <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>

Как правильно разметить фильм (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

Указывается для начала разметки объекта видео

itemprop="director"

Режиссер фильма

itemprop="producer"

Продюсер фильма

itemprop="musicBy"

Композитор фильма или название группы

itemprop="genre"

Жанр фильма

itemprop="actor"

Актёр фильма

itemprop="url"

Ссылка на фильм (видео)

itemprop="description"

Краткое описание фильма

itemprop="contentRating"

Возрастная категория фильма. Например, «MPAA R»

itemprop="duration"

Продолжительность фильма, в формате ISO 8601. Например, промежуток 1 час 30 минут записывается как PT1H30M.

itemprop="dateReleased"

Дата выхода фильма на экраны. Например, «2019-01-08T00:00:00»

itemprop="uploadDate"

Дата загрузки фильма. Например, «2019-01-08T00:00:00»

itemprop="dateCreated"

Дата окончания съемок фильма. Например, Например, «2019-01-08T00:00:00»

itemprop="inLanguage"

Оригинальный язык фильма (ru, en, de и т.д.)

itemprop="isFamilyFriendly"

True или False. Указывает, подходит ли этот фильм для семейного просмотра

itemprop="productionCompany"

Кинокомпания, выпустившая фильм. Например, «Warner bros»

itemprop="name"

Название фильма

itemprop="alternativeHeadline"

Альтернативное название фильма на латинице

itemprop="thumbnailUrl"

Постер фильма (изображение)

itemprop="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

Указывается для начала разметки рецепта

itemprop="name"

Обязательное поле. (Текст) Название рецепта или блюда.

itemprop="image "

(URL) URL изображения результата приготовления. Рекомендуем указать данное поле для формирования расширенного сниппета.

itemprop="author"

(Текст, Person/name, Organization/name) Автор рецепта.

itemprop="recipeYield"

(Текст) количество порций, получаемых с помощью рецепта.

itemprop="totalTime"

(Duration) время приготовления. Указывается в формате ISO 8601. Например, «PT30M» (30 минут).

itemprop="recipeIngredient"

Обязательное поле. (Текст) ингредиент рецепта и его объем, количество (может быть несколько).

itemprop="recipeInstructions"

(Текст) Инструкция по приготовлению

itemprop="image"

(URL) URL изображение процесса приготовления, может быть несколько. Рекомендуем указать данное поле для формирования расширенного сниппета.

itemprop="recipeCategory"

(Текст) тип блюда. Например, горячее блюдо, десерт.

itemprop="nutrition"

(NutritionInformation) энергетическая или пищевая ценность блюда, то есть содержание калорий, белков, жиров, углеводов, витаминов и т. д.

itemprop="calories"

Калорийность.

itemprop="fatContent"

Жиры.

itemprop="carbohydrateContent"

Углеводы.

itemprop="sugarContent"

Сахар.

itemprop="fiberContent"

Клетчатка.

itemprop="proteinContent"

Белки.

itemprop="cholesterolContent"

Холестерин.

itemprop="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>

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

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

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

Микроразметка Schema.org для видео:

<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>

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

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

<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.AdWords
Региональный партнер
Ru-center
Золотой партнер
Битрикс24