5 подписчиков

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

12 января 202112 янв 2021

39 мин

Оглавление

Зачем нужна микроразметка Schema.org
Какие данные можно разметить с помощью 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 можно разметить:

Шапку сайта (WPHeader)
Меню (SiteNavigationElement)
Хлебные крошки (Breadcrumbs)
Адреса и организации (Organization и LocalBusiness)
Список товаров (Products list)
Карточку товара (Product)
Список статей блога (Blog)
Статью блога (Article, NewsArticle и BlogPosting)
Научная работа (CreativeWork)
Фильм (Movie)
Рецепт (Recipe)
Изображение (Painting)
Картинка (ImageObject)
Видео (VideoObject)
Событие (Event)
Вопрос-ответ (Question)
Отзывы (Reviews)
Футер сайта (WPFooter)

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

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

<meta itemprop="name" content="название товара" />

<div itemprop="name">название товара</div>

<div itemprop="name"><h1>название товара</h1></div>

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

<a itemprop="url" href="ссылка"></a>

<meta itemprop="url" content="ссылка" />

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

Как разметить последний элемент хлебных крошек (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)

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

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

<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 – Текст отзыва

Пример разметки списка статей блога (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="ссылка_на_статью"/>
</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 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>

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

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

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

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