Микроразметка Schema.org: синтаксис и готовые примеры кода

Рассказывает
Дмитрий Лашманов Ведущий SEO-специалист 5 лет опыта

Чтобы сайт приносил трафик и конвертировал его в продажи, нужно не просто вывести его в топ-10 поисковых систем, но и привлечь внимание пользователей и замотивировать их перейти именно на ваш сайт. Для этого необходимо сделать привлекательный сниппет и работать над CTR.

Улучшить сниппет и увеличить показатель CTR можно с помощью микроразмекти Schema.org.

Что такое микроразметка?
Что такое микроразметка Schema.org
Какой контент размечают микроразметкой Schema.org
Синтаксис микроразметки Schema.org
Микроразметка товаров Product
Микроразметка рейтинга и отзывов
Микроразметка вопросов и ответов
Микроразметка инструкций HowTo
Микроразметка "хлебных крошек"
Микроразметка контактов
Как проверить микроразметку

Что такое микроразметка?

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

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

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

Что можно подтянуть в сниппет:

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

Улучшение сниппетов таким образом позволит увеличить CTR, что в свою очередь приведет к росту трафика и увеличению заявок и продаж.

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

Есть автоматизированные сервисы для генерации микроразметки, например: https://webcode.tools/generators/structured-data

Что такое микроразметка Schema.org

Schema.org – это единая схема микроразметки данных, которая была разработана совместно компаниями Google, Yahoo! и Microsoft. Позже к разработке данной схемы присоединилась компания Яндекс.

Микроразметка Schema.org была создана для улучшения поисковой выдачи и для помощи веб-мастерам и разработчикам в продвижении веб-сайтов.

Микроразметка Schema.org позволяет структурировать контент на страницах сайта, улучшать индексацию контента и формировать информативные и привлекательные сниппеты в поисковой выдаче.

Какой контент размечают микроразметкой Schema.org

Микроразметкой Schema.org чаще всего размечают следующие элементы:

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

Более подробно с типами контента, который можно разметить микроразметкой Schema.org вы можете ознакомится в документации.

Разберем подробнее наиболее распространенные типы раметки данных.

Синтаксис микроразметки Schema.org

Микроразметка Schema.org может передаваться в 3 форматах структурированных данных:

JSON-LD,
Microdata,
RDFa.

Формат JSON-LD хорошо воспринимается поисковой системой Google, но не поддерживается Янедксом. Если вы отдаете приоритет поисковой системе Google, рекоменудем использовать формат JSON-LD. Для генерации микроразметки в данном формате можно использовать онлайн-генераторы, а код микроразметки можно добавить в header страницы, что значительно упрощает задачу по внедрению микроразметки.

Если вы хотите улучшить сниппеты в поисковой системе Яндекс, рекомендуем использовать формат Microdata.

Синтаксис микроразметки Sсhema.org довольно состоит из нескольких атрибутов:

указывает область действия словаря микроразметки. С помощью атрибута, поисковые роботы определяют, что на странице находится описание определенного объекта. Атрибут используется вместе с атрибутом;
указывает адрес словаря микроразметки, который задействован в разметке соответствующего элемента. Ссылка будет вести на соответствующую папку на домене schema.org.
определяет свойство выбранного элемента.

В разметке данных в html-коде используются следующие теги:

<div> – тег контейнеров для структурирования разделов документа и упорядочивания данных в коде;
<span> — строчный контейнер;
<link> – элемент для указания ссылки;
<time> – тег для разметки даты и времени;
<a> – тег для обозначения ссылок;
<meta> — для хранения дополнительной информации.

Микроразметка товаров Product

Для разметки товаров в интернет-магазинах используется микроарзметка Product. Данная разметка позволяет разметить следующие элементы:

название товара,
описание товара,
фото,
стоимость,
бренд,
модель.

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

<script type="application/ld+json">
{
	"@context": "https://schema.org/",
	"@type": "Product",
	"name": "Название товара",
	"image": "",
	"description": "Описание товара",
	"brand": {
		"@type": "Brand",
		"name": "Название бренда"
	},
	"offers": {
		"@type": "Offer",
		"priceCurrency": "USD",
		"price": "10000",
		"availability": "https://schema.org/InStock",
		"itemCondition": "https://schema.org/NewCondition"
	}
}
</script>

Микроразметка рейтинга и отзывов

Для разметки рейтинга используется микроразметка https://schema.org/Rating (для разметки рейтинга товаров или услуг https://schema.org/AggregateRating).

Для разметки отзывов используется микроразметка https://schema.org/Review.

Данными типами микроразметки можно разметить следующие элементы:

рейтинг-звездочки,
количество оценок,
среднюю оценку,
количество отзывов,
автора отзыва,
текст отзыва,
дату публикации отзыва.

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

Пример кода микроразметки:

<script type="application/ld+json">
{
	"@context": "https://schema.org/",
	"@type": "Product",
	"name": "",
	"image": "",
	"aggregateRating": {
		"@type": "AggregateRating",
		"ratingValue" : "5",
		"ratingCount" : "20",
		"reviewCount" : "8",
		"worstRating" : "4",
		"bestRating" : "5"
	},
	"review": [
		{
			"@type": "Review",
			"author": {
				"@type": "Person",
				"name": ""
			},
			"reviewBody" : ""
		}
	]
}
</script>

