ВСЕ примеры микроразметки Schema.org для сайта

---

Разметка schema.org — одна из самых мощных, но наименее используемых форм SEO-оптимизации доступная сегодня. Как только вы поймете концепцию и способы управления этой разметкой, вы сможете улучшить результаты сайта в выдаче поисковых систем (SERP).

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

Что такое разметка schema.org?

Разметка schema.org — это код (семантический словарь), который вы размещаете на своем сайте, чтобы помочь поисковым системам показать пользователям больше результатов в выдаче, а главное, эта информация будет более структурирована. Если вы когда-либо использовали расширенные описания веб-страниц, вы точно поймете, что такое разметка схемы.

Поисковик Google рекомендует использовать формат JSON-LD. К сожалению, на данный момент, Яндекс не поддерживает этот формат, поэтому, чтобы угодить всем поисковикам, выбирайте разметку в том формате, которая поддерживается обеими поисковыми системами.

Микроразметка для хлебных крошек (breadcrumbs)

Хлебные крошки (от англ. breadcrumbs) — дополнительные цепочки навигации, содержащие путь от главной страницы сайта до текущей. Их использование на сайте полезно в любом случае, а дополнительная, семантическая разметка делает сниппет в Google более привлекательным.

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

Для разметки хлебных крошек используется схема //schema.org/BreadcrumbList.

Пример html-разметки BreadcrumbList в microdata

<ul class="breadcrumb" itemscope itemtype="//schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="//schema.org/ListItem">
<a target="_blank" href="/" itemprop="item">
<span itemprop="name">Zolin Digital</span>
</a>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope itemtype="//schema.org/ListItem" >
<a target="_blank" href="/category/articles/" itemprop="item">
<span itemprop="name">Статьи</span>
</a>
<meta itemprop="position" content="2" />
</li>
<li itemprop="itemListElement" itemscope itemtype="//schema.org/ListItem" >
<a target="_blank" href="/articles/schema-snippets/" itemprop="item">
<span itemprop="name">Schema Snippets</span>
</a>
<meta itemprop="position" content="3" />
</li>
</ul>

Пример json-разметки BreadcrumbList в JSON-LD

<script type="application/ld+json">
{
"@context": "//schema.org",
"@type": "BreadcrumbList",
"itemListElement":
[
{"@type": "ListItem",
"position": 1,
"item":
{"@id": "//zolin.digital/",
"name": "Zolin Digital"}
},
{"@type": "ListItem",
"position": 2,
"item":
{"@id": "//zolin.digital/category/articles/",
"name": "Статьи"}
},
{"@type": "ListItem",
"position": 3,
"item":
{"@id": "//zolin.digital/articles/schema-snippets/",
"name": "Schema Snippets"}
}
]
}
</script>

Пример php-разметки BreadcrumbList для конвертации в JSON-LD

$data = [
'@context' => '//schema.org',
'@type' => 'BreadcrumbList',
'itemListElement' => [
['@type' => 'ListItem',
'position' => '1',
'item' => [
'@id' => '//zolin.digital/',
'name' => 'Zolin Digital',
],
],
['@type' => 'ListItem',
'position' => '2',
'item' => [
'@id' => '//zolin.digital/category/articles/',
'name' => 'Articles',
],
],
['@type' => 'ListItem',
'position' => '3',
'item' => [
'@id' => '//zolin.digital/articles/schema-snippets/',
'name' => 'Schema Snippets',
],
],
],
];
$data = json_encode($data);
echo '<script type="application/ld+json">' . $data . '</script>';

Микроразметка для организации

Разметка контактов организации может отображаться как в поисковике, так и на картах:

К тому же, такой сниппет может автоматически разместить вас в Яндекс.Справочнике. Для такой разметки используется //schema.org/Organization, //schema.org/Place или более специфичная //schema.org/LocalBusiness для данных о компаниях с привязкой к конкретному месту работы: маникюрный салон, парикмахерская и т.д.

Пример html-разметки Organization в microdata

<div itemscope itemtype="//schema.org/Organization">
<span itemprop="name">ООО Медведица</span>
Адрес и телефон:
<div itemprop="address" itemscope itemtype="//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>

Пример json-разметки Organization в JSON-LD

