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