Микроразметка вопросов и ответов

Вопросы и ответы размечаются микроразметкой https://schema.org/FAQPage. Данная микроразметка позволяет вывести в сниппет дополнительный блок с ответами на вопросы, а также повышает вероятность попасть в блок с быстрыми ответами и похожими запросами.

<script type="application/ld+json">
{
	"@context": "https://schema.org/",
	"@type": "FAQPage",
	"mainEntity": [
		{
			"@type": "Question",
			"name": "Вопрос",
			"acceptedAnswer": {
				"@type": "Answer",
				"text": "Ответ"
			}
		}
	]
}
</script>

Микроразметка инструкций HowTo

Микроразметка https://schema.org/HowTo используется для разметки пошаговых инструкций. Микроразметка HowTo позволяет вывести в сниппет шаги из интрукции в виде раскрывающихся списоков.

Такая микроразметка делает сниппет более привлекательным и информативным.

Пример кода микроразметки HowTo в JSON:

<script type="application/ld+json">
{
	"@context": "https://schema.org/",
	"@type": "HowTo",
	"name": "Название",
	"description": "Описание",
	"step": [
		{
			"@type": "HowToStep",
			"name": "Шаг 1",
			"text": "Описание шага",
			"image": "",
			"url": ""
		},
		{
			"@type": "HowToStep",
			"name": "Шаг 2",
			"text": "Описание шага",
			"image": "",
			"url": ""
		}
	]
}
</script>

Микроразметка "хлебных крошек"

Элементы навигационной цепочки "хлебные крошки" размечаются микроразметкой https://schema.org/BreadcrumbList.

Микроразметка "хлебных крошек" позволяет вывести в сниппет ссылки из навигационной цепочки. Наличие ссылок делает сниппет более информативным и аккуратным, что может положительно повлиять на CTR.

Пример кода микроразметки хлебных крошек в html:

<ul>
<li>
   <a href="/" title="Главная страница" >
      <span >Главная страница</span>
      <meta  content="0">
   </a>
</li>
<li>
   <a href="/page-1/" title="Название страницы 1" >
      <span >Название раздела</span>
      <meta  content="1">
   </a>
</li><
<li>
   <a href="/page-1/page-2/" title="Название страницы 2" >
      <span >Название категории</span>
      <meta  content="2">
   </a>
</li>
</ul>

Пример кода микроразметки контактов в JSON:

<script type="application/ld+json">
{
	"@context": "https://schema.org",
	"@type": "BreadcrumbList",
	"itemListElement": [{
			"@type": "ListItem",
			"position": 1,
			"name": "Главная страница",
			"item": "https://site.ru/"},{
			"@type": "ListItem",
			"position": 2,
			"name": "Страница раздела каталога",
			"item": "https://site.ru/catalog/"},{
			"@type": "ListItem",
			"position": 3,
			"name": "Страница товара",
			"item": "https://site.ru/catalog/product/"}]}
</script>

Микроразметка контактов

Для разметки контактной информации используется микроразметка https://schema.org/Organization. Микроразметкой контактов можно разметить следующие элементы:

почтовый адрес,
юридический адрес,
номер телефона,
номер факса,
режим работы,
e-mail,
логотип компании,
реквизиты (ИНН),
название компании или бренда,
оценку на основе рейтинга и отзывов о компании.

С помощью данной микроразметки можно вывести в сниппет контактные данные компании.

Пример кода микроразметки контактов в html:

<div>
       <div>SEO-Notes</div>
       <link  href="https://seo-notes.ru/">
       <div>
              <span >603000</span>,
              <span Россия</span>, 
              <span >Нижегородская область</span>, 
              <span >Нижний Новгород</span>, 
              <span >ул. Минина, д. 1</span>
       </div>
       <div>Телефон: <a  href="tel:+7900000-00-00">+7 (900) 000-00-00</a></div>
       <div>Почта: <a  href="mailto:email@email.ru">email@email.ru</a></div>
</div>
</div>

Пример кода микроразметки контактов в JSON:

<script type="application/ld+json">
{
	"@context": "https://schema.org",
	"@type": "Organization",
	"url": "https://site.ru/",
	"contactPoint": [{
			"@type": "ContactPoint",
			"telephone": "+7(900)000-00-00",
			"contactType": "Контактный номер"}],
	"logo": "https: //site.ru/img/"}

Как проверить микроразметку

После составления кода микроразметки необходимо проверить код через валидаторы микроразметки:

Проверка микроразметки в Google – https://validator.schema.org/

Проверка микроразметки в Яндексе – https://webmaster.yandex.ru/tools/microtest/

Рекомендуем проверять микроразметку как до публикации, скопировав код микроразметки в инструменты для проверки, так и после публикации, добавил в валидаторы ссылки на проверямые страницы.

Проверять микроразметку необходимо и для Яндкса, и для Google, так как поисковые системы могут по разному читать код.

Заключение

Микроразметка позволяет улучшить сниппеты страниц в поисковой выдаче. Дополнительные элементы в сниппете могут привлечь внимание пользователей и положительно повлиять на CTR.

Информативные сниппеты вызвают больше доверия у пользователей.

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

В таком случае микроразметка будет работать наиболее эффективно и привлечет на ваш сайт больше трафика.