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

прочитали: 4254

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

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

Скриншот выдачи без использования опции Schema.org:

Пример выдачи по аналогичному запросу, но после внедрения разметки:

Эта схема показывает, как считывает размеченную информацию поисковая машина.

Микроразметка Shema.org интегрируется в HTML-код сайта. Подробнее узнать, что она собой представляет, можно на официальном сайте.

Назначение микроразметки Schema.org

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

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

Информация, подлежащая разметке schema.org

Разметка Shema включает множество различных объектов и их характеристик. Сегодня с ее помощью можно структурировать уже более 100 типов информации, в том числе:

Шапка сайта (WPHeader).
Навигационное меню (SiteNavigationElement).
«Хлебные крошки» (Breadcrumbs).
Адреса и организации (Organization и LocalBusiness).
Товарный список (Products list).
Карточка товара (Product → Offer).
Карточка услуги (Product → AggregateOffer).
Перечень статей в блоге (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 имеет много различных характеристик. Уточнить их и внести в микроразметку вы можете сами, просмотрев страницу об объекте.

Микроразметка навигационного меню (SiteNavigationElement)

Основное меню сайта без микроразметки:

<ul>

<li>

<a href="ссылка">название_пункта_меню_1a>

li>

<li>

<a href="ссылка">название_пункта_меню_2a>

li>

<li>

<a href="ссылка">название_пункта_меню_3a>

li>

<li>

<a href="ссылка">название_пункта_меню_4a>

li>

<li>

<a href="ссылка">название_пункта_меню_5a>

li>

<li>

<a href="ссылка">название_пункта_меню_6a>

li>

ul>

После внедрения разметки оно становится таким:

<li>

<a itemprop="url" href="ссылка">название_пункта_меню_1a>

li>

<li>

<a itemprop="url" href="ссылка">название_пункта_меню_2a>

li>

<li>

<a itemprop="url" href="ссылка">название_пункта_меню_3a>

li>

<li>

<a itemprop="url" href="ссылка">название_пункта_меню_4a>

li>

<li>

<a itemprop="url" href="ссылка">название_пункта_меню_5a>

li>

<li>

<a itemprop="url" href="ссылка">название_пункта_меню_6a>

li>

ul>

Разметка «хлебных крошек» (Breadcrumbs)

Неразмеченный объект записывается так:

<ul>

<li>

<span>название_1_пунктаspan>

li>

<li>

<span>название_1_пунктаspan>

li>

<li>

<span>название_1_пунктаspan>

li>

…

ul>

После внедрения разметки:

<span itemprop="name">название_1_пункта span>

<meta itemprop="position" content="1" />

li>

<span itemprop="name">название_2_пунктаspan>

<meta itemprop="position" content="2" />

li>

<span itemprop="name">название_3_пунктаspan>

<meta itemprop="position" content="3" />

li>

…

ul>

Прочие примеры микроразметки объектов приведены на официальном сайте schema.org.

Разметка последнего элемента «хлебных крошек» (breadcrumbs)

Разметить его можно, использовав ссылку с тегом <a> без атрибута href:

<span itemprop="name">название_последнего_пунктаspan>

<meta itemprop="position" content="4">

li>

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

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

Данные объекты находятся в иерархической взаимосвязи между собой. Organization – большая организация, например школа, коммерческая компания, научно-производственное объединение и т. д.

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

Через Organization лучше обозначать юридический адрес (головной штаб) организации, с помощью LocalBusiness – остальные отделения. Может показаться, что второй объект необходимо вкладывать в первый, но делать этого категорически нельзя.

До микроразметки «Организация» имеет вид:

<div>

<div>название_компанииdiv>

<div><img src="ссылка_на_логотип" />div>

<div>почтовый_индекс, Страна, Область, Город, улица, номер домаdiv>

<div>Телефон: <a href="tel:+79999999999">+7 (999) 999-99-99a>div>

<div>Почта: <a href="mailto:email@email.ru">email@email.rua>div>

<div>Факс: <a href="tel:+79999999999">+7 (999) 999-99-99a>div>

div>

Этот же объект, но уже с разметкой выглядит так:

<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-99a>div>

<div>Почта: <a itemprop="email" href="mailto:email@email.ru">email@email.rua>div>

<div>Факс: <a itemprop="faxNumber" href="tel:+79999999999">+7 (999) 999-99-99a>div>

div>

Неразмеченный филиал записывается следующим образом:

<div>

<span>ООО «Цифровой элемент»span>

<div>454000, Челябинск, ул. Энгельса, д. 2, оф. 200div>

<span>8 (800) 555–85–89span>

<span>info@d-element.ruspan>

<time>Пн-Пт, 9:00 – 18:00time>

div>

После микроразметки он выглядит так:

<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–89span>

<span itemprop="email">info@d-element.ruspan>

<time itemprop="openingHours" datetime="Mo-Fr, 9:00−18:00">Пн. − пт., 9:00 – 18:00time>

<img itemprop="image" src="ссылка на изображение филиала" />

div>

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

Разметка товарного перечня (Products list)

Данный объект без микроразметки:

<ul>

<li>

<img src="ссылка_на_изображение_товара">

<div>название_товараdiv>

<div>

<span>47280span>

<span>руб.span>

div>

<div>Брендdiv>

<div>Модельdiv>

li>

<li>

<img src="ссылка_на_изображение_товара">

<div>название_товараdiv>

<div>

<span>47280span>

<span>руб.span>

div>

<div>Брендdiv>

<div>Модельdiv>

li>

<li>

<img src="ссылка_на_изображение_товара">

<div>название_товараdiv>

<div>

<span>47280span>

<span>руб.span>

div>

<div>Брендdiv>

<div>Модельdiv>

li>

ul>

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

<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">47280span> руб.div>

<meta itemprop="priceCurrency" content="RUB">

<meta itemprop="availability" content="http://schema.org/InStock" />
div>

<div itemprop="brand">Брендdiv>

<div itemprop="model">Модельdiv>

li>

<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">47280span> руб.div>

<meta itemprop="priceCurrency" content="RUB" />

<meta itemprop="availability" content="http://schema.org/InStock" />
div>

<div itemprop="brand">Брендdiv>

<div itemprop="model">Модельdiv>

li>

<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">47280span> руб.div>

<meta itemprop="priceCurrency" content="RUB" />

<meta itemprop="availability" content="http://schema.org/InStock" />
div>

<div itemprop="brand">Брендdiv>

<div itemprop="model">Модельdiv>

li>

ul>

В разметке лучше размещать только основные сведения о продукте. Также при необходимости можно указать свойство отзывов, рейтинг для товарного перечня.

В Google микроразметка этого объекта при имеющейся подробной странице не разрешена (так указано в сопроводительном документе). По этой причине размечать список рекомендуется исключительно при ее отсутствии. Если подробная страница продукта все же имеется, разметку применять нужно только к ней.

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

В неразмеченном виде этот объект выглядит так:

<div>

<h1>наименование_товараh1>

<img src="ссылка_на_изображение_товара" />

<div>

<div>В наличииdiv>

div>

<div>Описание товараdiv>

div>

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

<div itemscope itemtype="http://schema.org/Product">

<h1 itemprop="name">наименование_товараh1>

<img itemprop="image" src="ссылка_на_изображение_товара" />

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

<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">

<span itemprop="ratingValue">4span>

<span itemprop="reviewCount">9span> //рейтинг 4 основан на 9 оценках

div>

<div itemprop="description">Описание_товараdiv>

<div>Производитель: <span itemprop="brand">название_брендаspan>div>

<div>Модель: <span itemprop="model">номер_моделиspan>div>

<div>Остаток на складе: <span itemprop="sku">4span>div>

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">

<span itemprop="priceCurrency" content="RUB">руб.span>

<span itemprop="price">699span>

<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">4span> //Оценка пользователя

<span itemprop="bestRating">5span>звезд. //Максимальная оценка

<span itemprop="description">текст_отзываspan>

div>

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

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

Применяемые свойства

Свойство или объект	Описание
http://schema.org/Product	Начинает микроразметку продукта
http://schema.org/Offer	Начинает разметку товарных характеристик
http://schema.org/Review	Начинает разметку отзывов на продукт
http://schema.org/Rating	Начинает микроразметку рейтинга
name	Наименование
image	Изображение
price	Стоимость
priceCurrency	Используемая денежная единица (RUB, USD, EURO и т. д.)
availability	Доступность товара. Варианты: http://schema.org/PreOrder − по заказу; http://schema.org/InStock − в наличии; http://schema.org/OutOfStock − отсутствует в продаже
description	Короткое описание продукта
http://schema.org/AggregateRating	Начинает микроразметку товарного рейтинга
ratingValue	Готовый рейтинг товара по результатам оценки (числу голосов) пользователей
reviewCount	Число проголосовавших
brand	Торговая марка
model	Модель (артикул)
sku	Оставшееся на складе число товарных единиц
priceValidUntil	Срок актуальности (неизменности) стоимости
name	Название отзыва
author	Автор отзыва (Ф. И. О.)
datePublished	Дата размещения отзыва
worstRating	Наименьшая оценка отзыва
ratingValue	Готовый рейтинг отзыва по результатам оценки пользователями (числа голосов)
bestRating	Наибольшая оценка отзыва
description	Содержание отзыва

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

Данное свойство заменяет Offer в объекте Product.

Многие веб-ресурсы предлагают пользователям услуги. Зачастую их стоимость точно не определена, вместо этого минимальное значение цены или ее диапазон. В таких ситуациях рекомендуется применять свойство AggregateOffer взамен Offer.

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

Неразмеченная «Услуга» выглядит так:

<div>

<div>Название услугиdiv>

<div>Описание услугиdiv>

<img src="ссылка_на_изображение_услуги" />

<div>

<div>Готовы оказать услугу! Оставляйте заявку!div>

<div>Цена: от 600 до 1000 руб.div>

div>

После внедрения разметки:

<div itemscope itemtype="http://schema.org/Product">

<div itemprop="name">Название услугиdiv>

<div itemprop="description">Описание услугиdiv>

<img itemprop="image" src="ссылка_на_изображение_услуги" />

<div itemprop="offers" itemscope itemtype="http://schema.org/AggregateOffer">

<div>Готовы оказать услугу! Оставляйте заявку!div>

<meta itemprop="priceCurrency" content="RUB">

<link itemprop="availability" href="http://schema.org/InStock">

<div>Цена: от <span itemprop="lowPrice">600span> до <span itemprop="highPrice">1000span> руб.div>

div>

Разметка перечня статей блога (Blog)

Данный объект до микроразметки:

<div>

<article>

<h2>название_статьи_1h2>

<time>2019-04-22T11:48:26+00:00time>

<img src="ссылка_на_постер_для_статьи">

<p>краткое_описание_статьиp>

<p>Авторp>

article>

<article>

<h2>название_статьи_1h2>

<time>2019-04-22T11:48:26+00:00time>

<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">название_статьи_1h2>

<time itemprop="datePublished" datetime="2019-04-22">22 апреля 2019time>

<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-99a>div>

<div>Почта: <a itemprop="email" href="mailto:email@email.ru">email@email.rua>div>

<div>Факс: <a itemprop="faxNumber" href="tel:+79999999999">+7 (999) 999-99-99a>div>

<meta itemprop="name" content="название_сайта">

div>

<meta itemprop="dateModified" content="2019-04-22T11:48:26+00:00">

<meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="ссылка_на_статью"/>

div>

article>

<article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting">

<h2 itemprop="headline">название_статьи_2h2>

<time itemprop="datePublished" datetime="2019-04-22">22 апреля 2019time>

<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-99a>div>

<div>Почта: <a itemprop="email" href="mailto:email@email.ru">email@email.rua>div>

<div>Факс: <a itemprop="faxNumber" href="tel:+79999999999">+7 (999) 999-99-99a>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:00time>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 апреля 2019time>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-99a>div>

<meta itemprop="name" content="название_сайта">

div>

<meta itemprop="dateModified" content="2019-04-22T11:48:26+00:00">

<meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="ссылка_на_статью"/>

div>

Корректная разметка научной работы (CreativeWork)

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

Без разметки он записывается как:

<div>

<img alt="essay cover" src="essay.jpg" />

<span>Сказки Пушкинаspan>

<span>Иван Петровspan>,

<span>Александр Сергеевич Пушкин как выдающийся, великий русский поэт, драматург и прозаик. Общая характеристика творчества Пушкина в середине 20-х годов XIX века. История создания сказок. Образный мир и исторические корни сюжетов поэтических произведений.span>

div>

Размеченная научная работа приобретает следующий вид:

<div itemscope itemtype="http://schema.org/CreativeWork">

<img itemprop="image" alt="essay cover" src="essay.jpg" />

<meta itemprop="learningResourceType" content="StudentEssay">

<span itemprop="name">Сказки Пушкинаspan>

<span itemprop="author">Иван Петровspan>,

<span itemprop="description">Александр Сергеевич Пушкин как выдающийся, великий русский поэт, драматург и прозаик. Общая характеристика творчества Пушкина в середине 20-х годов XIX века. История создания сказок. Образный мир и исторические корни сюжетов поэтических произведений.span>

div>

Другие примеры микроразметки научной работы доступны на официальном сайте.

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

Разметка фильма (Movie)

Неразмеченным данный объект записывается так:

<div itemscope itemtype="http://schema.org/Movie"/>

<h1>название_фильмаh1>

<span>альтернативное_название_на_латиницеspan>

<img src="ссылка_на_изображение_превьюшку_фильма" />

<p>

<a href="ссылка_на_режиссера">фио_режиссераa>,

<a href="ссылка_на_режиссера">фио_режиссераa>.

<p>

<a href="ссылка_на_продюсера">фио_продюсераa>,

<a href="ссылка_на_всех_продюсеров">и другиеa>.

<p>

<a href="ссылка_на_композитора">фио_композитораa>,

<a href="ссылка_на_композитора">фио_композитораa>.

<p>

<a href="ссылка_на_категорию_жанра">название_жанраa>,

<a href="ссылка_на_категорию_жанров">и другиеa>.

<p>В главных ролях:p>

<div>

<a href="ссылка_на_актёра">фио_актёраa>

div>

После введения разметки в фильм он преобразуется следующим образом:

<div itemscope itemtype="http://schema.org/Movie"/>

<h1 itemprop="name">название_фильмаh1>

<span itemprop="alternativeHeadline">альтернативное_название_на_латиницеspan>

<img src="ссылка_на_изображение_превьюшку_фильма" itemprop="image" />

<p>

<a itemprop="director" href="ссылка_на_режиссера">фио_режиссераa>,

<a itemprop="director" href="ссылка_на_режиссера">фио_режиссераa>.

<p>

<a itemprop="producer" href="ссылка_на_продюсера">фио_продюсераa>,

<a href="ссылка_на_всех_продюсеров">и другиеa>.

<p>

<a itemprop="musicBy" href="ссылка_на_композитора">фио_композитораa>,

<a itemprop="musicBy" href="ссылка_на_композитора">фио_композитораa>.

<p>

<a itemprop="genre" href="ссылка_на_категорию_жанра">название_жанраa>,

<a href="ссылка_на_категорию_жанров">и другиеa>.

<p>В главных ролях:p>

<div>

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

<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	Обозначает кинокомпанию, выпустившую фильм
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>Углеводы: 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>

<img itemprop="image" src="ссылка_на_изображение_ингредиента" />

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

li>

<img itemprop="image" src="ссылка_на_изображение_ингредиента" />

Курицу залить пивом, поставить в духовку.

li>

<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="carbohydrateContent">1 г.span>li>

ul>

div>

Приятного аппетита!

div>

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

Свойство или объект	Описание
http://schema.org/Recipe	Обозначает начало микроразметки рецепта
name	Обязательное поле. (Текст) Указывает на название итогового блюда
image	(URL) Указывает адрес изображения готового блюда. Это поле лучше заполнять для создания расширенного сниппета
author	(Текст, Person/name, Organization/name) Обозначает автора рецепта
recipeYield	(Текст) Указывает число порций итогового блюда
totalTime	(Duration) Обозначает срок приготовления в формате ISO 8601. Например, «PT30M» (30 минут)
recipeIngredient	Обязательное поле. (Текст) Указывает на определенный компонент блюда и его количество (может быть несколько)
recipeInstructions	(Текст) Показывает порядок приготовления
image	(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:00p>

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:00span>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>

Разметка события (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>

Дополненное разметкой «Событие» выглядит так:

<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:30time>

Окончание концерта

<time itemprop="endDate" datetime="2019-05-08T20:30">8 мая, в 20:30time>

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>

Разметка «Вопроса-ответа» (Question)

Этот объект находится в подчиненном положении по отношению к FAQPage и QAPage.

Неразмеченный «вопрос-ответ» записывается в следующем виде:

<div>

<div>Как продвинуть сайт в Москве?div>

<div>Сколько ни пытаюсь, не получается.div>

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

<div>Ответ №2: <span>Кто бы умел...span>div>

div>

После внедрения разметки 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">1span> ответdiv>

<div itemprop="upvoteCount">196div> //Всего голосов за вопрос

<div itemprop="acceptedAnswer" itemscope="" itemtype="http://schema.org/Answer">

<div itemprop="upvoteCount"/>3div> //Всего голосов за ответ

Ответ: <span itemprop="text">Для начала прочитайте статью на тему, как продвинуть сайт в регионах: https://d-element.ru/about/blog/kak-prodvinut-sayt-v-regionakh/span>

div>

Рассмотрим, как выглядит разметка «Вопрос-ответ» (с ответом на каждый вопрос) для типа QAPage:

<div itemscope itemtype="https://schema.org/QAPage">

<div itemscope itemtype="http://schema.org/Question">

<h1 itemprop="name">Как продвинуть сайт в Москве?h1>

<div itemprop="upvoteCount">196div>

<div itemprop="text">Как добиться результата? С чего лучше начать?div>

<span itemprop="answerCount">2span> ответаdiv>

<div><time itemprop="dateCreated" datetime="2019-11-11T20:07Z">11 ноября, 20:03time>div>

<div itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">Имя_пользователя_кто_задал_вопросspan>div>

<div>Всего задал <span itemprop="answerCount">4span> вопроса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:06time>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:10time>div>

<div itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">Имя_пользователя_кто_оставил_ответspan>div>

div>

Разметка отзыва (Review)

Сейчас Яндекс работает с отзывами исключительно об авто или организациях. Напротив, американский поисковик принимает комментарии пользователей на организации, книги (Book), обучающие материалы (Course), события (Event), инструкции (HowTo), кинофильмы (Movie), продукцию (Product), кулинарные рецепты (Recipe), игры и ПО (Game).

Далее рассмотрим пример отзыва об организации.

До внедрения разметки этот объект выглядит так:

<div>

<span>Отличная организация!span> от <span>Николай Правдинspan>,

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

div>

Размеченный отзыв записывается следующим образом:

<div itemscope itemtype="http://schema.org/Review">

<span itemprop="name">Отличная организация!span> от <span itemprop="author">Николай Правдинspan>,

<time itemprop="datePublished" datetime="2005-08-09">09 августа 2005time>

<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-99a>div>

<div>Почта: <a itemprop="email" href="mailto:email@email.ru">email@email.rua>div>

<div>Факс: <a itemprop="faxNumber" href="tel:+79999999999">+7 (999) 999-99-99a>div>

div>

<div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">

<meta itemprop="worstRating" content="0">

<span itemprop="ratingValue">9span>

<span itemprop="bestRating">10span>

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>

footer>

После введения разметки:

<footer itemscope itemtype="http://schema.org/WPFooter">

<meta itemprop="copyrightYear" content="2019">

<meta itemprop="copyrightHolder" content="Держатель_копирайта">

footer>

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

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

После внедрения микроразметки рекомендуется проверить, как она работает. Для этого можно воспользоваться одним из следующих инструментов:

валидатор от Google;
функция проверки расширенных сниппетов от Google;
валидатор от Яндекса.

ЧИТАЙ ТАКЖЕ

Подробный гайд по продвижению в мобильной выдаче

Как запустить продвижение в Telegram: подробная инструкция от Ingate

Видеореклама (OLV): особенности размещения, виды, преимущества

Оглавление

Назначение микроразметки Schema.org
Информация, подлежащая разметке schema.org
Классификация микроразметки Schema.org
Разметка шапки сайта (Schema.org WPHeader)
Микроразметка навигационного меню (SiteNavigationElement)
Разметка «хлебных крошек» (Breadcrumbs)
Разметка последнего элемента «хлебных крошек» (breadcrumbs)
Разметка организации (Organization и LocalBusiness)
Разметка товарного перечня (Products list)
Разметка товара (Product → Offer)
Применяемые свойства
Разметка услуги (Product → AggregateOffer)
Разметка перечня статей блога (Blog)
Разметка статей блога (Article, NewsArticle или BlogPosting). Отличие между Article, NewsArticle и BlogPostiing
Корректная разметка научной работы (CreativeWork)
Разметка фильма (Movie)
Используемые свойства
Разметка рецепта (Recipe)
Используемые свойства
Разметка рисунка (Painting)
Разметка картинки (ImageObject)
Разметка видео (VideoObject)
Разметка события (Event)
Разметка «Вопроса-ответа» (Question)
Разметка отзыва (Review)
Используемые свойства
Разметка футера сайта (WPFooter)
Проверка микроразметки

Актуальные афиши вебинаров, презентации от спикеров и записи прошедших мероприятий вы можете найти в нашем Telegram-канале InMarketing

Здесь же публикуем кейсы, статьи с экспертизой по разным направлениям digital, в которых рассказываем с помощью каких инструментов решать разные маркетинговые задачи.

Перейти

(Рейтинг: 4.63, Голосов: 8)

Находи клиентов. Быстрее!

наверх