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

прочитали: 521
Микроразметка schema.org
Редакция блога Ingate
14 апреля 2021
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

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

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

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

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

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

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

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

<div>

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

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

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

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

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

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

</div>

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

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

<div itemprop="name">название_компании</div>

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

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

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

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

<span itemprop="name">ООО «Цифровой элемент»</span>

<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">

<meta itemprop="streetAddress" content="ул. Энгельса, д. 2, оф. 200">

<meta itemprop="postalCode" content="454000">

<meta itemprop="addressLocality" content="Челябинск">

</span>

<span itemprop="telephone">8 (800) 555–85–89</span>

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

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

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

</div>

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

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

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

<ul>

<li>

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

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

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

<div>

<span>47280</span>

<span>руб.</span>

</div>

<div>Бренд</div>

<div>Модель</div>

</a>

</li>

<li>

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

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

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

<div>

<span>47280</span>

<span>руб.</span>

</div>

<div>Бренд</div>

<div>Модель</div>

</a>

</li>

<li>

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

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

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

<div>

<span>47280</span>

<span>руб.</span>

</div>

<div>Бренд</div>

<div>Модель</div>

</a>

</li>

</ul>

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

<ul itemscope itemtype="http://schema.org/ItemList">

<li itemscope itemprop="itemListElement" itemtype="http://schema.org/Product">

<a itemprop="url" href="ссылка_на_товар_1">

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

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

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

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

<div><span itemprop="price">47280</span> руб.</div>

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

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

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

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

</a>

</li>

<li itemscope itemprop="itemListElement" itemtype="http://schema.org/Product">

<a itemprop="url" href="ссылка_на_товар_2">

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

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

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

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

<div><span itemprop="price">47280</span> руб.</div>

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

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

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

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

</a>

</li>

<li itemscope itemprop="itemListElement" itemtype="http://schema.org/Product">

<a itemprop="url" href="ссылка_на_товар_3">

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

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

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

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

<div><span itemprop="price">47280</span> руб.</div>

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

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

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

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

</a>

</li>

</ul>

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

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

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

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

<div>

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

<a href="ссылка-на-увеличенное-изображение.jpg">

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

</a>

<div>

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

</div>

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

</div>

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

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

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

<a href="ссылка-на-увеличенное-изображение.jpg">

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

</a>

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

<meta itemprop="price" content="690.00">

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

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

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

</div>

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

</div>

Рассмотрим образец детальной разметки товаров:

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

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

<a href="ссылка-на-изображение.jpg"><img src="ссылка_на_изображение.jpg" itemprop="image" /></a>

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

<span itemprop="ratingValue">4</span>

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

</div>

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

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

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

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

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

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

<span itemprop="price">699</span>

<span><link itemprop="availability" href="http://schema.org/InStock"/>В наличии</span>

<meta itemprop="priceValidUntil" content="2013-09-14T21:30">

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

<span itemprop="name">Заголовок отзыва</span>

от <span itemprop="author">Имя пользователя</span>,

<meta itemprop="datePublished" content="2013-09-14">

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

<meta itemprop="worstRating" content="1"> //Минимальная оценка

<span itemprop="ratingValue">4</span> //Оценка пользователя

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

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

</div>

</div>

</div>

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

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

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

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

Описание

http://schema.org/Product

Начинает микроразметку продукта

http://schema.org/Offer

Начинает разметку товарных характеристик

http://schema.org/Review

Начинает разметку отзывов на продукт

http://schema.org/Rating

Начинает микроразметку рейтинга

name

Наименование

image

Изображение

price

Стоимость

priceCurrency