<script type="application/ld+json">
{
"@context": "//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>

Пример php-разметки Organization для конвертации в JSON-LD

$data = [
'@context' => '//schema.org',
'@type' => 'Organization',
'address' => [
'@type' => 'PostalAddress',
'addressLocality' => 'Москва, Россия',
'postalCode' => '105264',
'streetAddress' => '5-ая Парковая, 52',
],
'email' => 'pochta@medvedica.org',
'name' => 'Медведица',
'telephone' => '+7 (495) 223 45 45',
];

$data = json_encode($data);

echo '<script type="application/ld+json">' . $data . '</script>';

Чтобы передать данные о времени работы компании, гео-координаты и стоимость услуг используется более специфичная разметка LocalBusiness. Она позволяет передавать данные о компании в Google Maps автоматически, наравне с другими источниками.

<div itemscope itemtype="//schema.org/AutoRental">
<img itemprop="image" src="/images/logo-square.png"/>
<span itemprop="name">Абсолют Корона</span>
<div itemprop="address" itemscope itemtype="//schema.org/PostalAddress">
<span itemprop="streetAddress">ул. Илимская, дом 1 Б</span>
<span itemprop="addressLocality">Москва</span>
</div>
<div itemprop="geo" itemscope itemtype="//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="//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>

Пример json-разметки LocalBusiness в JSON-LD

<script type="application/ld+json">
{
"@context": "//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": "//www.absolutecrown.ru",
"geo": {
"@type": "GeoCoordinates",
"latitude": "55.88923006884247",
"longitude": "37.57312349999997"
}
}
</script>

Пример php-разметки LocalBusiness для конвертации в JSON-LD

$data = [
'@context' => '//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' => '//www.absolutecrown.ru',
'geo' => [
'@type' => 'GeoCoordinates',
'latitude' => '55.88923006884247',
'longitude' => '37.57312349999997',
],
];

$data = json_encode($data);

echo '<script type="application/ld+json">' . $data . '</script>';

Микроразметка для статей

Разметка //schema.org/Article предназначена для статей, публикуемых на сайте. В десктопной версии к сниппету добавится дата публикации, а на мобильных устройствах еще и картинка:

<section itemscope itemtype="//schema.org/Article">
<h2 itemprop="headline">Аквариумные рыбы лисицы</h2>
<img itemprop="image" src="//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="//schema.org/Organization">
<div itemprop="logo" itemscope itemtype="//schema.org/ImageObject">
<img itemprop="url" src="//www.aqua-shop.ru/images/news/logo.jpg" />
</div>
<meta itemprop="name" content="aqua-shop.ru">
<meta itemprop="url" content="//www.aqua-shop.ru">
</div>
<meta itemprop="dateModified" content="2018-05-22" />
<meta itemscope itemprop="mainEntityOfPage" itemType="//schema.org/WebPage" itemid="//www.aqua-shop.ru/articles/rybki_lisicy" />
</section>

Пример json-разметки Article в JSON-LD

<script type="application/ld+json">
{
"@context": "//schema.org/",
"@type": "Article",
"headline": "Аквариумные рыбы лисицы",
"image": "//www.aqua-shop.ru/images/news/Siganus_vulpinus-Lo.jpg",
"description": "Лисицы — весьма распространенные рыбы в морской аквариумистике. Принадлежат к одноимённому семейству Рыбы-лисицы. Встречаются в водах Индо-Пацифики и Средиземноморья.",
"author": "Аква Шоп",
"publisher": {
"@type": "Organization",
"name": "aqua-shop.ru",
"url": "//www.aqua-shop.ru",
"logo": {
"@type": "ImageObject",
"url": "//www.aqua-shop.ru/images/news/logo_Aqua-shop.jpg"
}
},
"datepublished": "2016-03-21",
"datemodified": "2018-05-22",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "//www.aqua-shop.ru/articles/rybki_lisicy"
}
}
</script>

Пример php-разметки Article для конвертации в JSON-LD

