Разметка LocalBusiness — переводится дословно как «Данные о местной компании». Когда пользователи ищут информацию о компании, правильная разметка schema.org может составить актуальные данные в Яндекс.Справочнике или в результатах поиска Google.
Базовая разметка, которую я часто использую на страницах «Контакты»:
<div itemscope itemtype="http://schema.org/LocalBusiness">
<p itemprop="name">Название сайта / организации</p>
<p itemprop="description">Описание деятельности организации</p>
<meta itemprop="telephone" content="8 (000) 000-00-00">
<a itemprop="email" href="mailto:email@example.ru">email@example.ru</a>
<link itemprop="url" href="http://site.ru">
<meta itemprop="priceRange" content="От 1000 RUB">
<img itemprop="logo image" alt="Логотип" title="Логотип" src="http://site.ru/Images/logo.png" style="display:none;"/>
<time itemprop="openingHours" datetime="Mo-Sn 7:00−23:00">Ежедневно: 7:00–23:00</time>
<span itemprop="faxNumber">8(495)123-45-67</span>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="postalCode">119019</span>
<span itemprop="addressCountry">Россия</span>
<span itemprop="addressLocality">Москва</span>,
<span itemprop="streetAddress">Московская ул., дом 1, корпус 1, строение 1</span>
</div>
</div>Теги меняйте сами, в зависимости от нужд.
Давайте теперь её разберем:
itemtype="http://schema.org/LocalBusiness"— Базовый объект разметки.itemprop="name"— Название сайта / компании.itemprop="description"— Описание деятельности компании.itemprop="telephone"— Телефон компании.itemprop="email"— Email почта компании.itemprop="url"— Ссылка на сайт компании.itemprop="priceRange"— Диапазон цен бизнеса и валюта, например $ или RUB.itemprop="logo image"— Ссылка на логотип компании.itemprop="openingHours"— Часы и дни работы компании.itemprop="faxNumber"— Факс компании.itemprop="address"— Физический адрес компании, тут ссылаемся на объект PostalAddress.itemscope itemtype="http://schema.org/PostalAddress"— Объект почтового адреса компании.itemprop="postalCode"— Почтовый индекс адреса компании компании.itemprop="addressCountry"— Страна в которой располагается главный офис компании.itemprop="addressLocality"— Город в котором располагается главный офис компании.itemprop="streetAddress"— Улица и дом адреса главного офиса компании.
Время работы: 0,1126 s
Время запросов: 0,1126 s
Количество запросов: 28
Источник: cache
Оглавление
- Схема Corporation
- Схема EducationalOrganization
- Схема GovernmentOrganization
- Схема LocalBusiness
- Схема NGO
- Схема PerformingGroup
- Схема SportsOrganization
Не пропусти свежие посты, подпишись:
<div itemscope="" itemtype="http://schema.org/Airline">
<span itemprop="iataCode">IATA - код авиакомпании, уникальный идентификатор авиакомпании
в международном регистре компаний осуществляющих авиаперевозки пассажиров</span>
<span itemprop="name">Наименование авиакомпании</span>
<img src="img/airline_logo.jpg" itemprop="logo">
<span itemprop="description">Подробное описание авиакомпании</span>
<div itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">4</span> звезды -
основано на <span itemprop="reviewCount">250</span> отзывах клиентов компании
</div>
Контактная информация авиакомпании:
<div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
Почтовый адрес:
<span itemprop="streetAddress">номер дома, улица</span>
<span itemprop="postalCode">почтовый индекс</span>
<span itemprop="addressLocality">город, страна</span>
,
</div>
Телефон:<span itemprop="telephone">контактный телефон</span>,
Факс:<span itemprop="faxNumber">факс</span>,
E-mail: <span itemprop="email">корпоративный e-mail</span>
</div>
Схема Corporation
Схема предназначена для описания крупных сетевых компаний, магазинов имеющих представительства в разных городах и странах, строительных холдингов и т.п.
<div itemscope="" itemtype="http://schema.org/Store">
<div>
<h1 itemprop="name">Название сети магазинов</h1>
Описание сети магазинов
Часы работы:
<time itemprop="openingHours" datetime="Mo-Fr 07:00-23:00">Понедельник-Пятница с 7:00 до 23:00</time>
Контактный телефон: <span itemprop="telephone">контаткный телефон</span>
</div>
Дальше перечесляем предприятия (департаменты) входящие в нашу сеть
<div itemprop="department" itemscope="" itemtype="http://schema.org/Pharmacy">
<h2 itemprop="name">Аптека</h2>
Описание аптеки
Часы работы:
<time itemprop="openingHours" datetime="Mo-Fr 07:00-23:00">Понедельник-Пятница с 7:00 до 23:00</time>
Контактный телефон: <span itemprop="telephone">контаткный телефон</span>
</div>
<div itemprop="department" itemscope="" itemtype="http://schema.org/DryCleaningOrLaundry">
<h2 itemprop="name">Химчистка</h2>
Описание химчистки
Часы работы:
<time itemprop="openingHours" datetime="Mo-Fr 07:00-23:00">Понедельник-Пятница с 7:00 до 23:00</time>
Контактный телефон: <span itemprop="telephone">контактный телефон</span>
Какая-нибудь ветвь компании <span itemprop="branchOf" itemscope="" itemtype="http://schema.org/Corporation">
URL адрес сайта
<a itemprop="url" href="http://example.com/">
<span itemprop="name">Наименование ответвления</span></a></span>.
</div>
</div>
Схема EducationalOrganization
Тут всё предельно ясно, мы описываем какое-нибудь образовательное учреждение. Тут есть одно уникальное свойство alumni выпускник. Многие учебные заведения хвастаются своими известными выпускниками. такое как МГИМО например. Так же описывая конкретного человека используюя схему Person можно сослаться на учебное заведение в котором учился этот человек, использую обратное свойство alumiOf.
<div itemscope="" itemtype="http://schema.org/EducationalOrganization">
<span itemprop="name">Наименование образовательного учреждения</span>
<div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">дом, улица</span>
<span itemprop="addressLocality">населённый пункт</span>,
<span itemprop="addressRegion">регион</span> <span itemprop="postalCode">почтовый индекс</span>
</div>
Список выпускников учебного заведеия
<span itemprop="alumni" itemscope="" itemtype="http://schema.org/Person">
<span itemprop="name">Имя выпускника</span>
</span>
<span itemprop="alumni" itemscope="" itemtype="http://schema.org/Person">
<span itemprop="name">Имя выпускника</span>
</span>
</div>
Схема GovernmentOrganization
Правительственные организации, неплохо подойдёт для описания бюджетных и муницыпальных учреждений , администраций городов и районов, дум и пр.
<div itemscope="" itemtype="http://schema.org/GovernmentPermit">
<span itemprop="name">Наименование разрешения/лицензии выданное государственным органом</span>
<div itemprop="issuedBy" itemscope="" itemtype="http://schema.org/GovernmentOrganization">
<span itemprop="name">Наименование гописываемого гос.учреждения</span>
Обязательно нужно указывать адрес организации и контактные данные
<div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">дом, улица</span>
<span itemprop="addressLocality">населённый пункт</span>,
<span itemprop="addressRegion">регион</span> <span itemprop="postalCode">почтовый индекс</span>
</div>
Телефон:<span itemprop="telephone">контактный телефон</span>,
Факс:<span itemprop="faxNumber">факс</span>,
E-mail: <span itemprop="email">корпоративный e-mail</span>
</div>
<div itemprop="issuedThrough" itemscope="" itemtype="http://schema.org/GovernmentService">
<span itemprop="name">Услуги предоставляемые данной правительственной организацией, например выдача пособий,
оформление определённого вида документов и т.п.</span>
</div>
<div itemprop="validIn" itemscope="" itemtype="http://schema.org/AdministrativeArea">
<span itemprop="name">Географический регион находящийся под юрисдикцией той или иной власти</span>
Обязательно нужно указывать адрес организации и контактные данные
<div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">дом, улица</span>
<span itemprop="addressLocality">населённый пункт</span>,
<span itemprop="addressRegion">регион</span> <span itemprop="postalCode">почтовый индекс</span>
</div>
Телефон:<span itemprop="telephone">контактный телефон</span>,
</div>
<time itemprop="validFor">Время действия разрешения/лицензии
выданной данной правительственной организации
</time>
</div>
Схема LocalBusiness
Тут можно описать небольшую комапнию предоставляющую услуги (автосервис, заправка картриджей для принтера) или маленький магазинчик, аптеку, торговую точку в гипермаркете и т.п.
<div itemscope="" itemtype="http://schema.org/Restaurant">
<span itemprop="name">Наименование ларька</span>
<div itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">4</span> звезды -
основнано на <span itemprop="reviewCount">250</span> отзывах клиентов ларька
</div>
<div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">дом, улица</span>
<span itemprop="addressLocality">город</span>,
<span itemprop="addressRegion">регион</span> <span itemprop="postalCode">почтовый индекс</span>
</div>
<span itemprop="telephone">Контактный телефон</span>
<a itemprop="url" href="http://www.example.com">веб-сайт компании</a>
Часы работы:
<time itemprop="openingHours" datetime="Mo-Fr 07:00-23:00">Понедельник-Пятница с 7:00 до 23:00</time>
Дальше может идти описание специфичных именно этому бизнесу свойств. Блюда, услуги, музыка и т.п.
</div>
Схема NGO
Описание неправительственных общественных организаций. Практически повторяет описание обычной организации.
<div itemscope="" itemtype="http://schema.org/NGO">
<span itemprop="name">Наименование организации</span>
<div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">дом, улица</span>
<span itemprop="addressLocality">город</span>,
<span itemprop="addressRegion">регион</span> <span itemprop="postalCode">почтовый индекс</span>
</div>
Телефон:<span itemprop="telephone">контактный телефон</span>,
Факс:<span itemprop="faxNumber">факс</span>,
E-mail: <span itemprop="email">корпоративный e-mail</span>
</div>
Схема PerformingGroup
Этой схемой можно описать музыкальную группу или танцевальный ансамбль или любое дургое творческое объединение. Не буду подробно тут останавливаться т.к. схема не содержит каких-либо уникальных свойств. Скажу лишь что тут можно сделать упор на описание членов группы, руководителей и т.п.
Схема SportsOrganization
С помощью этой схемы Вы можете описывать футбольные, хоккейные, волейбольные и другие команды, тренеров этих команд выделяя их схемой Person , атрибутику компанд и пр. Уникальным свойством схемы является sport т.е. вид спорта в котором играет эта комманда
<div itemscope="" itemtype="http://schema.org/SportsOrganization">
<span itemprop="name">Наименование команды</span>
<span itemprop="description">Описание команды, история, победы, награды, участники</span>
<span itemprop="sport">вид спорта в которм состязается эта команда</span>
Почтовый адрес клуба где тренируется команда
<div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">дом, улица</span>
<span itemprop="addressLocality">город</span>,
<span itemprop="addressRegion">регион</span> <span itemprop="postalCode">почтовый индекс</span>
</div>
Контактные телефоны
Телефон:<span itemprop="telephone">контактный телефон</span>,
Факс:<span itemprop="faxNumber">факс</span>,
E-mail: <span itemprop="email">корпоративный e-mail</span>
</div>
Вот собственно и всё. Многие из этих схем например LoacalBusiness имеют дальнейшую градацию на типы бизнеса. Что позволяет ещё точнее рассказать поисковикам о Вашей компании. А в сочетании с грамотно созданными интерактивными картами и удобнымим контактными формами, Ваша страница контактов будет неотразима для поисковика. Оптимизируйте свой контент, пишите нужную людям информацию и будет Вашему сайту счастье!
Не забудьте проверить вашу микроразметку с помощью валидатора Яндекс дабы исключить все ошибки до индексации сайта роботом.
Микроразметка Schema.org/Organization отвечает за структурирование данных о компании в формате Microdata или JSON-LD. С помощью такой разметки можно указать поисковому роботу на контактную информацию и добавить её в сниппет главной страницы (из Яндекс Справочника).
Содержание:
- Основные форматы микроразметки
- Как составить микроразметку Организации
- 1. Ручной способ
- 2. Мастер разметки структурированных данных от Google
- 3. Плагины для микроразметки на CMS
- Проверка микроразметки на ошибки
- Как разместить микроразметку Организации на сайте
Основные форматы микроразметки
Существует два основных формата структурирования данных, с помощью которых составляют микроразметку:
JSON-LD — способ передачи информации, который реализуется при помощи текстового формата JSON. Использование данного метода предпочтительнее, поскольку он позволяет легко читать, создавать и редактировать размеченные документы человеку.
Microdata — это способ разметки микроданных, в котором информация размечается непосредственно в тегах сайта с помощью основных атрибутов itemscope, itemtype и itemprop.
Как составить микроразметку Organization
1. Ручной способ
Составить микроразметку можно вручную, для этого необходимо просто заменить данные в примере на Ваши:
Пример разметки Organization в формате Microdata
<div style=»display:none»>
<div itemscope itemtype=»http://schema.org/Organization»>
<span itemprop=»name»>Название организации</span>
Контакты:<div itemprop=»address» itemscope itemtype=»http://schema.org/PostalAddress»>
Адрес:<span itemprop=»streetAddress»>Адрес</span>
<span itemprop=»postalCode»>Почтовый индекс</span>
<span itemprop=»addressLocality»>Город</span>,</div>
Телефон:<span itemprop=»telephone”>Номер телефона</span>,
Электронная почта: <span itemprop=»email»>E-mail</span></div></div>
Пример разметки Organization в формате JSON-LD
<script type=»application/ld+json»>{
«@context»: «https://schema.org/»,
«@type»: «Organization»,
«name»: «Название организации»,
«telephone»: «+7 (999) 999-99-99»,
«email»: «info@email.ru «,
«address»: {
«@type»: «PostalAddress»,
«addressLocality»: «Город»,
«streetAddress»: «Адрес»
}}
</script>
Внимание! Узнать о дополнительных свойствах разметки Вы можете на официальном сайте Schema.org.
2. Мастер разметки структурированных данных от Google
Если Ваш сайт продвигается только в Google, то внедрить микроразметку Организации можно намного проще – при помощи специального инструмента «Мастер разметки структурированных данных». Он позволяет не работать с кодом напрямую и быстро получить результат. Однако для Яндекса такая разметка работать не будет.
3. Плагины для микроразметки на CMS
Для самой популярной CMS WordPress существует несколько плагинов, с помощью которых можно добавить микроразметку:
Schema — All In One Schema Rich Snippets. Бесплатный плагин, который поддерживает разметку Schema.org в формате Microdata. Поддерживает следующие виды микроразметки: отзывы, события, люди, товары, рецепты, приложения, видео, статьи.
Schema. Плагин для создания микроразметки Schema.org на основе синтаксиса JSON-LD. В бесплатной версии с его помощью можно разметить статью, блог, шапку сайта и подвал, хлебные крошки, страницу о себе и с контактами, видео и информацию об авторе. В платной версии добавляется возможность размечать товары, рецепты, услуги, приложения. события, курсы, вакансии и другие сущности.
WP SEO Structured Data Schema. Плагин для микроразметки, который использует формат микроданных. Есть платная и бесплатная версии. В бесплатной можно разметить данные об организации и локальном бизнесе, товары, услуги, статьи, видео, отзывы и другие сущности.
Проверка микроразметки на ошибки
Перед тем, как добавлять готовый код или скрипт на сайт, его необходимо проверить на ошибки в специальном инструменте. Можно воспользоваться валидаторами от Google и Яндекс.
- Проверка структурированных данных от Google
Этот инструмент проверяет корректность оформления микроразметки. Чтобы проверить микроразметку на ошибки, перейдите на страницу инструмента и укажите URL-адрес сайта или код, который необходимо проверить.
- Валидатор микроразметки от Яндекс
Валидатор от Яндекс работает по схожему принципу, в него также можно вставить URL-адрес страницы или код HTML, но он воспринимает некоторые ошибки по-другому.
Как разместить микроразметку Организации на сайте
Готовую микроразметку необходимо добавить в код шапки или подвала сайта. Для этого необходимо выполнить следующие действия:
1. Перейти на хостинг сайта или подключиться к нему через FTP:
2. Запустить поиск и найти файл «header.php»:
Внимание! Название файла может отличаться в зависимости от движка сайта. Если у Вас не получилось найти нужны файл, то проконсультируйтесь с программистом.
3. Скачать файл на рабочий стол и открыть его с помощью «Блокнота»:
4. Вставить готовый код микроразметки адреса организации после тега <head>:
5. Сохранить файл и загрузить его обратно напрямую через хостинг или FTP:
Поздравляем! Вы добавили микроразметку Организации на сайт.
Спасибо, что дочитали до конца. Переходите к следующей инструкции.
Разметка schema.org — одна из самых мощных, но наименее используемых форм SEO-оптимизации доступная сегодня. Как только вы поймете концепцию и способы управления этой разметкой, вы сможете улучшить результаты сайта в выдаче поисковых систем (SERP).
Моя цель в этой статье — показать вам практические методы, как именно использовать разметку схемы для вашего сайта. Мы на примерах разберем примеры тех схем, которые чаще всего используются на сайтах.
Разметка schema.org — это код (семантический словарь), который вы размещаете на своем сайте, чтобы помочь поисковым системам показать пользователям больше результатов в выдаче, а главное, эта информация будет более структурирована. Если вы когда-либо использовали расширенные описания веб-страниц, вы точно поймете, что такое разметка схемы.
Поисковик Google рекомендует использовать формат JSON-LD. К сожалению, на данный момент, Яндекс не поддерживает этот формат, поэтому, чтобы угодить всем поисковикам, выбирайте разметку в том формате, которая поддерживается обеими поисковыми системами.
Микроразметка для хлебных крошек (breadcrumbs)
Хлебные крошки (от англ. breadcrumbs) — дополнительные цепочки навигации, содержащие путь от главной страницы сайта до текущей. Их использование на сайте полезно в любом случае, а дополнительная, семантическая разметка делает сниппет в Google более привлекательным.
Яндекс еще не ввел официальную поддержку такой разметки, но иногда самостоятельно формирует цепочки навигации для некоторых сайтов.
Для разметки хлебных крошек используется схема https://schema.org/BreadcrumbList.
Пример html-разметки BreadcrumbList в microdata
<ul class="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="http://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="http://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="http://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": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement":
[
{"@type": "ListItem",
"position": 1,
"item":
{"@id": "https://artzolin.ru/",
"name": "Zolin Digital"}
},
{"@type": "ListItem",
"position": 2,
"item":
{"@id": "https://artzolin.ru/category/articles/",
"name": "Статьи"}
},
{"@type": "ListItem",
"position": 3,
"item":
{"@id": "https://artzolin.ru/articles/schema-snippets/",
"name": "Schema Snippets"}
}
]
}
</script>Пример php-разметки BreadcrumbList для конвертации в JSON-LD
$data = [
'@context' => 'http://schema.org',
'@type' => 'BreadcrumbList',
'itemListElement' => [
['@type' => 'ListItem',
'position' => '1',
'item' => [
'@id' => 'https://artzolin.ru/',
'name' => 'Zolin Digital',
],
],
['@type' => 'ListItem',
'position' => '2',
'item' => [
'@id' => 'https://artzolin.ru/category/articles/',
'name' => 'Articles',
],
],
['@type' => 'ListItem',
'position' => '3',
'item' => [
'@id' => 'https://artzolin.ru/articles/schema-snippets/',
'name' => 'Schema Snippets',
],
],
],
];
$data = json_encode($data);
echo '<script type="application/ld+json">' . $data . '</script>';Микроразметка для организации
Разметка контактов организации может отображаться как в поисковике, так и на картах:
К тому же, такой сниппет может автоматически разместить вас в Яндекс.Справочнике. Для такой разметки используется https://schema.org/Organization, https://schema.org/Place или более специфичная https://schema.org/LocalBusiness для данных о компаниях с привязкой к конкретному месту работы: маникюрный салон, парикмахерская и т.д.
Пример html-разметки 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>Пример json-разметки 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>Пример php-разметки Organization для конвертации в JSON-LD
$data = [
'@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',
];
$data = json_encode($data);
echo '<script type="application/ld+json">' . $data . '</script>';Чтобы передать данные о времени работы компании, гео-координаты и стоимость услуг используется более специфичная разметка LocalBusiness. Она позволяет передавать данные о компании в Google Maps автоматически, наравне с другими источниками.
Пример html-разметки 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>Пример json-разметки 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>Пример php-разметки LocalBusiness для конвертации в JSON-LD
$data = [
'@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',
],
];
$data = json_encode($data);
echo '<script type="application/ld+json">' . $data . '</script>';Микроразметка для статей
Разметка https://schema.org/Article предназначена для статей, публикуемых на сайте. В десктопной версии к сниппету добавится дата публикации, а на мобильных устройствах еще и картинка:
Пример html-разметки 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>Пример json-разметки 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>Пример php-разметки Article для конвертации в JSON-LD
$data = [
'@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',
],
];
$data = json_encode($data);
echo '<script type="application/ld+json">' . $data . '</script>';Микроразметка для поисковой строки
Посиковая строка помогает сразу уточнить запрос к сайту и получить нужный результат. Разметка поддерживается Google и отображается при вводе названия бренда или URL конкретного сайта.
Пример html-разметки поисковой строки в microdata
<div itemscope itemtype="https://schema.org/WebSite">
<meta itemprop="url" content="https://rider-skill.ru"/>
<form itemprop="potentialAction" itemscope itemtype="https://schema.org/SearchAction">
<meta itemprop="target" content="https://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": "http://schema.org",
"@type": "WebSite",
"url": "https://rider-skill.ru/",
"potentialAction": {
"@type": "SearchAction",
"target": "https://rider-skill.ru/?s={query}",
"query-input": "required name=query"
}
}
</script>Пример php-разметки поисковой строки для конвертации в JSON-LD
$data = [
'@context' => 'http://schema.org',
'@type' => 'WebSite',
'url' => 'https://rider-skill.ru/',
'potentialAction' => [
'@type' => 'SearchAction',
'target' => 'https://rider-skill.ru/?s={query}',
'query-input' => 'required name=query',
]
];
$data = json_encode($data);
echo '<script type="application/ld+json">' . $data . '</script>';Микроразметка Часто задаваемые вопросы (FAQ)
Разметка Часто задаваемые вопросы (FAQ) предназначена для вопросов и ответов на них, сформулированных, чаще всего, самими владельцами сайта. Данная разметка подразумевает несколько вопросов на странице с только одним ответом.
Фактически, вы указывате в коде, какой текст является вопросом, а какой ответом на него.
Разметка вопросов и ответов должна полностью совпадать с содержимым страницы. Кроме того FAQ нельзя использовать для рекламы, зато Google поддерживает HTML-разметку внутри ответов, а значит внутри информационного контента можно использовать emoji или размещать ссылки на другие страницы.
Собрать микроразметку можно с помощью https://schema.org/FAQPage.
Пример 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>Пример json-разметки 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>Пример php-разметки FAQpage в JSON-LD
$data = [
'@context' => 'http://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)
Для вопросов и ответов, которые могут оставлять на сайте пользователи используется другой тип разметки — https://schema.org/QAPage.
Разметка QApage подходит для сервисов вопросов и ответов. Структура данных в этому случае подразумевает наличие на странице одного вопроса и несколько ответов.
Микроразметка Q&A заметна в расширенных результатах поиска, в основном на мобильных устройствах:
По рекомендациям Google, желательно формировать собственный URL для каждого ответа, чтобы облегчить навигацию для пользователей. Сделать это можно, например, указав id для контенера с ответом, а для ссылки хеш с этим ответом. Пример https://qna.habr.com/q/937919#answer_1875919. Такие адреса вы сможете отслеживать и в системах статистики.
На десктопах сниппет меняется незначительно, добавляется только информация о количестве ответов:
Пример html-разметки 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>Пример json-разметки 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>Пример php-разметки QApage для конвертации в JSON-LD
$data = [
'@context' => 'http://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' => 'Михаил Собачкин',
]
],
],
],
];
$data = json_encode($data);
echo '<script type="application/ld+json">' . $data . '</script>';Микроразметка для инструкции (HowTo)
Разметка https://schema.org/HowTo может быть использована для страниц с пошаговыми инструкциями. Каждый шаг может содержать текст или поясняющие фото и видеоматериалы.
Разметка HowTo работает только на мобильных устройствах и должна соответствовать требованиям Google:
- Инструкция не может содержать рекламу и использоваться в маркетинговых целях.
- Не должны присутствовать оскорбительные или дискриминационные высказывания, материалы сексуального характера, призывы к противоправным действиям.
- Содержимое размеченной инструкции должно полностью присутствовать на оригинальной странице.
- Инструкция должна быть разбита на четкие последовательные шаги. Если вы используете иллюстрации к шагам, то они должны быть уникальными и соответствующими конкретному шагу.
Пример html-разметки 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>Пример json-разметки 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>Пример php-разметки HowTo для конвертации в JSON-LD
$data = [
'@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',
'url' => 'https://site.ru/posylka#step2',
'name' => 'Шаг 2. Вызовите курьера.',
'itemListElement' => [
'@type' => 'HowToDirection',
'text' => 'Заполните заявку на <a href="/forma" rel="nofollow" target="_blank">сайте</a>.',
],
'image' => [
'@type' => 'ImageObject',
'url' => 'https://site.ru/photos/photo-step2.jpg',
'height' => '406',
'width' => '305',
],
], [
'@type' => 'HowToStep',
'url' => 'https://site.ru/posylka#step3',
'name' => 'Шаг 3. Отдайте посылку курьеру.',
'itemListElement' => [
'@type' => 'HowToDirection',
'text' => 'Не забудьте записать номер накладной.',
],
'image' => [
'@type' => 'ImageObject',
'url' => 'https://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)
Страницы товаров размечаются с помощью разметки вида https://schema.org/Product и https://schema.org/Offer. Размечаются данные о товаре или услуге (Product) и цене (Offer).
Пример html-разметки Product в 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>Пример json-разметки Product в 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>Пример php-разметки Product для конвертации в JSON-LD
$data = [
'@context' => 'http://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',
],
],
];
$data = json_encode($data);
echo '<script type="application/ld+json">' . $data . '</script>';Микроразметка для товарного предложения (AggregateOffer)
Для вариативного товара, когда цена может меняться в зависимости от цвета или комплектации нужно использовать микроразметку https://schema.org/Product и https://schema.org/AggregateOffer.
Схема AggregateOffer должна обязательно содержать в себе минимальную и максимальную цену на товар, эта информация выводится в поисковом сниппете:
Пример html-разметки 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>Пример json-разметки 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>Пример php-разметки AggregateOffer для конвертации в JSON-LD
$data = [
'@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',
'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)
Для публикации отзывов клиентов и покупателей на страницах товаров и услуг можно использовать разметку https://schema.org/Review, чтобы встроить их в разметку товара. В этом случае рейтинг товара отобразится в сниппете страницы:
Кстати, такой рейтинг не обязательно должен относиться к товару, такой сниппет можно получить и для информационной статьи:
Пример html-разметки Product в microdata
<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>Пример json-разметки Product в 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>Пример php-разметки Product для конвертации в JSON-LD
$data = [
'@context' => 'http://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>';Разметка образовательных курсов (Course)
Для разметки учебных курсов и образовательных программ, состоящих из нескольких модулей (уроков) подойдет разметка https://schema.org/Course.
Но разовые образовательные события, такие как, например, 2-часовая лекция, относятся к мероприятиям.
В разметке надо четко указывать названия учебных заведений и материалов курсов, нельзя использовать цены, скидки и призывы к покупке.
Разметка мероприятий (Event)
Эта разметка используется не только для концертов, но и для любых ивентов: выставок, акций компании с четкими временными ограничениями и т.д. с помощью разметки https://schema.org/Event.
Разметка рецептов (Recipe)
Разметка кулинарных рецептов используется для формирования специальных снипетов в Гугле и Яндексе с помощью https://schema.org/Recipe.
В Google разметку можно увидеть в результатах поиска.
В Яндексе разметка встречается также используется в результататх поиска, к тому же есть вероятность попасть в расширенный сниппет справа от основного поиска.
Проверка микроразметки
Для того, чтобы убедиться, что вы сделали все правильно существуют официальные сервисы проверки микроразметки.
У Яндекса проверка микроразметки доступна в Вебмастере https://webmaster.yandex.ru/tools/microtest/. Авторизуйтесь в сервисе и пройдите по ссылке Инструменты — Валидатор микроразметки. Проверить микрозметку можно по URLу страницы или фрагменту HTML-кода.
В Google такой функционал находится в https://search.google.com/structured-data/testing-tool/u/0/:
Недавно Google представил еще один онлайн-инструмент, чтобы проверить расширенные сниппеты и узнать может ли ваша разметка быть показана в результатах поиска https://search.google.com/test/rich-results. Необходимо указать URL страницы или фрагмент проверяемого кода и выбрать основного робота (в большинстве случаев это Googlebot для смартфонов).
Как видите, это очень важный инструмент для привлечения внимания пользователя и если его освоить, это незамедлительно даст присрост пользователей на сайт.
Уровень сложности
Простой
Время на прочтение
20 мин
Количество просмотров 1.9K
Микроразметка сайта для поисковых систем Яндекс и Google в формате Schema.org, JSON-LD и Open Graph. Разметку старался делать без js, т.к. Яндекс ее не учитывает. Микроформат Schema.org подходит для Яндекс/Google. Преимущество данного метода — не нужно ждать бота, который придет, просканирует страницу с включенным js и поймет что там находится. Ускоряет обработку данных в микроданных.
Всем привет. Меня зовут Толстенко Александр. Я частный SEO специалист. В сфере разработки и продвижения бизнеса в интернете я с 2009 года. Мы с командой занимаемся продвижением сайтов в Яндекс и Google.
Занимаясь SEO продвижением одного крупного СМИ портала, была необходимость собрать по максимуму определенные виды микроразметок и внедрить их на сайт, чтобы Яндекс и Google корректно понимали какой контент находится на сайте и данные в ней побыстрее попадали в сниппеты результатов выдачи, делая сайт заметным на поиске.
У Яндекса есть проблемы с пониманием JSON-LD, а Google сканирует сайт не сразу с включенным js, из-за чего данные в микроформате не сразу учитываются роботом.
Поэтому, пришлось собирать нужную разметку и переделывать JSON-LD в Schema.org, чтобы все поисковые машины смогли распознать информацию на сайте корректно.
Яндекс не понимает JSON-LD?
Как так, в валидаторе же, при проверке данные видны? Пример проверки js микроразметки на скрине.
Специально, задал этот вопрос техподдержке Яндекса. Ответ на скрине ниже.
Итак, погнали. Начну с определения и немного примеров, потом будет мясо.
Что такое микроразметка
Микроразметка — это способ семантической разметки данных на сайте, который помогает поисковым роботам лучше понимать какая информация размещена на страницах сайта.
Цель семантической разметки – сделать интернет более понятным, структурированным и облегчить поисковым системам и специальным программам извлечение и обработку информации для удобного ее представления в результатах поиска.
Из справки Яндекс https://yandex.ru/support/webmaster/schema-org/
Для чего нужна микроразметка сайта при SEO продвижении?
С помощью семантической разметки документа, можно выделить сайт в результатах выдачи поисковых систем.
Сравните результаты поисковой выдачи ниже. Сайты у которых есть микроразметка, намного заметнее, чем без нее. Следовательно, у таких сайтов будет больше переходов из поиска, клиентов и продаж.
Некоторые примеры из выдачи Яндекса
Некоторые примеры из выдачи Гугл
Словари микроразметки
В детали, виды и синтаксис словарей вдаваться не буду, там много чего можно написать. Вряд ли только кому это будет интересно, т.к. скорее всего вы ищете именно разметку.
Для продвижения сайта в Яндекс и Google SEOшники используют только три вида разметки: Schema.org, Open Graph, JSON-LD, чтобы объяснить роботу какой текст, находится в каком блоке на сайте и по возможности (алгоритмы постоянно меняются), эта информация попала в описание площадки на поиске. Другие встречаются очень редко.
Формат Schema.org рекомендует использовать Яндекс, JSON-LD — Google.
Open Graph хоть и разработан социальной сетью Facebook (на момент публикации, запрещенная соцсеть в РФ), но на сайт его тоже интегрируют, чтобы сделать более привлекательное отображение площадки, когда делятся ссылками в сообщениях. Пример, на скрине ниже.
Инфа для программистов!
Ниже примеры разметки. Она может не подходить под текущую структуру верстки на сайте, нужно применить примеры к текущему формату разметки. Там где она есть, проверить. В случае надобности скорректировать/добавить отсутствующие поля разметки.
Где проверять правильность разметки на сайте
В Яндексе: https://webmaster.yandex.ru/tools/microtest/ — некоторая разметка в может показываться с ошибкой в онлайн сервисе проверки. В Google ошибок не было.
В Гугле: https://search.google.com/structured-data/testing-tool
P.S.: При проверки примеров микроразметки в Яндлекс.Вебмастере, кое какая будет выдавать ошибку, в Гугл — ошибки не будет. Проверял все по Гуглу. Если, где то будет ошибка, прошу строго не судить, я не прогер, за обратную связь буду благодарен.
Микроразметка для сайта
Ниже находятся примеры разных методов разметки данных. По максимуму старался сделать в формате Schema.org, но использовал и другие. Разметка подойдет для сайта услуг, блога, информационного портала СМИ. Что то можно взять и для интернет магазина. Кому надо, берите правьте под себя.
P.S.: в коде, где прописан класс DisplaNone — нужно css стилями скрыть лишную техническую информацию от глаз пользователей. Все пояснения заменить на нужную информацию. Комменты, можно удалить при необходимости.
Микроразметка для блока head
Добавить в блок head микроразметку для og и twitter. Пример кода:
<head>
{содержание head}
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:title" content="{Заголовок статьи h1}">
<meta property="og:url" content="текущий_url_материала">
<meta property="og:image" content="ссылка на фото материала. Еcли нет, вставить заглушку с логотипом сайта формат jpg">
<meta property="og:description" content="{Описание материала. Если пусто ШАБЛОН: Заголовок H1 - Имя сайта}">
<meta property="og:site_name" content="Название домена или Компании и описание, чем занимается сайт">
<meta property="og:locale" content="{Язык. Пример: ru_RU, ru-UA, ru-KZ, ru-BY, ru-UZ, ru-TJ}" />
<meta property="article:published_time" content="{Дата размещения статьи. Формат: 2015-05-20T10:31:27+00:00}" />
<meta property="article:modified_time " content="{Дата изменения статьи. Формат: 2020-01-20T11:31:27+00:00}" />
<meta property="article:author" content="{Автор статьи, если пусто то: Название домена или Компании}" />
<meta property="article:section" content="{Категория}" />
<meta property="article:tag" content="{Тег статьи}" />
<meta name="referrer" content="origin-when-crossorigin">
<!-- twitter -->
<meta name="twitter:card" content="summary"/>
<meta name="twitter:site" content="{Название домена или Компании}"/>
<meta name="twitter:title" content="{Заголовок материала}">
<meta name="twitter:description" content="{Описание материала. Если пусто ШАБЛОН: Заголовок H1 - Имя Сайта}"/>
<meta name="twitter:creator" content="https://site.ru/"/>
<meta name="twitter:image:src" content="ссылка на фото материала. Если нет, вставить заглушку с логотипом сайта формат jpg"/>
<meta name="twitter:domain" content="https://site.ru/"/>
<meta name="content-language" content="{Язык. Пример: ru, ua, kz, by, uz, tj}" />
</head>
Разметка для поиска по сайту
<div itemscope itemtype="https://schema.org/WebSite">
<meta itemprop="url" content="%домен%"/>
<form itemprop="potentialAction" itemscope itemtype="https://schema.org/SearchAction">
<meta itemprop="target" content="%домен%/search.html?query={search_term_string}" />
<input itemprop="query-input" type="text" name="search_term_string" required />
<input type="submit" />
</form>
</div>Подробнее можно в справке тут: https://developers.google.com/search/docs/data-types/sitelinks-searchbox?hl=ru
Хлебные крошки
Сделать хлебные крошки и их микроразметку — ПОСЛЕДНЮЮ КРОШКУ, НЕ ДЕЛАТЬ ССЫЛКОЙ!
<nav>
<ul itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a href="url_ссылки" title="Основной раздел" itemprop="item">
<span itemprop="name">Основной раздел</span><meta itemprop="position" content="0">
</a>
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a href="url_ссылки" title="Подраздел уровня 1" itemprop="item"><span itemprop="name">Подраздел уровня 1</span><meta itemprop="position" content="1"></a>
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a href="url_ссылки" title="Подраздел уровня 2" itemprop="item"><span itemprop="name">Подраздел уровня 2</span><meta itemprop="position" content="2"></a>
</li>
</ul>
</nav>
Разметка меню навигации
Для меню в шапке
<div itemscope itemtype="http://schema.org/SiteNavigationElement">
<menu itemprop="about" itemscope itemtype="http://schema.org/ItemList">
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList"><a href="url" itemprop="url">Пункт 1</a><meta itemprop="name" content="Пункт_1" /></li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList"><a href="url" itemprop="url">Пункт_2<meta itemprop="name" content="Пункт_2" /></a></li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ItemList"><a href="url" itemprop="url">Пункт_3</a>
<meta itemprop="name" content="Пункт_3" />
<menu>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList"><a href="url" itemprop="url">Под_пункт_3_1<meta itemprop="name" content="Пункт_3_1" /></a></li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList"><a href="url" itemprop="url">Под_пункт_3_2<meta itemprop="name" content="Пункт_3_2" /></a></li>
</menu>
</li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList"><a href="url" itemprop="url">Пункт_4<meta itemprop="name" content="Пункт_4" /></a></li>
</menu>
</div>
Для меню в футере (другая верстка)
<menu itemscope itemtype="http://schema.org/SiteNavigationElement">
<li>
<a itemprop="url" href="ссылка">название_пункта_меню_1</a>
</li>
<li>
<a itemprop="url" href="ссылка">название_пункта_меню_2</a>
</li>
</menu>
Страница(ы) контактов
<div itemscope="" itemtype="http://schema.org/Organization" class=”DisplaNone”>
<meta itemprop="name" content="Название Юр.лица">
<meta itemprop="telephone" content="телефон">
<meta itemprop="email" content="ваш e-mail">
<meta itemprop="address" content="Ваш адрес">
<meta itemprop="logo" content="url к логу компании">
<meta itemprop="image" content="url к картинке офиса">
<meta itemprop="description" content="Описание страницы">
<meta itemprop="legalName" content="Название компании и чем занимается">
<link itemprop="url" href="url-страницы" content="url-страницы">
<meta itemprop="sameAs" content="ссылка на соц сеть">
<div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
<meta itemprop="worstRating" content="1"> <!-- Мин. значение -->
<meta itemprop="bestRating" content="5"/> <!-- Макс. Значение -->
<meta itemprop="ratingValue" content="5"> <!-- средняя оценка -->
<meta itemprop="ratingCount" content="1064"> <!-- общее количество голосов -->
</div>
</div>
Разметка футера сайта
<span itemscope itemtype="r" class=”DisplaNone”>
<meta itemprop="copyrightYear" content="%year%">
<meta itemprop="copyrightHolder" content="Название домена или Компании">
</span>
Разметка списка статьи блога (Blog) (список)
Для новостей заменить http://schema.org/Blog на http://schema.org/NewsArticle
<div itemscope itemtype="http://schema.org/Blog">
<h1 itemprop="description">{Название документа/раздела}</h1>
<article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting">
<h2 itemprop="headline">{название_статьи_N}</h2>
<meta itemprop="datePublished" content="{Дата публикации. Пример: 2020-01-14T07:20:10+03:00}" />
<img itemprop="articleSection" content="{название раздела}">
<img itemprop="image" src="{ссылка_на_фото_материала}">
<meta itemprop="description" content="{краткое_описание_статьи N}" />
<meta itemprop="author" content="{Автор статьи}" />
<div itemprop="publisher" itemscope itemtype="https://schema.org/Organization" class=”DisplaNone”>
<div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
<img itemprop="url image" src="ссылка_на_логотип" />
</div>
<meta itemprop="name" content="Название домена или Компании">
</div>
<meta itemprop="dateModified" content="{Дата изменения. Пример: 2020-01-14T07:20:10+03:00}">
<meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="{ссылка_на_статью}"/>
</article>
</div>
<!-- рецензия материала -->
<div itemscope="" itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Название_страницы">
<meta itemprop="description" content="description">
<link itemprop="url" href="url_страницы">
<div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
<meta itemprop="worstRating" content="1"> <!-- Мин. значение -->
<meta itemprop="bestRating" content="5"/> <!-- Макс. Значение -->
<meta itemprop="ratingValue" content="4.6"> <!-- средняя оценка. если пусто выводим 5 -->
<meta itemprop="ratingCount" content="8864"> <!-- общее количество голосов -->
</div>
<div itemprop="review" itemtype="http://schema.org/Review" itemscope="">
<div itemprop="author" itemtype="http://schema.org/Person" itemscope="">
<meta itemprop="name" content="Название домена или Компании">
<link itemprop="url" href="https://site.ru/">
</div>
</div>
</div>
Разметка конкретного материала: Статьи/Новости
Для новостей заменить http://schema.org/Article на http://schema.org/NewsArticle
<article itemscope itemtype="http://schema.org/Article">
<meta itemprop="headline" content="title" />
<h1 itemprop="name">{Заголовок документа}</h1>
<!-- Ссылка на статью -->
<meta itemprop="url" content="{Ссылка на статью}" />
<meta itemprop="description" content="{description}" />
<img itemprop="articleSection" content="{название раздела}">
<!-- Каноническая ссылка статьи -->
<meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="{Каноническая ссылка}" content="{Заголовок статьи}" />
<!-- Ссылка на превью статьи -->
<div itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
<img itemprop="url contentUrl" src="{Ссылка на превью}" alt="{Заголовок статьи}" />
</div>
<!-- Дата публикации и дата последнего изменения -->
<meta itemprop="datePublished" content="{Дата публикации. Пример: 2020-01-14T07:20:10+03:00}" />
<meta itemprop="dateModified" content="{Дата изменения. Пример: 2020-01-14T07:20:10+03:00}" />
<meta itemprop="inLanguage" content="ru-RU" /> <!-- язык текста на сайте -->
<!-- основной текст статьи -->
<div itemprop="articleBody">
{текст_материала в html}
</div>
<!-- Автор статьи -->
<div itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content=”{Автор статьи}”>
</div>
<!-- Контактная информация о сайте/организации -->
<div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
<div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
<img itemprop="url" src="{Ссылка на логотип}" alt="Название домена или Компании" />
<meta itemprop="width" content="200" />
<meta itemprop="height" content="200" />
</div>
<meta itemprop="name" content="Название домена или Компании" />
<meta itemprop="url" content="https://site.ru/" />
</div>
</article>
<!-- рецензия материала -->
<div itemscope="" itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Название_страницы">
<meta itemprop="description" content="description">
<link itemprop="url" href="url_страницы">
<div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
<meta itemprop="worstRating" content="1"> <!-- Мин. значение -->
<meta itemprop="bestRating" content="5"/> <!-- Макс. Значение -->
<meta itemprop="ratingValue" content="4.6"> <!-- средняя оценка. если пусто выводим 5 -->
<meta itemprop="ratingCount" content="8864"> <!-- общее количество голосов если нет выводим 10 -->
</div>
<div itemprop="review" itemtype="http://schema.org/Review" itemscope="">
<div itemprop="author" itemtype="http://schema.org/Person" itemscope="">
<meta itemprop="name" content="Название домена или Компании"> <!-- если нет автора -->
<link itemprop="url" href="https://site.ru/">
</div>
</div>
</div>
Микроразметки комментариев
<div itemprop="comment" itemscope itemtype="http://schema.org/UserComments">
<h2>Комментарии</h2>
<ul>
<li>
<div itemprop="creator" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">{Имя пользователя}</span>
</div>
<time itemprop="commentTime" datetime="{2020-01-14T07:20:10+03:00}">{2020-01-14}</time>
<p itemprop="commentText">{Текст комментария}</p>
</li>
<li>
<div itemprop="creator" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">{Имя другого пользователя}</span>
</div>
<time itemprop="commentTime" datetime="{2020-02-27T08:21:11+03:00}">{2020-02-27}</time>
<p itemprop="commentText">{Другой комментарий}</p>
</li>
</ul>
</div>
Микроразметка отзывов о сайте (если они есть)
<div itemprop="review" itemtype="http://schema.org/Review" itemscope="">
<div itemprop="author" itemtype="http://schema.org/Person" itemscope="">
<meta itemprop="name" content="{Имя_пользователя_или_ник}">
<link itemprop="url" href="ссылка_на_страницу_профиля_или_соц_сети_если_есть_если_нет_не_выводим">
<link itemprop="image" href="url_картинки_пользователя"> <!-- если есть -->
</div>
<meta itemprop="datePublished" content="2018-09-07"> <!-- дата_публикации -->
<span itemprop="reviewBody">Текст_отзыва</span>
<div itemprop="reviewRating" itemtype="http://schema.org/Rating" itemscope="">
<meta itemprop="worstRating" content="1"> <!-- Мин. значение -->
<meta itemprop="bestRating" content="5"/> <!-- Макс. Значение -->
<meta itemprop="ratingValue" content="5"> <!-- Оценка -->
</div>
<div itemprop="itemReviewed" itemscope itemtype="https://schema.org/Organization">
<meta itemprop="name" content="Название домена или Компании">
</div>
</div>
Разметка видео в контенте
<div itemscope itemtype="http://schema.org/VideoObject" >
<link itemprop="thumbnailUrl" href="ссылка_на_превью_фото_для_видео">
<h2 itemprop="name">{Заголовок видео}</h2>
<meta itemprop="description" content="{Описание видео}">
<meta itemprop="duration" content="PT6M58S"> <!-- указание в видео PT6 - цифра - это длительность 6 минут, М58S - цифры - длительность 58 секунд -->
<meta itemprop="isFamilyFriendly" content="true"> <!-- разрешено ли детям -->
<meta itemprop="uploadDate" content="2013-06-05T00:00:00"> <!-- формат публикации даты -->
<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject" class=”DisplayNone”>
<img itemprop="contentUrl" src="{https://www.mysite.com/images/preview/img1.jpg}"> <!-- ссылка на фото к видео -->
<!-- размеры -->
<meta itemprop="width" content="250">
<meta itemprop="height" content="120">
</span>
<span itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter">
<span itemprop="interactionType" itemscope itemtype="http://schema.org/WatchAction"></span>
<meta itemprop="userInteractionCount" content="102111" /> <!-- кол-во просмотров -->
</span>
</div>
Разметка мобильного приложения
<div itemscope itemtype="https://schema.org/SoftwareApplication">
<meta itemprop="name" content="{Название_Приложения} Android">
<meta itemprop="description" content="краткое_описание_приложения">
<meta itemprop="applicationCategory" content="GameApplication">
<meta itemprop="operatingSystem" content="ANDROID">
<meta itemprop="inLanguage" content="ru-RU"> <!-- язык приложения страны в которой живет пользователь -->
<meta itemprop="image" content="ссылка_на_фото_если_есть">
<link itemprop="url" href="ссылка_на_страницу_на_нашем_сайте">
<meta itemprop="softwareVersion" content="4.6.4r"> <!-- если известна, если нужна в разметки -->
<meta itemprop="fileSize" content="12,32 МБ"> <!-- если известен размер, если нужна в разметки -->
<div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
<meta itemprop="worstRating" content="1"> <!-- Мин. значение -->
<meta itemprop="bestRating" content="5"/> <!-- Макс. Значение -->
<meta itemprop="ratingValue" content="4.6"> <!-- средняя оценка -->
<meta itemprop="ratingCount" content="8864"> <!-- количество голосов -->
</div>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="url" content="ссылка_на_страницу_на_нашем_сайте">
<meta itemprop="category" content="free">
<meta itemprop="price" content="0">
<meta itemprop="priceCurrency" content="RUB">
</div>
<div itemprop="author" itemtype="http://schema.org/Person" itemscope="">
<meta itemprop="name" content="{Название_Организации}">
<link itemprop="url" href="ссылка_на_сайт">
<link itemprop="image" href="url_логотипа_организации"> <!-- если есть -->
</div>
</div>
FAQ: Часто задаваемые вопросы, вопрос/ответы
<div itemscope itemtype="https://schema.org/QAPage">
<div itemprop="mainEntity" itemscope itemtype="https://schema.org/Question">
<h2 itemprop="name">How many ounces are there in a pound?</h2>
<div itemprop="upvoteCount">52</div>
<div itemprop="text">I have taken up a new interest in baking and keep running across directions in ounces and pounds. I have to translate between them and was wondering how many ounces are in a pound?</div>
<div>
<div><span itemprop="answerCount">3</span> answers</div>
<div><span itemprop="upvoteCount">26</span> votes</div>
<div itemprop="acceptedAnswer" itemscope itemtype="https://schema.org/Answer">
<div itemprop="upvoteCount">1337</div>
<div itemprop="text">
1 pound (lb) is equal to 16 ounces (oz).
</div>
<a itemprop="url" href="https://example.com/question1#acceptedAnswer">Answer Link</a>
</div>
<div itemprop="suggestedAnswer" itemscope itemtype="https://schema.org/Answer">
<div itemprop="upvoteCount">42</div>
<div itemprop="text">
Are you looking for ounces or fluid ounces? If you are looking for fluid ounces there are 15.34 fluid ounces in a pound of water.
</div>
<a itemprop="url" href="https://example.com/question1#suggestedAnswer1">Answer Link</a>
</div>
<div itemprop="suggestedAnswer" itemscope itemtype="https://schema.org/Answer">
<div itemprop="upvoteCount">0</div>
<div itemprop="text">
I can't remember exactly, but I think 18 ounces in a lb. You might want to double check that.
</div>
<a itemprop="url" href="https://example.com/question1#suggestedAnswer2">Answer Link</a>
</div>
</div>
</div>
</div>
Подробнее в справке https://developers.google.com/search/docs/appearance/structured-data/qapage?hl=ru#микроданные
How-To (Инструкция)
<div itemscope itemtype="https://schema.org/HowTo">
<b><span itemprop="name">How to tie a tie</span></b>
<div>About <span itemprop="totalTime" content="PT2M">2 minutes</span></div>
<div itemprop="video" itemscope itemtype="https://schema.org/VideoObject">
<meta itemprop="name" content="Tie a Tie" />
<meta itemprop="description" content="How to tie a four-in-hand knot." />
<link itemprop="thumbnailUrl" content="https://example.com/photos/photo.jpg" />
<link itemprop="contentUrl" content="https://www.example.com/videos/123_600x400.mp4" />
<link itemprop="embedUrl" content="https://www.example.com/videoplayer?id=123" />
<meta itemprop="duration" content="P1MT10S" />
<meta itemprop="uploadDate" content="2019-01-05T08:00:00+08:00" />
<video>...</video>
</div>
<div>Necessary Items:</div>
<div itemprop="supply" itemtype="https://schema.org/HowToSupply">A tie</div>
<div itemprop="supply" itemtype="https://schema.org/HowToSupply">A collared Shirt</div>
<div itemprop="tool" itemtype="https://schema.org/HowToTool">A mirror</div>
<div>
<div itemprop="step" itemscope itemtype="https://schema.org/HowToStep">
<div itemprop="name">Preparations</div>
<div itemprop="text">Button your shirt how you'd like to wear it, then drape the tie around your neck. Make the thick end about 1/3rd longer than the short end. For formal button down shirts, it usually works best with the small end of the tie between 4th and 5th button.</div>
<div itemprop="image">https://example.com/1x1/photo1.jpg</div>
<meta itemprop="url" content="https://example.com/tie#step1" />
</div>
<div itemprop="step" itemscope itemtype="https://schema.org/HowToStep">
<div itemprop="name">Crossing once</div>
<div itemprop="text">Cross the long end over the short end. This will form the basis for your knot.</div>
<div itemprop="image">https://example.com/1x1/photo2.jpg</div>
<meta itemprop="url" content="https://example.com/tie#step2" />
</div>
<div itemprop="step" itemscope itemtype="https://schema.org/HowToStep">
<div itemprop="name">Second crossing</div>
<div itemprop="text">Bring the long end back under the short end, then throw it back over the top of the short end in the other direction.</div>
<div itemprop="image">https://example.com/1x1/photo3.jpg</div>
<meta itemprop="url" content="https://example.com/tie#step3" />
</div>
<div itemprop="step" itemscope itemtype="https://schema.org/HowToStep">
<div itemprop="name">Loop in</div>
<div itemprop="text">Now pull the long end through the loop near your neck, forming another loop near your neck.</div>
<div itemprop="image">https://example.com/1x1/photo4.jpg</div>
<meta itemprop="url" content="https://example.com/tie#step4" />
</div>
<div itemprop="step" itemscope itemtype="https://schema.org/HowToStep">
<div itemprop="name">Pull and tighten</div>
<div itemprop="text">Pull the long end through that new loop and tighten to fit!</div>
<div itemprop="image">https://example.com/1x1/photo5.jpg</div>
<meta itemprop="url" content="https://example.com/tie#step5" />
</div>
</div>
</div>
Подробнее в справке https://developers.google.com/search/docs/appearance/structured-data/how-to?hl=ru
SaleEvent (Распродажа/Бонус)
<div itemscope="" itemtype="http://schema.org/SaleEvent">
<meta itemprop="startDate" content="2020-05-05 08:00:00+03:00"> <!-- формат даты начала -->
<meta itemprop="endDate" content="2020-11-06 24:00:00+03:00"> <!-- формат даты конца если есть -->
<meta itemprop="name" content="🎁 {Название_Бонуса_или_сумма_бонуса}"> <!-- Пример скобок: 4 000 ₽ бонуса! -->
<meta itemprop="description" content="{Краткое_описание c description или шаблонный текст: h1 - Название сайта}">
<meta itemprop="eventAttendanceMode" content="https://schema.org/OnlineEventAttendanceMode">
<meta itemprop="eventStatus" content="https://schema.org/EventScheduled">
<meta itemprop="url" content="url_страницы">
<meta itemprop="image" content="url_картинки">
<meta itemprop="performer" content="Участник мероприятия">
<span itemscope="" itemtype="http://schema.org/Place" itemprop="location">
<meta itemprop="logo" content="лого_компании">
<meta itemprop="name" content="{Название_Документа}">
<span itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
<meta itemprop="url" content="url_страницы">
</span>
</span>
<span itemprop="offers" itemscope itemtype="https://schema.org/Offer">
<meta class="event-price" itemprop="price" content="4000"> <!-- размер бонуса -->
<meta itemprop="priceCurrency" content="RUB">
<meta itemprop="url" content="url_страницы">
<link itemprop="availability" href="https://schema.org/InStock"/>
<meta itemprop="validFrom" content="2020-05-05 08:00:00+03:00">
</span>
</div>Разметка в формате ld json для Google
Разметка Логотипа
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"url": "url-сайта",
"logo": "{Ссылка на логотип}"
}
</script>Разметка автора на странице
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Person",
"name": "Имя",
"additionalName": "Отчество (можно второе имя, ник)",
"jobTitle": "Должность",
"affiliation": "Организация, с которой связан человек",
"email": "Адрес email",
"telephone": "Контактный телефон",
"url": "URL персональной страницы или профиля на сайте",
"image": "URL фото",
"address": {
"@type": "PostalAddress",
"addressCountry": "Страна",
"addressRegion": "Регион (область)"
}
}
</script>Карусель Статей/Новостей
<script type="application/ld+json">
{
"@context":"https://schema.org",
"@type":"ItemList",
"itemListElement":[
{
"@type":"ListItem",
"position":1,
"url":"ссылка_на_документ_N",
"name":"Имя_документа_N",
"image": [
"https://example.com/photos/1x1/photo.jpg",
"https://example.com/photos/4x3/photo.jpg",
"https://example.com/photos/16x9/photo.jpg"
]
},
{
"@type":"ListItem",
"position":2,
“url":"ссылка_на_документ_N",
"name":"Имя_документа_N",
"image": [
"https://example.com/photos/1x1/photo.jpg",
"https://example.com/photos/4x3/photo.jpg",
"https://example.com/photos/16x9/photo.jpg"
]
}
]
}
</script>Разметка голосового поиска (Speakable)
Добавить документу доп поле, в котором можно будет написать информацию о чем этот текст.
Рекомендации поисковых систем: текст должен быть не больше 2-3 предложений, чтобы озвучка текста не занимал более 30 секунд. Подробнее о разметке можно почитать тут https://developers.google.com/search/docs/data-types/speakable?hl=ru
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "WebPage",
"name": "h1_документа",
"speakable":
{
"@type": "SpeakableSpecification",
"xpath": [
"/html/head/title",
"/html/head/meta[@name='description_page']/@content"
]
},
"url": "url_страницы"
}
</script>Для продвижения конкретного ресурса нужна была не вся микроразметка. Если что то не нашли, можно разметку структурированных данных, которая поддерживается в Google Поиске, можно посмотреть тут: https://developers.google.com/search/docs/appearance/structured-data/search-gallery?hl=ru
Со всеми свойствами и примерами схемы schema.org, можно ознакомиться на официальном сайте https://schema.org/ и собрать нужную самостоятельно при необходимости.
На этом все, спасибо за внимание.
Доброго времени суток. Необходимо сделать микроразметку страницы контактов согласно http://schema.org/LocalBusiness. На странице имеется таблица, в которой указан режим работы магазина в двух торговых точках с указанием их адреса и времени (ПН-ПТ 10 -17). На http://ruschema.org/LocalBusiness есть пример, как надо оформлять openingHours. Но, почему-то при использовании метатегов получается, что они выносятся за пределы таблицы, а после таблицы сразу же закрывается самый первый div (<div itemscope=»» itemtype=»http://schema.org/LocalBusiness»>), который является родительским для всех следующих за ним тегов. Выходит, что метатеги остаются без родительского div’а.
Написал тег time вместо meta: <time datetime=»Mo-Fr 10:00−19:00″ itemprop=»openingHours»>ПН-ПТ: 10-19</time>.
Всё хорошо, но филиала два, а не один, и время работы у них тоже разное, а получается, что для обоих филиалов время одинаковое. Какой тег нужно написать, чтобы у каждого филиала было своё время открытия?
Вот сам код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.
- Микроразметка хлебных крошек
- Пример разметки BreadcrumbList в microdata
- Пример разметки BreadcrumbList в JSON-LD
- Микроразметка организации
- Пример разметки Organization в microdata
- Пример разметки Organization в JSON-LD
- Пример разметки LocalBusiness в microdata
- Пример разметки LocalBusiness в JSON-LD
- Микроразметка статей
- Пример разметки Article в microdata
- Пример разметки Article в JSON-LD
- Поисковая строка
- Пример разметки в microdata
- Пример разметки в JSON-LD
- Структурированные данные для информационных сайтов
- FAQ: Часто задаваемые вопросы
- Пример разметки FAQpage в microdata
- Пример разметки FAQpage в JSON-LD
- Q&A: Вопросы и ответы
- Пример разметки QApage в microdata
- Пример разметки QApage в JSON-LD
- How-To: Инструкция
- Пример разметки HowTo в microdata
- Пример разметки HowTo в JSON-LD
- FAQ: Часто задаваемые вопросы
- Структурированные данные для интернет-магазинов
- Микроразметка Product для карточки товара
- Пример разметки Product-Offer в microdata
- Пример разметки Product-Offer в JSON-LD
- Микроразметка товарного предложения
- Пример разметки Product-AggregateOffer в microdata
- Пример разметки Product-AggregateOffer в JSON-LD
- Микроразметка отзывов
- Пример разметки Product с review в microdata
- Пример разметки Product с review в JSON-LD
- Микроразметка Product для карточки товара
- Другие виды микроразметки Schema.org
- Разметка образовательных курсов
- Разметка мероприятий
- Разметка рецептов
- Проверка микроразметки
Микроразметка Schema.org предусматривает выделение основных типов сущностей и их свойств с присвоением им определенных значений. Размечаются и передаются данные непосредственно в коде страницы с помощью микроданных, формата JSON-LD или RDFa.
Структурированные данные, размеченные согласно стандарту, извлекаются роботами и могут быть использованы в различных сервисах поисковых систем. Влияет ли микроразметка на позиции сайта? Официальный ответ поисковиков состоит в том, что влияния нет. Но используя разметку Schema.org, можно улучшить представление своего сайта в результатах выдачи и сделать сниппет более привлекательным и кликабельным.
Google рекомендует использовать формат JSON-LD. Однако данные, размеченные микроразметкой JSON-LD, используются только Яндекс.Почтой и пока не отображаются в результатах поиска Яндекса. Чтобы угодить всем поисковикам, выбирайте микроданные в тех форматах, что поддерживаются обеими системами.
Не все описанные в Schema.org схемы разметки задействованы на поиске. В разделах помощи Яндекса и в Google указано, какие типы структурированных данных в настоящий момент используются в формировании расширенных сниппетов — значительно меньше, чем описано словарем Схема.орг, но постепенно их число увеличивается.
Разберем примеры тех схем, которые чаще всего используются на сайтах. Вы поймете как сделать микроразметку и проверить ее в Гугл и Яндекс.
Микроразметка Schema.org делает ваши данные доступными не только для поисковиков, но и для любых сервисов, использующих данный стандарт в своей работе.
Микроразметка хлебных крошек
Хлебные крошки представляют собой дополнительные цепочки навигации, содержащие путь от главной страницы сайта до текущей. Внедрять их рекомендуем в любом случае — дублирующая навигация полезна и пользователям, и поисковикам. А семантическая разметка крошек позволяет получить красивые сниппеты Google для не-главных страниц:
.png "Микроразметка время работы организации")
В Яндексе микроразметка данного типа пока не поддерживается официально, но поисковик сам формирует цепочки для некоторых сайтов. Они, как и быстрые ссылки, основываются на внутренней структуре сайта:
.png "Микроразметка время работы организации")
Чтобы сделать разметку хлебных крошек, используется схема https://schema.org/BreadcrumbList.
Пример разметки BreadcrumbList в microdata
<ul class="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a target="_blank" href="/" itemprop="item">
<span itemprop="name">Металлопром</span></a>
<meta itemprop="position" content="1" /></li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" >
<a target="_blank" href="/services/" itemprop="item">
<span itemprop="name">Услуги</span></a>
<meta itemprop="position" content="2" /></li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" >
<a target="_blank" href="/services/metalloobrabotka/" itemprop="item">
<span itemprop="name">Металлобработка</span></a>
<meta itemprop="position" content="3" /></li>
</ul> Пример разметки BreadcrumbList в JSON-LD
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement":
[
{"@type": "ListItem",
"position": 1,
"item":
{"@id": "https://mmetalloprom.ru/",
"name": "Металлопром"}
},
{"@type": "ListItem",
"position": 2,
"item":
{"@id": "https://mmetalloprom.ru/services/",
"name": "Услуги"}
},
{"@type": "ListItem",
"position": 3,
"item":
{"@id": "https://mmetalloprom.ru/services/metalloobrabotka/",
"name": "Металлообработка"}
}
]
}
</script>Микроразметка организации
Разметка адреса организации может отображаться на Яндекс.Картах и в Поиске Яндекса в виде адресного сниппета:
Такой же сниппет может сформировать регистрация в Яндекс.Справочнике. Если вы еще не разместили в этом сервисе информацию о своей компании, быстрый способ получить расширенный адресный сниппет — использовать разметку 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 предназначена для статей, публикуемых на сайте. На десктопе к сниппету добавится дата публикации:
.png "Микроразметка время работы организации")
На мобильных устройствах еще и картинка:
.png "Микроразметка время работы организации")
Причем картинка может быть как той, что вы указали в разметке в качестве картинки для анонса статьи, так и любой другой со страницы. Google сам определит, какую картинку лучше показать в расширенном сниппете. Их может быть и несколько:
.png "Микроразметка время работы организации")
Пример разметки 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 конкретного сайта. Она помогает сразу уточнить запрос к сайту и получить нужный результат.
.png "Микроразметка время работы организации")
Особенностью данной микроразметки на практике является и то, что ее добавление вовсе на гарантирует появления поиска в сниппете вашего сайта. И наоборот, для крупных популярных сайтов 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 заметна в расширенных результатах поиска, прежде всего, на мобильных устройствах:
.png "Микроразметка время работы организации")
На десктопах сниппет меняется незначительно, но тем не менее:
.png "Микроразметка время работы организации")
Если на странице может быть несколько вопросов, то используйте схему разметки 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-разметка улучшит представление в результатах поиска страниц с пошаговыми инструкциями. Каждый шаг может содержать поясняющие фото и видеоматериалы или же просто текст.
.png "Микроразметка время работы организации")
.png "Микроразметка время работы организации")
Как и в случае 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).
.png "Микроразметка время работы организации")
В Яндексе микроразметка Product тоже работает, хотя по сравнению со сниппетом по программе Товары и цены, выглядит менее заметно:
.png "Микроразметка время работы организации")
Пример разметки 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 обязательно содержит в себе минимальную и максимальную цену на товар, которые выводятся в поисковом сниппете:
.png "Микроразметка время работы организации")
.png "Микроразметка время работы организации")
Пример разметки 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. В этом случае рейтинг товара отобразится в сниппете страницы:
.png "Микроразметка время работы организации")
Для этого обращайтесь к уже приведенному примеру разметки 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>
Приведем еще несколько схем разметки для специфичного контента, который часто можно встретить в выдаче.
Разметка образовательных курсов
Подходит для разметки учебных курсов и образовательных программ, состоящих из нескольких модулей (уроков). Разовые образовательные события, такие как, например, 2-часовая лекция, относятся к мероприятиям.
В разметке надо четко указывать названия учебных заведений и материалов курсов, нельзя использовать цены, скидки и призывы к покупке.
.png "Микроразметка время работы организации")
Расширенный сниппет формируется для страницы со всем курсами, тогда как разметка делается на странице каждого курса отдельно.
Для разметки используйте схему https://schema.org/Course. Узнать больше о разметке курсов в материалах Google.
Разметка мероприятий
Эта разметка привлечет внимание к вашим мероприятиям в поиске и на Google-картах.
.png "Микроразметка время работы организации")
Ее можно использовать не только для концертов, но и для любых ивентов: выставок, акций компании с четкими временными ограничениями и т.д.
.png "Микроразметка время работы организации")
Для разметки используйте схему https://schema.org/Event. Узнать больше о разметке мероприятий в материалах Google.
Разметка рецептов
Разметка кулинарных рецептов участвует в формировании специальных снипетов и в Яндексе, и в Гугле.
Разметку можно увидеть в результатах поиска.
.png "Микроразметка время работы организации")
.png "Микроразметка время работы организации")
В Google также можно увидеть специальную карусель из рецептов при некоторых запросах.
.png "Микроразметка время работы организации")
А в Яндексе — попасть в расширенный сниппет справа от основного поиска.
.png "Микроразметка время работы организации")
Для разметки используйте схему https://schema.org/Recipe. Узнать больше о разметке рецептов в материалах Google и Яндекс.
Проверка микроразметки
На этапе внедрения пользуйтесь специальными сервисами для проверки структурированных данных.
У Яндекса такой функционал представлен в инструменте Вебмастер. Авторизуйтесь в сервисе и пройдите по ссылке Инструменты — Валидатор микроразметки. Проверить микрозметку можно по URLу страницы или фрагменту HTML-кода.
.png "Микроразметка время работы организации")
В Google проверка микроразметки доступна в https://search.google.com/structured-data/testing-tool/u/0/ с похожими возможностями. Но тут интерфейс чуть более удобен — в нем для любого исходного варианта предусмотрена возможность отладки и мгновенной проверки внесенных в разметку изменений.
.png "Микроразметка время работы организации")
Здесь есть 2 типа замечаний: собственно ошибки (выделяются красным), которые мешают интерпретации разметки, и предупреждения (выделяются оранжевым), которые допустимы, но говорят о том, что данные в разметке неполные.
Недавно Google представил еще один онлайн-инструмент, чтобы проверить расширенные сниппеты и узнать может ли ваша разметка быть показана в результатах поиска https://search.google.com/test/rich-results?hl=ru. Необходимо указать URL страницы или фрагмент проверяемого кода и выбрать основного робота (в большинстве случаев это Googlebot для смартфонов).
.png "Микроразметка время работы организации")
Вместо заключения
Как видите, получить красивый сниппет, привлекающий внимание, совсем не сложно! Достаточно один раз разобраться в Schema.org, используя наши подсказки и примеры, и вы сможете самостоятельно структурировать данные на своем сайте.