- Микроразметка хлебных крошек
- Микроразметка организации
- Микроразметка статей
- Поисковая строка
- Структурированные данные для информационных сайтов
- Структурированные данные для интернет-магазинов
- Другие виды микроразметки Schema.org
- Проверка микроразметки
Микроразметка Schema.org предусматривает выделение основных типов сущностей и их свойств с присвоением им определенных значений. Размечаются и передаются данные непосредственно в коде страницы с помощью микроданных, формата JSON-LD или RDFa.
Структурированные данные, размеченные согласно стандарту, извлекаются роботами и могут быть использованы в различных сервисах поисковых систем. Влияет ли микроразметка на позиции сайта? Официальный ответ поисковиков состоит в том, что влияния нет. Но используя разметку Schema.org, можно улучшить представление своего сайта в результатах выдачи и сделать сниппет более привлекательным и кликабельным.
Google рекомендует использовать формат JSON-LD. Однако данные, размеченные микроразметкой JSON-LD, используются только Яндекс.Почтой и пока не отображаются в результатах поиска Яндекса. Чтобы угодить всем поисковикам, выбирайте микроданные в тех форматах, что поддерживаются обеими системами.
Не все описанные в Schema.org схемы разметки задействованы на поиске. В разделах помощи Яндекса и в Google указано, какие типы структурированных данных в настоящий момент используются в формировании расширенных сниппетов — значительно меньше, чем описано словарем Схема.орг, но постепенно их число увеличивается.
Разберем примеры тех схем, которые чаще всего используются на сайтах. Вы поймете как сделать микроразметку и проверить ее в Гугл и Яндекс.
Микроразметка Schema.org делает ваши данные доступными не только для поисковиков, но и для любых сервисов, использующих данный стандарт в своей работе.
Микроразметка хлебных крошек
Хлебные крошки представляют собой дополнительные цепочки навигации, содержащие путь от главной страницы сайта до текущей. Внедрять их рекомендуем в любом случае — дублирующая навигация полезна и пользователям, и поисковикам. А семантическая разметка крошек позволяет получить красивые сниппеты Google для не-главных страниц:
В Яндексе микроразметка данного типа пока не поддерживается официально, но поисковик сам формирует цепочки для некоторых сайтов. Они, как и быстрые ссылки, основываются на внутренней структуре сайта:
Чтобы сделать разметку хлебных крошек, используется схема https://schema.org/BreadcrumbList.
Микроразметка организации
Разметка адреса организации может отображаться на Яндекс.Картах и в Поиске Яндекса в виде адресного сниппета:
Такой же сниппет может сформировать регистрация в Яндекс.Справочнике. Если вы еще не разместили в этом сервисе информацию о своей компании, быстрый способ получить расширенный адресный сниппет — использовать разметку http://schema.org/Organization или http://schema.org/Place, в том числе более специфичную http://schema.org/LocalBusiness для данных о компаниях с привязкой к конкретному месту работы: салоны красоты, пекарни и т.п.
Пример разметки Organization в microdata
<div itemscope itemtype="http://schema.org/Organization">
<span itemprop="name">ООО Медведица</span>
Адрес и телефон:
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">5-ая Парковая, 52</span>
<span itemprop="postalCode">105264</span>
<span itemprop="addressLocality">Москва, Россия</span>
</div>
Телефон:<span itemprop="telephone">+7 (495) 223 45 45</span>,
E-mail: <span itemprop="email">pochta@medvedica.org</span>
</div>
Пример разметки Organization в JSON-LD
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Organization",
"address": {
"@type": "PostalAddress",
"addressLocality": "Москва, Россия",
"postalCode": "105264",
"streetAddress": "5-ая Парковая, 52"
},
"email": "pochta@medvedica.org",
"name": "Медведица",
"telephone": "+7 (495) 223 45 45"
}
</script>
Схема Organization не поддерживает разметку времени работы компании.
Микроразметка Organization использовалась в поиске Google для отображения данных о компании в блоке знаний. Теперь эта разметка больше не поддерживается, а данные добавляются автоматически.
Разметка LocalBusiness позволяет передать данные о компании в Google Maps, включая информацию о филиалах. Эти данные поступают в сеть знаний наравне с другими источниками.
Пример разметки LocalBusiness в microdata
<div itemscope itemtype="http://schema.org/AutoRental">
<img itemprop="image" src="/images/logo-square.png"/>
<span itemprop="name">Абсолют Корона</span>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">ул. Илимская, дом 1 Б</span>
<span itemprop="addressLocality">Москва</span>
</div>
<div itemprop="geo" itemscope itemtype="http://schema.org/GeoCoordinates">
<meta itemprop="latitude" content="55.8892300" />
<meta itemprop="longitude" content="37.5731234" />
</div>
<span itemprop="telephone">8 (495) 783-70-83</span>
<span itemprop="telephone">8 (916) 783-03-03</span>
<a itemprop="url" href="https://www.absolutecrown.ru">www.absolutecrown.ru</a>
Время работы:
<meta itemprop="openingHours" content="Mo-Fr 10:00-21:00">Пн-Пт 10:00-21:00,
<meta itemprop="openingHours" content="Sa-Su 10:00-18:00">Сб-Вс 10:00-18:00
Цены: <span itemprop="priceRange">1100-4700 руб.</span></div>
Пример разметки LocalBusiness в JSON-LD
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "LocalBusiness",
"additionalType": "AutoRental",
"address": {
"@type": "PostalAddress",
"addressLocality": "Москва",
"streetAddress": "ул. Илимская, дом 1 Б"
},
"name": "Абсолют Корона",
"email": "mail@absolutecrown.ru",
"openingHours": [
"Mo-Fr 10:00-21:00",
"Sa-Su 10:00-18:00"
],
"priceRange": "1100-4700RUB",
"telephone": ["8 (495) 783-70-83", "8 (916) 783-03-03"],
"image": "/images/logo-square.png",
"url": "https://www.absolutecrown.ru",
"geo": {
"@type": "GeoCoordinates",
"latitude": "55.88923006884247",
"longitude": "37.57312349999997"
}
}
</script>
Микроразметка статей
Разметка Article предназначена для статей, публикуемых на сайте. На десктопе к сниппету добавится дата публикации:
На мобильных устройствах еще и картинка:
Причем картинка может быть как той, что вы указали в разметке в качестве картинки для анонса статьи, так и любой другой со страницы. Google сам определит, какую картинку лучше показать в расширенном сниппете. Их может быть и несколько:
Пример разметки Article в microdata
<section itemscope itemtype="http://schema.org/Article">
<h2 itemprop="headline">Аквариумные рыбы лисицы</h2>
<img itemprop="image" src="https://www.aqua-shop.ru/images/news/rybki.jpg">
<div itemprop="description">
Лисицы — весьма распространенные рыбы в морской аквариумистике.
Принадлежат к одноимённому семейству Рыбы-лисицы.
Встречаются в водах Индо-Пацифики и Средиземноморья.
</div>
<time itemprop="datePublished" datetime="2016-03-21"></time>
<span itemprop="author">Аква Шоп</span>
<div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
<div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
<img itemprop="url" src="https://www.aqua-shop.ru/images/news/logo.jpg" />
</div>
<meta itemprop="name" content="aqua-shop.ru">
<meta itemprop="url" content="https://www.aqua-shop.ru">
</div>
<meta itemprop="dateModified" content="2018-05-22" />
<meta itemscope itemprop="mainEntityOfPage"
itemType="https://schema.org/WebPage"
itemid="https://www.aqua-shop.ru/articles/rybki_lisicy" />
</section>
Дата и время в Schema.org размечаются в формате ISO 8601.
Пример разметки Article в JSON-LD
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Article",
"headline": "Аквариумные рыбы лисицы",
"image": "https://www.aqua-shop.ru/images/news/Siganus_vulpinus-Lo.jpg",
"description": "Лисицы — весьма распространенные рыбы в морской аквариумистике.
Принадлежат к одноимённому семейству Рыбы-лисицы.
Встречаются в водах Индо-Пацифики и Средиземноморья.",
"author": "Аква Шоп",
"publisher": {
"@type": "Organization",
"name": "aqua-shop.ru",
"url": "https://www.aqua-shop.ru",
"logo": {
"@type": "ImageObject",
"url": "https://www.aqua-shop.ru/images/news/logo_Aqua-shop.jpg"
}
},
"datepublished": "2016-03-21",
"datemodified": "2018-05-22",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://www.aqua-shop.ru/articles/rybki_lisicy"
}
}
</script>
Поисковая строка
Разметка поисковой строки поддерживается Google и добавляет дополнительное окно поиска по сайту под его адресом при вводе названия бренда или URL конкретного сайта. Она помогает сразу уточнить запрос к сайту и получить нужный результат.
Особенностью данной микроразметки на практике является и то, что ее добавление вовсе на гарантирует появления поиска в сниппете вашего сайта. И наоборот, для крупных популярных сайтов Google сам формирует дополнительную поисковую строку без добавления микроразметки.
Пример разметки в microdata
<div itemscope itemtype="https://schema.org/WebSite">
<meta itemprop="url" content="https://mmetalloprom.ru"/>
<form itemprop="potentialAction" itemscope
itemtype="https://schema.org/SearchAction">
<meta itemprop="target" content="https://mmetalloprom.ru/search/?q={query}"/>
<input itemprop="query-input" type="text" name="query" required/>
<input type="submit"/>
</form>
</div>
Пример разметки в JSON-LD
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"url": "https://mmetalloprom.ru/",
"potentialAction": {
"@type": "SearchAction",
"target": "https://mmetalloprom.ru/search/?q={query}",
"query-input": "required name=query"
}
}
</script>
Структурированные данные для информационных сайтов
Данные типы разметки структурируют информационный контент, хотя их можно найти на коммерческих ресурсах.
Микроразметка FAQ: Часто задаваемые вопросы
Разметка Часто задаваемые вопросы (FAQ) предназначена для вопросов и ответов на них, сформулированных, чаще всего, самими владельцами сайта. Вы можете создать FAQ по любой теме и получить хорошее представление в результатах поиска. Данная разметка подразумевает несколько вопросов на странице с только одним ответом.
Разметка вопросов и ответов должна полностью совпадать с содержимым исходной страницы. Кроме того FAQ нельзя использовать для рекламы, зато Google поддерживает HTML-разметку внутри ответов, а значит внутри информационного контента можно разместить ссылки на другие страницы.
Пример разметки FAQpage в microdata
<div itemscope itemtype="https://schema.org/FAQPage">
<div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
<h3 itemprop="name">✅ Когда можно обратиться в офис?</h3>
<div id="a1" itemscope itemprop="acceptedAnswer"
itemtype="https://schema.org/Answer">
<div itemprop="text">
Мы работаем без выходных и перерывов на обед.
Время работы нашего офиса: пн, вт, ср, чт, пт – 10:00-20:00,
сб, вс – 10:00-17:00.
</div>
</div>
</div>
<div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
<h3 itemprop="name">✅ Можно ли осмотреть Ваши автомашины? Как это сделать?</h3>
<div id="a2" itemscope itemprop="acceptedAnswer"
itemtype="https://schema.org/Answer">
<div itemprop="text">
Осмотр автомобилей производится в нашем автопарке до заключения договора
и оплаты. Типовой договор Вы можете найти <a href="/link">по ссылке</a>.
</div>
</div>
<div>
</div>
Пример разметки FAQpage в JSON-LD
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [{
"@type": "Question",
"name": "✅ Когда можно обратиться в офис?",
"acceptedAnswer": {
"@type": "Answer",
"@id":"a1",
"text": "Мы работаем без выходных и перерывов на обед.
Время работы нашего офиса: пн, вт, ср, чт, пт – 10:00-20:00,
сб, вс – 10:00-17:00."
}
},
{
"@type": "Question",
"name": "✅ Можно ли осмотреть Ваши автомашины и как это сделать?",
"acceptedAnswer": {
"@type": "Answer",
"@id":"a2",
"text": "Осмотр автомобилей производится в нашем автопарке
до заключения договора и оплаты. Типовой договор Вы можете
найти <a href=\"/link\">по ссылке</a>."}
}]
}
</script>
</script>
Не забудьте экранировать кавычки, если используете формат JSON-LD. Для этого надо поставить перед каждой кавычкой, не относящейся к формату, обратный слеш \.
Для открытых вопросов, ответы на которые может оставлять любой пользователь, т.е. ответов может быть несколько, используется другой тип разметки — Вопросы и ответы (Q&A).
Микроразметка Q&A: Вопросы и ответы
Разметка Q&A подходит для форумов или сервисов вопросов и ответов. Структура данных в этому случае подразумевает наличие на странице одного вопроса и несколько ответов.
По рекомендациям Google, желательно формировать собственный URL для каждого ответа, чтобы облегчить навигацию для пользователей. Сделать это можно, например, добаляя хэш с идентификатором ответа к адресу страницы с вопросом. Такие адреса вы сможете отслеживать и в системах статистики.
Микроразметка QApage заметна в расширенных результатах поиска, прежде всего, на мобильных устройствах:
На десктопах сниппет меняется незначительно, но тем не менее:
Если на странице может быть несколько вопросов, то используйте схему разметки FAQ.
Пример разметки QApage в microdata
<div itemscope itemtype="https://schema.org/QAPage">
<div itemprop="mainEntity" itemscope itemtype="https://schema.org/Question">
<h2 itemprop="name">Как много пальцев у кошки?</h2>
<div itemprop="upvoteCount">52</div>
<div itemprop="text">Интересно, как много пальцев у кошек на лапках?</div>
<div>спросили
<time itemprop="dateCreated" datetime="2019-07-23">23 июля 2019</time>
</div>
<div itemprop="author" itemscope itemtype="https://schema.org/Person">
<span itemprop="name">Ваня Иванов</span>
</div>
<div>
<div><span itemprop="answerCount">2</span> ответа</div>
<div><span itemprop="upvoteCount">26</span> оценок</div>
<div itemprop="acceptedAnswer" itemscope itemtype="https://schema.org/Answer">
<div itemprop="upvoteCount">1337</div>
<div itemprop="text">
В норме у кошачьих 18 пальцев: по 5 на передних лапках и по 4 на задних.
Но у кошек широко распространена полидактилия. У знаменитых кошек Хэмингуэя,
живущих в его доме на Кубе, на передних лапах по 6 пальцев и больше.
</div>
<a itemprop="url" href="https://voprosy.com/question1#acceptedAnswer">
Ссылка на ответ</a>
<div>ответ
<time itemprop="dateCreated" datetime="2019-11-02">2 ноября 2019</time>
</div>
<div itemprop="author" itemscope itemtype="https://schema.org/Person">
<span itemprop="name">Алексей Котиков</span>
</div>
</div>
<div itemprop="suggestedAnswer" itemscope itemtype="https://schema.org/Answer">
<div itemprop="upvoteCount">42</div>
<div itemprop="text">
Столько же, сколько у собак.
</div>
<a itemprop="url" href="https://voprosy.com/question1#suggestedAnswer1">
Ссылка на ответ</a>
<div>ответ
<time itemprop="dateCreated"datetime="2019-11-04">4 ноября 2019</time>
</div>
<div itemprop="author" itemscope itemtype="https://schema.org/Person">
<span itemprop="name">Михаил Собачкин</span></div>
</div>
</div>
</div>
</div>
Пример разметки QApage в JSON-LD
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "QAPage",
"mainEntity": {
"@type": "Question",
"name": "Как много пальцев у кошки?",
"text": "Интересно, как много пальцев у кошек на лапках?",
"answerCount": 3,
"upvoteCount": 26,
"dateCreated": "2019-07-23",
"author": {
"@type": "Person",
"name": "Ваня Иванов"
},
"acceptedAnswer": {
"@type": "Answer",
"text": "В норме у кошачьих 18 пальцев: по 5 на передних лапках и
по 4 на задних. Но у кошек широко распространена полидактилия.
У знаменитых кошек Хэмингуэя, живущих в его доме на Кубе, на
передних лапах по 6 пальцев и больше. ",
"dateCreated": "2019-11-02",
"upvoteCount": 1337,
"url": "https://voprosy.com/question1#acceptedAnswer",
"author": {
"@type": "Person",
"name": "Алексей Котиков"
}
},
"suggestedAnswer": [
{
"@type": "Answer",
"text": "Столько же, сколько у собак.",
"dateCreated": "2019-11-04",
"upvoteCount": 42,
"url": "https://voprosy.com/question1#suggestedAnswer1",
"author": {
"@type": "Person",
"name": "Михаил Собачкин"
}
}
]
}
}
</script>
Микроразметка How-To: Инструкция
HowTo-разметка улучшит представление в результатах поиска страниц с пошаговыми инструкциями. Каждый шаг может содержать поясняющие фото и видеоматериалы или же просто текст.
Как и в случае Q&A-схемы, желательно разметить каждый шаг инструкции с собственными урлами с хешем. Пользователь, кликнув по определенному шагу, сможет попасть сразу на соответствующее место в вашей статье.
Разметка работает только на мобильных устройствах и должна соответствовать требованиям Google:
- Инструкция не может содержать рекламу и использоваться в маркетинговых целях.
- Не должны присутствовать оскорбительные или дискриминационные высказывания, материалы сексуального характера, призывы к противоправным действиям.
- Содержимое размеченной инструкции должно полностью присутствовать на оригинальной странице.
- Инструкция должна быть разбита на четкие последовательные шаги. Если вы используете иллюстрации к шагам, то они должны быть уникальными и соответствующими конкретному шагу.
Формат HowTo не применим для микроразметки кулинарных рецептов, для них существует отдельный тип структурированных данных Рецепты.
Пример разметки HowTo в microdata
<div itemscope itemtype="http://schema.org/HowTo">
<h2 itemprop="name">Как отправить посылку за
<span itemprop="totalTime" content="P1D">1 день</span></h2>
<p itemprop="description">Отправляйте товары легко с нашей инструкцией.</p>
<div id="step1" itemprop="step" itemscope
itemtype="http://schema.org/HowToStep">
<p itemprop="name">Шаг 1. Подготовьте посылку и документы. </p>
<link itemprop="url" href="https://site.ru/posylka#step1" />
<img itemprop="image" src="https://site.ru/photos/photo-step1.jpg"/>
<meta itemprop="position" content="1"/>
<div itemprop="itemListElement" itemscope
itemtype="http://schema.org/HowToDirection">
<p itemprop="text">Сложите отравление в коробку и аккуратно заклейте
скотчем. Прикрепите бумаги к коробке. </p>
</div>
</div>
<div id="step2" itemprop="step" itemscope
itemtype="http://schema.org/HowToStep">
<p itemprop="name">Шаг 2. Вызовите курьера. </p>
<link itemprop="url" href="https://site.ru/posylka#step2" />
<img itemprop="image" src="https://site.ru/photos/photo-step2.jpg"/>
<meta itemprop="position" content="2"/>
<div itemprop="itemListElement" itemscope
itemtype="http://schema.org/HowToDirection">
<p itemprop="text">Заполните заявку на
<a href="/forma" rel="nofollow" target="_blank">сайте</a>.</p>
</div>
</div>
<div id="step3" itemprop="step"
itemscope itemtype="http://schema.org/HowToStep">
<p itemprop="name">Шаг 3. Отдайте посылку курьеру.</p>
<link itemprop="url" href="https://site.ru/posylka#step3" />
<img itemprop="image"src="https://site.ru/photos/photo-step3.jpg"/>
<meta itemprop="position" content="3"/>
<div itemprop="itemListElement" itemscope
itemtype="http://schema.org/HowToDirection">
<p itemprop="text">Не забудьте записать номер накладной.</p>
</div>
</div>
</div>
Свойство totalTime означает примерное количество времени, которое понадобится на выполнение перечисленных в инструкции действий. Его необходимо размечать необходимо в стандарте ISO 8601.
Пример разметки HowTo в JSON-LD
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "HowTo",
"name": "Как отправить посылку за 1 день",
"description": "Отправляйте товары легко с нашей инструкцией.",
"step": [
{
"@type": "HowToStep",
"url": "https://site.ru/posylka#step1",
"name": "Шаг 1. Подготовьте посылку и документы.",
"itemListElement": {
"@type": "HowToDirection",
"text": "Сложите отравление в коробку и аккуратно заклейте скотчем.
Прикрепите бумаги к коробке."
},
"image": {
"@type": "ImageObject",
"url": "https://site.ru/photos/photo-step1.jpg",
"height": "406",
"width": "305"
}
}, {
"@type": "HowToStep",
"name": "Шаг 2. Вызовите курьера.",
"url": "https://site.ru/posylka#step2",
"itemListElement": {
"@type": "HowToDirection",
"text": "Заполните заявку на
<a href=\"/forma\" rel=\"nofollow\" target=\"_blank\">сайте</a>."
},
"image": {
"@type": "ImageObject",
"url": "hhttps://site.ru/photos/photo-step2.jpg",
"height": "406",
"width": "305"
}
}, {
"@type": "HowToStep",
"name": "Шаг 3. Отдайте посылку курьеру.",
"url": "https://site.ru/posylka#step3",
"itemListElement": {
"@type": "HowToDirection",
"text": "Не забудьте записать номер накладной."
},
"image": {
"@type": "ImageObject",
"url": "https://site.ru/photos/photo-step3.jpg",
"height": "406",
"width": "305"
}
}
],
"totalTime": "P1D"
}
</script>
Структурированные данные для интернет-магазинов
Для интернет-магазинов и любых коммерческих сайтов, содержащих информацию о товарах с ценами, есть специальные типы разметки для получения красивого и информативного сниппета.
Микроразметка Product для карточки товара
Страница товара размечается с помощью типов https://schema.org/Product и https://schema.org/Offer. Размечаются данные о товаре или услуге (Product) и цене (Offer).
В Яндексе микроразметка Product тоже работает, хотя по сравнению со сниппетом по программе Товары и цены, выглядит менее заметно:
Пример разметки Product-Offer в microdata
<div>
<div itemtype="http://schema.org/Product" itemscope>
<meta itemprop="name" content="Dorothy Perkins Свитер" />
<link itemprop="image" href="https://shop.com/photos/16x9/photo.jpg" />
<link itemprop="image" href="https://shop.com/photos/4x3/photo.jpg" />
<meta itemprop="description" content="Теплый свитер синего цвета из
100% мериносовой шерсти." />
<div itemprop="offers" itemtype="http://schema.org/Offer" itemscope>
<link itemprop="url" href="https://shop.com/dp-sviter" />
<meta itemprop="availability" content="https://schema.org/InStock" />
<meta itemprop="priceCurrency" content="RUB" />
<meta itemprop="itemCondition" content="https://schema.org/NewCondition" />
<meta itemprop="price" content="2500" />
<meta itemprop="priceValidUntil" content="2020-11-05" />
<div itemprop="seller" itemtype="http://schema.org/Organization" itemscope>
<meta itemprop="name" content="Интернет-магазин Shop.com" />
</div>
</div>
<div itemprop="aggregateRating" itemtype="http://schema.org/AggregateRating"
itemscope>
<meta itemprop="reviewCount" content="89" />
<meta itemprop="ratingValue" content="4.4" />
</div>
<meta itemprop="sku" content="0446310786" />
<div itemprop="brand" itemtype="http://schema.org/Thing" itemscope>
<meta itemprop="name" content="Dorothy Perkins" />
</div>
</div>
</div>
Пример разметки Product-Offer в JSON-LD
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Product",
"name": "Dorothy Perkins Свитер",
"image": [
"https://shop.com/photos/1x1/photo.jpg",
"https://shop.com/photos/4x3/photo.jpg"
],
"description": "Теплый свитер синего цвета из 100% мериносовой шерсти.",
"sku": "0446310786",
"brand": {
"@type": "Thing",
"name": "Dorothy Perkins"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.4",
"reviewCount": "89"
},
"offers": {
"@type": "Offer",
"url": "https://shop.com/dp-sviter",
"priceCurrency": "RUB",
"price": "2500",
"priceValidUntil": "2020-11-05",
"itemCondition": "https://schema.org/NewCondition",
"availability": "https://schema.org/InStock",
"seller": {
"@type": "Organization",
"name": "Интернет-магазин Shop.co"
}
}
}
</script>
Микроразметка товарного предложения
Для страницы одного товара с несколькими товарными предложениями, когда цена, например, зависит от определенных факторов и может меняться (разные расцветки одной модели смартфона), то нужно использовать микроразметки https://schema.org/Product и https://schema.org/AggregateOffer.
Схема разметки AggregateOffer обязательно содержит в себе минимальную и максимальную цену на товар, которые выводятся в поисковом сниппете:
Пример разметки Product-AggregateOffer в microdata
<div itemscope itemtype="http://schema.org/Product">
<img itemprop="image" src="dell-30in-lcd.jpg" alt="A Dell UltraSharp monitor"/>
<span itemprop="name">Dell UltraSharp 30" Монитор LCD</span>
от <span itemprop="brand">DELL</span>
<div itemprop="description">Dell UltraSharp 30 с поддержкой технологии
Premier Color — UP3017.</div>
<div itemprop="aggregateRating"
itemscope itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">8.2</span>
из <span itemprop="bestRating">10</span>
на основании <span itemprop="ratingCount">5</span> отзывов покупателей
</div>
<div itemprop="offers" itemscope itemtype="http://schema.org/AggregateOffer">
<span itemprop="lowPrice">22000</span>
до <span itemprop="highPrice">32000</span>
<span itemprop="priceCurrency">рублей</span>
от <span itemprop="offerCount">2</span> продавцов
Предложения:
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<a itemprop="url" href="save-a-lot-monitors.com/dell-30.html">
Save A Lot Monitors — 32000</a>
</div>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<a itemprop="url" href="jondoe-gadgets.com/dell-30.html">
Jon Doe's Gadgets — 22000</a>
</div>
</div>
</div>
Пример разметки Product-AggregateOffer в JSON-LD
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Product",
"image": "dell-30in-lcd.jpg",
"name": "Dell UltraSharp 30\"Монитор LCD" ,
"description": "Dell UltraSharp 30 с поддержкой технологии
Premier Color — UP3017.",
"brand": "DELL",
"aggregateRating": {
"@type": "AggregateRating",
"bestRating": "10",
"ratingCount": "5",
"ratingValue": "8.2"
},
"offers": {
"@type": "AggregateOffer",
"highPrice": "32000",
"lowPrice": "22000",
"priceCurrency": "RUB",
"offerCount": "2",
"offers": [
{
"@type": "Offer",
"url": "save-a-lot-monitors.com/dell-30.html"
},
{
"@type": "Offer",
"url": "jondoe-gadgets.com/dell-30.html"
}
]
}
}
</script>
Микроразметка отзывов
Если вы публикуете отзывы покупателей и клиентов на страницах товаров и услуг, то можно встроить их в разметку товара с помощью свойства review. В этом случае рейтинг товара отобразится в сниппете страницы:
Для этого обращайтесь к уже приведенному примеру разметки Product и добавляйте соответствующую разметку для отзывов https://schema.org/Review.
Пример разметки Product с review в microdata
<pre class="hljs-wrap"><code class="html">
<div itemtype="http://schema.org/Product" itemscope>
...
<div itemprop="review" itemtype="http://schema.org/Review" itemscope>
<div itemprop="author" itemtype="http://schema.org/Person" itemscope>
<meta itemprop="name" content="Кирилл" />
</div>
<meta itemprop="datePublished" content="2018-09-07">7 сентября 2018
<span itemprop="reviewBody">Очень вкусные булочки!</span>
<div itemprop="reviewRating" itemtype="http://schema.org/Rating" itemscope>
<meta itemprop="ratingValue" content="5" />
<meta itemprop="bestRating" content="5" />
<meta itemprop="worstRating" content="1" />
</div>
</div>
<div itemprop="review" itemtype="http://schema.org/Review" itemscope>
<div itemprop="author" itemtype="http://schema.org/Person" itemscope>
<meta itemprop="name" content="Ангелина Иванова" />
</div>
<meta itemprop="datePublished" content="2020-09-07">7 сентября 2020
<span itemprop="name">Пекарня уже не та...</span>
<span itemprop="reviewBody">Маленький выбор вкусов, не хватает крема в булочке.</span>
<div itemprop="reviewRating" itemtype="http://schema.org/Rating" itemscope>
<meta itemprop="ratingValue" content="3" />
<meta itemprop="bestRating" content="5" />
<meta itemprop="worstRating" content="1" />
</div>
</div>
...
</div>
Пример разметки Product с review в JSON-LD
<script type="application/ld+json">
{"@context": "https://schema.org/",
"@type": "Product",
...
"review": [
{
"@type": "Review",
"author": "Кирилл",
"datePublished": "2018-09-07",
"reviewBody": "Очень вкусные булочки!",
"reviewRating": {
"@type": "Rating",
"bestRating": 5,
"ratingValue": 5,
"worstRating": 1
}
},
{
"@type": "Review",
"author": {
"@type": "Person",
"name": "Ангелина Иванова"
}
"datePublished": "2020-09-07",
"reviewBody": "Маленький выбор вкусов, не хватает крема в булочке.",
"name": "Пекарня уже не та...",
"reviewRating": {
"@type": "Rating",
"bestRating": 5,
"ratingValue": 3,
"worstRating": 1
}
}]
...
}
</script>
Другие виды микроразметки Schema.org
Приведем еще несколько схем разметки для специфичного контента, который часто можно встретить в выдаче.
Разметка образовательных курсов
Подходит для разметки учебных курсов и образовательных программ, состоящих из нескольких модулей (уроков). Разовые образовательные события, такие как, например, 2-часовая лекция, относятся к мероприятиям.
В разметке надо четко указывать названия учебных заведений и материалов курсов, нельзя использовать цены, скидки и призывы к покупке.
Расширенный сниппет формируется для страницы со всем курсами, тогда как разметка делается на странице каждого курса отдельно.
Для разметки используйте схему https://schema.org/Course. Узнать больше о разметке курсов в материалах Google.
Разметка мероприятий
Эта разметка привлечет внимание к вашим мероприятиям в поиске и на Google-картах.
Ее можно использовать не только для концертов, но и для любых ивентов: выставок, акций компании с четкими временными ограничениями и т.д.
Для разметки используйте схему https://schema.org/Event. Узнать больше о разметке мероприятий в материалах Google.
Разметка рецептов
Разметка кулинарных рецептов участвует в формировании специальных снипетов и в Яндексе, и в Гугле.
Разметку можно увидеть в результатах поиска.
В Google также можно увидеть специальную карусель из рецептов при некоторых запросах.
А в Яндексе — попасть в расширенный сниппет справа от основного поиска.
Для разметки используйте схему https://schema.org/Recipe. Узнать больше о разметке рецептов в материалах Google и Яндекс.
Проверка микроразметки
На этапе внедрения пользуйтесь специальными сервисами для проверки структурированных данных.
У Яндекса такой функционал представлен в инструменте Вебмастер. Авторизуйтесь в сервисе и пройдите по ссылке Инструменты — Валидатор микроразметки. Проверить микрозметку можно по URLу страницы или фрагменту HTML-кода.
В Google проверка микроразметки доступна в https://search.google.com/structured-data/testing-tool/u/0/ с похожими возможностями. Но тут интерфейс чуть более удобен — в нем для любого исходного варианта предусмотрена возможность отладки и мгновенной проверки внесенных в разметку изменений.
Здесь есть 2 типа замечаний: собственно ошибки (выделяются красным), которые мешают интерпретации разметки, и предупреждения (выделяются оранжевым), которые допустимы, но говорят о том, что данные в разметке неполные.
Недавно Google представил еще один онлайн-инструмент, чтобы проверить расширенные сниппеты и узнать может ли ваша разметка быть показана в результатах поиска https://search.google.com/test/rich-results?hl=ru. Необходимо указать URL страницы или фрагмент проверяемого кода и выбрать основного робота (в большинстве случаев это Googlebot для смартфонов).
Вместо заключения
Как видите, получить красивый сниппет, привлекающий внимание, совсем не сложно! Достаточно один раз разобраться в Schema.org, используя наши подсказки и примеры, и вы сможете самостоятельно структурировать данные на своем сайте.
Нужно увеличить количество заказов с интернета?