$data = [
'@context' => '//schema.org',
'@type' => 'Article',
'headline' => 'Аквариумные рыбы лисицы',
'image' => '//www.aqua-shop.ru/images/news/Siganus_vulpinus-Lo.jpg',
'description' => 'Лисицы — весьма распространенные рыбы в морской аквариумистике. Принадлежат к одноимённому семейству Рыбы-лисицы. Встречаются в водах Индо-Пацифики и Средиземноморья.',
'author' => 'Аква Шоп',
'publisher' => [
'@type' => 'Organization',
'name' => 'aqua-shop.ru',
'url' => '//www.aqua-shop.ru',
'logo' => [
'@type' => 'ImageObject',
'url' => '//www.aqua-shop.ru/images/news/logo_Aqua-shop.jpg',
]
],
'datepublished' => '2016-03-21',
'datemodified' => '2018-05-22',
'mainEntityOfPage' => [
'@type' => 'WebPage',
'@id' => '//www.aqua-shop.ru/articles/rybki_lisicy',
],
];

$data = json_encode($data);

echo '<script type="application/ld+json">' . $data . '</script>';

Микроразметка для поисковой строки

Посиковая строка помогает сразу уточнить запрос к сайту и получить нужный результат. Разметка поддерживается Google и отображается при вводе названия бренда или URL конкретного сайта.

<div itemscope itemtype="//schema.org/WebSite">
<meta itemprop="url" content="//rider-skill.ru"/>
<form itemprop="potentialAction" itemscope itemtype="//schema.org/SearchAction">
<meta itemprop="target" content="//rider-skill.ru/search/?q={query}"/>
<input itemprop="query-input" type="text" name="query" required/>
<input type="submit"/>
</form>
</div>

Пример json-разметки поисковой строки в JSON-LD

<script type="application/ld+json">
{
"@context": "//schema.org",
"@type": "WebSite",
"url": "//rider-skill.ru/",
"potentialAction": {
"@type": "SearchAction",
"target": "//rider-skill.ru/?s={query}",
"query-input": "required name=query"
}
}
</script>

Пример php-разметки поисковой строки для конвертации в JSON-LD

$data = [
'@context' => '//schema.org',
'@type' => 'WebSite',
'url' => '//rider-skill.ru/',
'potentialAction' => [
'@type' => 'SearchAction',
'target' => '//rider-skill.ru/?s={query}',
'query-input' => 'required name=query',
]
];

$data = json_encode($data);

echo '<script type="application/ld+json">' . $data . '</script>';

Микроразметка Часто задаваемые вопросы (FAQ)

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

<div itemscope itemtype="//schema.org/FAQPage">
<div itemscope itemprop="mainEntity" itemtype="//schema.org/Question">
<h3 itemprop="name">✅ Когда можно обратиться в офис?</h3>
<div id="a1" itemscope itemprop="acceptedAnswer" itemtype="//schema.org/Answer">
<div itemprop="text">Мы работаем без выходных и перерывов на обед. Время работы нашего офиса: пн, вт, ср, чт, пт – 10:00-20:00, сб, вс – 10:00-17:00.</div>
</div>
</div>
<div itemscope itemprop="mainEntity" itemtype="//schema.org/Question">
<h3 itemprop="name">✅ Можно ли осмотреть Ваши автомашины? Как это сделать?</h3>
<div id="a2" itemscope itemprop="acceptedAnswer" itemtype="//schema.org/Answer">
<div itemprop="text">Осмотр автомобилей производится в нашем автопарке до заключения договора и оплаты. Типовой договор Вы можете найти <a href="/link">по ссылке</a></div>.    
</div>
</div>
</div>

Пример json-разметки FAQpage в JSON-LD

<script type="application/ld+json">
{
"@context": "//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>

Пример php-разметки FAQpage в JSON-LD

$data = [
'@context' => '//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>.',
],
],
],
];

$data = json_encode($data);

echo '<script type="application/ld+json">' . $data . '</script>';

Микроразметка Вопросы и ответы (Q&A)

Для вопросов и ответов, которые могут оставлять на сайте пользователи используется другой тип разметки — //schema.org/QAPage.

Разметка QApage подходит для сервисов вопросов и ответов. Структура данных в этому случае подразумевает наличие на странице одного вопроса и несколько ответов.

Микроразметка Q&A заметна в расширенных результатах поиска, в основном на мобильных устройствах:

