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


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

Хлебные крошки 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.


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

Филиал без микроразметки (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>
</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" 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>

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


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

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

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

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

Каждый товар имеет свои особенности: где-то отсутствуют отзывы или нет названия бренда и т.д. Поэтому не всегда удается разметить товар подробно, но валидатор 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

Текст отзыва


Пример разметки списка статей блога (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">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>
        <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>

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

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

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

BlogPosting – тип, который используется для публикаций на коммерческом сайте. Подходит для разметки новостей и публикаций на сайте. Свойства BlogPosting прямо говорят нам об этом.

Article – тип, который используется для публикаций на информационном сайте. Подходит для разметки информационных статей и научных публикаций или подобных на сайте. Cвойства Article на это акцентируют внимание.

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

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

Статья с микроразметкой (тип BlogPosting):

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

Статья с микроразметкой (тип Article):

<article itemscope itemtype="http://schema.org/Article">
       <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="ссылка_на_изображение_статьи" />
       <div itemprop="articleBody">полное_текст_статьи</div>
       <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="ссылка_на_статью" />
</article>

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

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

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

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

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

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

Как правильно разметить видео (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> Ответ: <span>Для начала прочитайте статью на тему, как продвинуть сайт в регионах: https://d-element.ru/about/blog/kak-prodvinut-sayt-v-regionakh/</span> </div> <div> Ответ: <span>Кто бы умел...</span> </div> </div>

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

<div itemscope itemtype="http://schema.org/Question">
  <div itemprop="name">Как продвинуть сайт в Москве?</div> //заголовок вопроса
  <div itemprop="text">Сколько не пытаюсь, не получается.</div> //описание вопроса
  <div itemprop="upvoteCount">196</div> //Всего голосов за вопрос
<div itemprop="suggestedAnswer 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 itemprop="suggestedAnswer" itemscope itemtype="http://schema.org/Answer"> //ОСТАЛЬНЫЕ ОТВЕТЫ <div itemprop="upvoteCount"/>1</div> //Всего голосов за ответ Ответ: <span itemprop="text">Кто бы умел...</span> //Ответ </div> </div>

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

<div itemscope itemtype="http://schema.org/Question">
  <h1 itemprop="name">Как продвинуть сайт в Москве?</h1>
  <div itemprop="upvoteCount">196</div>
  <div itemprop="text">Как добиться результата? С чего лучше начать?</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 acceptedAnswer" 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>

Как правильно разметить футер сайта (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
  2. валидатор от Яндекс
454080, Россия, Челябинская, Челябинск, Энтузиастов 2
Заявка
для консультации
или подготовки
предложения

Ваши заявки принимает

Надежда
Коммерческий директор
Заполните все поля и опишите вашу задачу как можно подробнее
Золотой партнер
1С-Битрикс
Сертифицированное агентство
Яндекс.Директ
Сертифицированное агентство
Google.AdWords
Региональный партнер
Ru-center
Золотой партнер
Битрикс24