Используемая денежная единица (RUB, 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>

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

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

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

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

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

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

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

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

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

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

</div>

</div>

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

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

<div>

<article>

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

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

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

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

<p>Автор</p>

</article>

<article>

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

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

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

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

<p>Автор</p>

</article>

</div>

Размеченный список статей:

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

<div itemprop="description">описание_для_списка_статей</div>

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

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

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

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

<p itemprop="description">краткое_описание_статьи</p>

<p itemprop="articleBody">полный_текст_статьи_анонс</p>

<p itemprop="author">Автор</p>

<div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">

<div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">

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

</div>

<link itemprop="url" href="ссылка_на_сайт">

<div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">

<span itemprop="postalCode">почтовый_индекс</span>,

<span itemprop="addressCountry">Страна</span>,

<span itemprop="addressRegion">Область</span>,

<span itemprop="addressLocality">Город</span>,

<span itemprop="streetAddress">улица, номер_дома</span>

</div>

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

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

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

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

</div>

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

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

</div>

</article>

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

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

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

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

<p itemprop="description">краткое_описание_статьи</p>

<p itemprop="articleBody">полный_текст_статьи_анонс</p>

<p itemprop="author">Автор</p>

<div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">

<div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">

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

</div>

<link itemprop="url" href="ссылка_на_сайт">

<div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">

<span itemprop="postalCode">почтовый_индекс</span>,

<span itemprop="addressCountry">Страна</span>,

<span itemprop="addressRegion">Область</span>,

<span itemprop="addressLocality">Город</span>,

<span itemprop="streetAddress">улица, номер_дома</span>

</div>

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

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

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

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

</div>

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

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

</article>

</div>

Разметка статей блога (Article, NewsArticle или BlogPosting). Отличие между Article, NewsArticle и BlogPostiing

Эти типы применяют почти идентичные свойства и определяют главные характеристики разметки статьи (заголовок, тело, дату размещения), поэтому замена BlogPosting на Article не отразится на результате. Выбор между ними определяется типом текстовых материалов:

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

Без разметки «Статья» имеет вид:

<article>

<p>Автор: Автор статьи</p>

<span>Дата: <time>2019-04-22T11:48:26+00:00</time></span>

<h1>название_статьи</h1>

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

<div>полное_текст_статьи</div>

</article>

В приведенной ниже универсальной микроразметке можно заменить общий Article на более узкие NewsArticle и BlogPosting – валидность от этого не поменяется.

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

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

<p>Автор: <span itemprop="author">Автор статьи</span></p>

<p>Дата публикации: <time itemprop="datePublished" datetime="2019-04-22">22 апреля 2019</time></p>

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

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

<article itemprop="articleBody">полное_текст_статьи</article>

<div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">

<div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">

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

</div>

<link itemprop="url" href="ссылка_на_сайт">

<div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">

<span itemprop="postalCode">почтовый_индекс</span>,

<span itemprop="addressCountry">Страна</span>,

<span itemprop="addressRegion">Область</span>,

<span itemprop="addressLocality">Город</span>,

<span itemprop="streetAddress">улица, номер_дома</span>

</div>

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

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

</div>

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

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

</div>

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

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

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

<div>

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

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

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

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

</div>

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

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

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

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

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

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

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

</div>

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

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

Разметка фильма (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>

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

<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

Обозначает кинокомпанию, выпустившую фильм

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) Указывает адрес изображения готового блюда. Это поле лучше заполнять для создания расширенного сниппета

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

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

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

<img itemprop="image" src="изображение_или_постер_события.jpg" />

<div itemprop="name">название_события</div>

<div itemprop="description">описание_события</div>

<div>

Концерт состоится

<time itemprop="startDate" datetime="2019-05-08T19:30">8 мая, в 19:30</time>

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

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

</div>

<div itemprop="location" itemscope itemtype="http://schema.org/Place" />

Место проведения: <span itemprop="name">страна_или_город</span>,

<span itemprop="address">полный_адрес</span>

</div>

<div itemprop="performer" itemscope itemtype="http://schema.org/Person" />

<span itemprop="name">фио_исполнителя_или_название_группы</span>

</div>

</div>

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

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

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

<div>

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

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

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

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

</div>

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

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

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

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

<div>

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

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

</div>

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

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

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

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

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

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

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

</footer>

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

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

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

  1. валидатор от Google;
  2. функция проверки расширенных сниппетов от Google;
  3. валидатор от Яндекса.
(Рейтинг: 5, Голосов: 7)
У тебя есть нерешенные задачи?

В этом блоге мы делимся знаниями, но если у тебя есть серьезные цели, которые требуют вмешательства настоящих профи, сообщи! Перезвоним, расскажем, решим любые задачи из области digital

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

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