<div itemscope itemtype="//schema.org/QAPage">
    <div itemprop="mainEntity" itemscope itemtype="//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="//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="//schema.org/Answer">
                <div itemprop="upvoteCount">1337</div>
                <div itemprop="text">В норме у кошачьих 18 пальцев: по 5 на передних лапках и по 4 на задних. Но у кошек широко распространена полидактилия. У знаменитых кошек Хэмингуэя, живущих в его доме на Кубе, на передних лапах по 6 пальцев и больше.
                </div>
                <a itemprop="url" href="//voprosy.com/question1#acceptedAnswer">
                    Ссылка на ответ</a>
                <div>ответ
                    <time itemprop="dateCreated" datetime="2019-11-02">2 ноября 2019</time>
                </div>
                <div itemprop="author" itemscope itemtype="//schema.org/Person">
                    <span itemprop="name">Алексей Котиков</span>
                </div>
            </div>
            <div itemprop="suggestedAnswer" itemscope itemtype="//schema.org/Answer">
                <div itemprop="upvoteCount">42</div>
                <div itemprop="text">Столько же, сколько у собак.</div>
                <a itemprop="url" href="//voprosy.com/question1#suggestedAnswer1">Ссылка на ответ</a>
                <div>ответ
                    <time itemprop="dateCreated" datetime="2019-11-04">4 ноября 2019</time>
                </div>
                <div itemprop="author" itemscope itemtype="//schema.org/Person">
                    <span itemprop="name">Михаил Собачкин</span>
                </div>
            </div>
        </div>
    </div>
</div>

Пример json-разметки QApage в JSON-LD

<script type="application/ld+json">
{
"@context": "//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": "//voprosy.com/question1#acceptedAnswer",
"author": {
"@type": "Person",
"name": "Алексей Котиков"
}
},
"suggestedAnswer": [
{
"@type": "Answer",
"text": "Столько же, сколько у собак.",
"dateCreated": "2019-11-04",
"upvoteCount": 42,
"url": "//voprosy.com/question1#suggestedAnswer1",
"author": {
"@type": "Person",
"name": "Михаил Собачкин"
}
}
]
}
}
</script>

Пример php-разметки QApage для конвертации в JSON-LD

$data = [
'@context' => '//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' => '//voprosy.com/question1#acceptedAnswer',
'author' => [
'@type' => 'Person',
'name' => 'Алексей Котиков',
]
],
'suggestedAnswer' => [
[
'@type' => 'Answer',
'text' => 'Столько же, сколько у собак.',
'dateCreated' => '2019-11-04',
'upvoteCount' => '42',
'url' => '//voprosy.com/question1#suggestedAnswer1',
'author' => [
'@type' => 'Person',
'name' => 'Михаил Собачкин',
]
],
],
],
];

$data = json_encode($data);

echo '<script type="application/ld+json">' . $data . '</script>';

Микроразметка для инструкции (HowTo)

Разметка //schema.org/HowTo может быть использована для страниц с пошаговыми инструкциями. Каждый шаг может содержать текст или поясняющие фото и видеоматериалы.

<div itemscope itemtype="//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="//schema.org/HowToStep">
<p itemprop="name">Шаг 1. Подготовьте посылку и документы. </p>
<link itemprop="url" href="//site.ru/posylka#step1" />
<img itemprop="image" src="//site.ru/photos/photo-step1.jpg" />
<meta itemprop="position" content="1" />
<div itemprop="itemListElement" itemscope itemtype="//schema.org/HowToDirection">
<p itemprop="text">Сложите отравление в коробку и аккуратно заклейте скотчем. Прикрепите бумаги к коробке. </p>
</div>
</div>
<div id="step2" itemprop="step" itemscope itemtype="//schema.org/HowToStep">
<p itemprop="name">Шаг 2. Вызовите курьера. </p>
<link itemprop="url" href="//site.ru/posylka#step2" />
<img itemprop="image" src="//site.ru/photos/photo-step2.jpg" />
<meta itemprop="position" content="2" />
<div itemprop="itemListElement" itemscope itemtype="//schema.org/HowToDirection">
<p itemprop="text">Заполните заявку на <a href="/forma" rel="nofollow" target="_blank">сайте</a>.</p>
</div>
</div>
<div id="step3" itemprop="step" itemscope itemtype="//schema.org/HowToStep">
<p itemprop="name">Шаг 3. Отдайте посылку курьеру.</p>
<link itemprop="url" href="//site.ru/posylka#step3" />
<img itemprop="image" src="//site.ru/photos/photo-step3.jpg" />
<meta itemprop="position" content="3" />
<div itemprop="itemListElement" itemscope itemtype="//schema.org/HowToDirection">
<p itemprop="text">Не забудьте записать номер накладной.</p>
</div>
</div>
</div>

Пример json-разметки HowTo в JSON-LD

<script type="application/ld+json">
{
"@context": "//schema.org",
"@type": "HowTo",
"name": "Как отправить посылку за 1 день",
"description": "Отправляйте товары легко с нашей инструкцией.",
"step": [
{
"@type": "HowToStep",
"url": "//site.ru/posylka#step1",
"name": "Шаг 1. Подготовьте посылку и документы.",
"itemListElement": {
"@type": "HowToDirection",
"text": "Сложите отравление в коробку и аккуратно заклейте скотчем. Прикрепите бумаги к коробке."
},
"image": {
"@type": "ImageObject",
"url": "//site.ru/photos/photo-step1.jpg",
"height": "406",
"width": "305"
}
}, {
"@type": "HowToStep",
"name": "Шаг 2. Вызовите курьера.",
"url": "//site.ru/posylka#step2",
"itemListElement": {
"@type": "HowToDirection",
"text": "Заполните заявку на <a href=\"/forma\" rel=\"nofollow\" target=\"_blank\">сайте</a>."
}, 
"image": {
"@type": "ImageObject",
"url": "h//site.ru/photos/photo-step2.jpg",
"height": "406",
"width": "305"
}
}, {
"@type": "HowToStep",
"name": "Шаг 3. Отдайте посылку курьеру.",
"url": "//site.ru/posylka#step3",
"itemListElement": {
"@type": "HowToDirection",
"text": "Не забудьте записать номер накладной."
}, 
"image": {
"@type": "ImageObject",
"url": "//site.ru/photos/photo-step3.jpg",
"height": "406",
"width": "305"
}
}
],
"totalTime": "P1D"
}
</script>

Пример php-разметки HowTo для конвертации в JSON-LD

$data = [
'@context' => '//schema.org',
'@type' => 'HowTo',
'name' => 'Как отправить посылку за 1 день',
'description' => 'Отправляйте товары легко с нашей инструкцией.',
'step' => [
[
'@type' => 'HowToStep',
'url' => '//site.ru/posylka#step1',
'name' => 'Шаг 1. Подготовьте посылку и документы.',
'itemListElement' => [
'@type' => 'HowToDirection',
'text' => 'Сложите отравление в коробку и аккуратно заклейте скотчем. Прикрепите бумаги к коробке.',
],
'image' => [
'@type' => 'ImageObject',
'url' => '//site.ru/photos/photo-step1.jpg',
'height' => '406',
'width' => '305',
],
], [
'@type' => 'HowToStep',
'url' => '//site.ru/posylka#step2',
'name' => 'Шаг 2. Вызовите курьера.',
'itemListElement' => [
'@type' => 'HowToDirection',
'text' => 'Заполните заявку на <a href=\"/forma\" rel=\"nofollow\" target=\"_blank\">сайте</a>.',
],
'image' => [
'@type' => 'ImageObject',
'url' => '//site.ru/photos/photo-step2.jpg',
'height' => '406',
'width' => '305',
],
], [
'@type' => 'HowToStep',
'url' => '//site.ru/posylka#step3',
'name' => 'Шаг 3. Отдайте посылку курьеру.',
'itemListElement' => [
'@type' => 'HowToDirection',
'text' => 'Не забудьте записать номер накладной.',
],
'image' => [
'@type' => 'ImageObject',
'url' => '//site.ru/photos/photo-step3.jpg',
'height' => '406',
'width' => '305',
],
],
],
'totalTime' => 'P1D',
];

$data = json_encode($data);

echo '<script type="application/ld+json">' . $data . '</script>';

Микроразметка для карточки товара (Product)

Страницы товаров размечаются с помощью разметки вида //schema.org/Product и //schema.org/Offer. Размечаются данные о товаре или услуге (Product) и цене (Offer).

<div>
<div itemtype="//schema.org/Product" itemscope>
<meta itemprop="name" content="Dorothy Perkins Свитер" />
<link itemprop="image" href="//shop.com/photos/16x9/photo.jpg" />
<link itemprop="image" href="//shop.com/photos/4x3/photo.jpg" />
<meta itemprop="description" content="Теплый свитер синего цвета из 100% мериносовой шерсти." />
<div itemprop="offers" itemtype="//schema.org/Offer" itemscope>
<link itemprop="url" href="//shop.com/dp-sviter" />
<meta itemprop="availability" content="//schema.org/InStock" />
<meta itemprop="priceCurrency" content="RUB" />
<meta itemprop="itemCondition" content="//schema.org/NewCondition" />
<meta itemprop="price" content="2500" />
<meta itemprop="priceValidUntil" content="2020-11-05" />
<div itemprop="seller" itemtype="//schema.org/Organization" itemscope>
<meta itemprop="name" content="Интернет-магазин Shop.com" />
</div>
</div>
<div itemprop="aggregateRating" itemtype="//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="//schema.org/Thing" itemscope>
<meta itemprop="name" content="Dorothy Perkins" />
</div>
</div>
</div>

Пример json-разметки Product в JSON-LD

<script type="application/ld+json">
{
"@context": "//schema.org/",
"@type": "Product",
"name": "Dorothy Perkins Свитер",
"image": [
"//shop.com/photos/1x1/photo.jpg",
"//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": "//shop.com/dp-sviter",
"priceCurrency": "RUB",
"price": "2500",
"priceValidUntil": "2020-11-05",
"itemCondition": "//schema.org/NewCondition",
"availability": "//schema.org/InStock",
"seller": {
"@type": "Organization",
"name": "Интернет-магазин Shop.co"
}
}
}
</script>

Пример php-разметки Product для конвертации в JSON-LD

$data = [
'@context' => '//schema.org',
'@type' => 'Product',
'name' => 'Dorothy Perkins Свитер',
'image' => [
'//shop.com/photos/1x1/photo.jpg',
'//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' => '//shop.com/dp-sviter',
'priceCurrency' => 'RUB',
'price' => '2500',
'priceValidUntil' => '2020-11-05',
'itemCondition' => '//schema.org/NewCondition',
'availability' => '//schema.org/InStock',
'seller' => [
'@type' => 'Organization',
'name' => 'Интернет-магазин Shop.co',
],
],
];

$data = json_encode($data);

echo '<script type="application/ld+json">' . $data . '</script>';

Микроразметка для товарного предложения (AggregateOffer)

Для вариативного товара, когда цена может меняться в зависимости от цвета или комплектации нужно использовать микроразметку //schema.org/Product и //schema.org/AggregateOffer.

Схема AggregateOffer должна обязательно содержать в себе минимальную и максимальную цену на товар, эта информация выводится в поисковом сниппете:

<div itemscope itemtype="//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="//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="//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="//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="//schema.org/Offer">
<a itemprop="url" href="jondoe-gadgets.com/dell-30.html">Jon Doe's Gadgets — 22000</a>
</div>
</div>
</div>

Пример json-разметки AggregateOffer в JSON-LD

<script type="application/ld+json">
{
"@context": "//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>

Пример php-разметки AggregateOffer для конвертации в JSON-LD

$data = [
'@context' => '//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',
'reviewCount' => '5',
'ratingValue' => '8.2',
],
'offers' => [
'@type' => 'Offer',
'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',
],
],
],
];

$data = json_encode($data);

echo '<script type="application/ld+json">' . $data . '</script>';

Микроразметка для отзывов (Review)

Для публикации отзывов клиентов и покупателей на страницах товаров и услуг можно использовать разметку //schema.org/Review, чтобы встроить их в разметку товара. В этом случае рейтинг товара отобразится в сниппете страницы:

<div itemtype="//schema.org/Product" itemscope>
<div itemprop="review" itemtype="//schema.org/Review" itemscope>
<div itemprop="author" itemtype="//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="//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="//schema.org/Review" itemscope>
<div itemprop="author" itemtype="//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="//schema.org/Rating" itemscope>
<meta itemprop="ratingValue" content="3" />
<meta itemprop="bestRating" content="5" />
<meta itemprop="worstRating" content="1" />
</div>
</div>
</div>

Пример json-разметки Product в JSON-LD

<script type="application/ld+json">
{
"@context": "//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>

Пример php-разметки Product для конвертации в JSON-LD

$data = [
'@context' => '//schema.org',
'@type' => 'Product',
'review' => [
[
'@type' => 'Review',
'author' => [
'@type' => 'Person',
'name' => 'Кирилл',
],
'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',
],
],
],
];

$data = json_encode($data);

echo '<script type="application/ld+json">' . $data . '</script>';

---