Мы используем cookie-файлы
Мы используем файлы cookie для обеспечения правильной работы нашего сайта, чтобы сделать нашу коммуникацию еще лучше! Используя сайт без изменения настроек, вы даете согласие на использование ваших cookie-файлов.
Принять
Настройки
Мы используем cookie-файлы
Настройки
Мы используем cookie-файлы
Мы используем файлы cookie для того, чтобы предоставить Вам больше возможностей при использовании сайта.

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

Приводим готовые примеры микроразметки Schema.org для улучшения сниппетов в поисковой выдаче.

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

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

Также микроразметка данных помогает поисковым роботам лучше распознавать контент на страницах сайта.

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

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

  • Навигационную цепочку
  • Рейтинг и количество голосов
  • Количество отзывов
  • Цены на товары и услуги
  • Фото товаров
  • Номер телефона и режим работы
и т.д.

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

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

Есть автоматизированные сервисы для генерации микроразметки, например:

https://webcode.tools/generators/schema-markup

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

Что такое Schema.org

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

Целью данной инициативы было улучшение поисковой выдачи и помощь в работе веб-мастеров и разработчиков.

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

  • html-разметка
  • JSON-LD

Google рекомендует использовать формат JSON-LD. Однако поисковая система Яндекс не поддерживает данный формат. В связи с этим рекомендуем придерживаться такому формату, который подойдет всем поисковикам. 

Примеры кода микроразметки Schema.org

Микроразметка контактов html
https://schema.org/Organization

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

Подробнее о микроразметке контактов мы рассказали в статье.
<div itemscope itemtype="https://schema.org/Organization">
	<span itemprop="name">site.ru</span> 
             <meta itemprop="image" content="/img/logo.png">
	<div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
	     <span itemprop="streetAddress">адрес</span>
	</div>
	    Телефон: <span itemprop="telephone">+7 (499) 000-00-00</span>,
	    E-mail: <span itemprop="email">e-mail</span>
            Время работы: <span itemprop="department"> с 9:00 до 22:00 </span>
</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/"}

Микроразметка хлебных крошек html
https://schema.org/BreadcrumbList

Микроразметка хлебных крошек позволит вывести в сниппет ссылки из навигационной цепочки хлебные крошки. Это позволит увеличить привлекательность сниппета и сделать его более информативным.
<ul itemscope itemtype="https://schema.org/BreadcrumbList">
 
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
   <a href="/" title="Главная страница" itemprop="item">
      <span itemprop="name">Главная страница</span>
      <meta itemprop="position" content="0">
   </a>
</li>
 
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
   <a href="/page-1/" title="Название страницы 1" itemprop="item">
      <span itemprop="name"> Смартфоны </span>
      <meta itemprop="position" content="1">
   </a>
</li><
 
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
   <a href="/page-1/page-2/" title="Название страницы 2" itemprop="item">
      <span itemprop="name">Название страницы 2</span>
      <meta itemprop="position" 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>
Пример сниппета с микроразметкой хлебных крошек и продукции
Микроразметка товаров html
https://schema.org/Product

Микроразметка товаров Product позволит вывести в сниппет название товара, стоимость, описание, статус о наличии товара.
Это сделает сниппет более привлекательным, что в свою очередь повысит CTR и приведет к росту поискового трафика.
<div itemscope itemtype="https://schema.org/Product"> 
 
   <h1 itemprop="name">Название товара</h1>
   <span itemprop="description">Описание товара</span> 
   <img src="URL изображения" itemprop="image"> 
 
<div itemprop="offers" itemscope="" itemtype="https://schema.org/Offer"> 
   
   <span itemprop="price">Стоимость</span> 
   <span itemprop="priceCurrency">RUB</span> 
   <div>Статус о наличии товара</div>

</div>
</div>
Сниппет страницы, размеченной микроразметкой Schema.org
Сниппеты страниц, размеченных микроразметкой Schema.org
Пример микроразметки товаров и рейтинга
Микроразметка HowTo
https://schema.org/HowTo

Микроразметка HowTo позволяет разместить контент, который отвечает на вопросы со словом "Как". Например, "Как разметить контент на сайте микроразметкой HowTo.
Микроразметкой HowTo размечают пошаговые инструкции. В сниппет выводится количество шагов, первые 3 шага инструкции, и описания шагов в виде выпадающих списком (в мобильной выдаче).

<div itemscope itemtype="http://schema.org/HowTo"> 

   <span itemprop="name">Заголовок статьи</span> 
   <span itemprop="description">Краткое описание статьи</span> 
</div>

<div itemprop="step" itemscope itemtype="http://schema.org/HowToSection">
   <div itemprop="name">Шаг 1. Подготовьте контент</div>
   <meta itemprop="position" content="1"/>
<div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToStep">
   <meta itemprop="position" content="1"/>
 <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToDirection">
   <meta itemprop="position" content="1"/>

<div itemprop="text">Создайте пошаговую инструкцию, которая подробно будет отвечать на вопросы пользователей.</div>

</div>
</div>
</div>

<div itemprop="step" itemscope itemtype="http://schema.org/HowToSection">
   <div itemprop="name">Шаг 2. Ознакомьтесь с атрибутами микроразметки</div>
   <meta itemprop="position" content="2"/>
<div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToStep">
   <meta itemprop="position" content="2"/>
 <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToDirection">
   <meta itemprop="position" content="2"/>

<div itemprop="text">Ниже приведен пример кода микроразметки и атрибуты, необходимые для разметки данных.</div>

</div>
</div>
</div>

<div itemprop="step" itemscope itemtype="http://schema.org/HowToSection">
   <div itemprop="name">Шаг 3. Добавьте микроразметку к контенту</div>
   <meta itemprop="position" content="3"/>
<div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToStep">
   <meta itemprop="position" content="3"/>
 <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToDirection">
   <meta itemprop="position" content="3"/>

<div itemprop="text">По аналогии с примером ниже, разметьте подготовленный контент соответствующими атрибутами.</div>

</div>
</div>
</div>

<div itemprop="step" itemscope itemtype="http://schema.org/HowToSection">
   <div itemprop="name">Шаг 4. Проверьте код микроразметки на наличие ошибок</div>
   <meta itemprop="position" content="4"/>
<div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToStep">
   <meta itemprop="position" content="4"/>
 <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToDirection">
   <meta itemprop="position" content="4"/>

<div itemprop="text">Проверьте код микроразметки с помощью валидатора https://validator.schema.org/.</div>

</div>
</div>
</div>
Пример сниппета страницы, размеченной микроразметкой HowTo
Микроразметка вопросов и ответов html
https://schema.org/FAQPage

Микроразметка вопросов и ответов FAQPage позволяет вывести вопросы и ответы в сниппет в виде раскрывабщихся списков.
<div itemscope itemtype="https://schema.org/FAQPage">;
   <div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">;
      <span itemprop="name">Вопрос</span>
   <div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">;
      <div itemprop="text">Ответ на вопрос</div>
   </div>
   </div>
</div>
Микроразметка отзывов и рейтинга html
https://schema.org/Review
https://schema.org/Rating

Микроразметка отзывов и рейтинга позволяет вывести в сниппет рейтинг звездочки с количеством оценок, средней оценкой и количество отзывов.
<div itemscope itemtype="https://schema.org/Review">
   <meta itemprop="datePublished" content="Дата публикации"/>
   <h2 itemprop="name">
   <link itemprop="url" href="Ссылка на страницу отзыва">
   </h2>
<div itemprop="reviewBody">
   <p>Текст отзыва</p>
</div>

<div>
   <span itemprop="author" itemscope itemtype="https://schema.org/Person">
      <p itemprop="familyName">Фамилия</p>         
      <p itemprop="name">Имя</p>   
      <p itemprop="additionalName">Отчество</p>
   </span>
</div>

<div itemprop="itemReviewed" itemscope itemtype="https://schema.org/Organization">
   <meta itemprop="name" content="Название компании о которой оставлен отзыв">
   <meta itemprop="telephone" content="номер телефона">
   <link itemprop="url" href="Ссылка на сайт"/>
   <meta itemprop="email" content="e-mail">
   <p itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
      <meta itemprop="addressLocality" content="город">
      <meta itemprop="streetAddress" content="адрес">
   </p>
</div>

<div itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating">
   <meta itemprop="worstRating" content="1">
   <meta itemprop="ratingValue" content="3">
   <meta itemprop="bestRating" content="5"/>
</div>

</div>
Микроразметка статей в html
<div itemscope=""itemtype="http://schema.org/Article">
   <span itemprop="name">Оптимизация изображений для сайта</span>
   <span itemprop="description">Рассказываем, как оптимизировать изображения на сайте и для чего необходима оптимизация картинок</span>
   <span itemprop="author">Дмитрий</span>
   <link itemprop="url" href="https://seo-notes.ru/optimizaciya-izobrazheniy-dlya-saita/">
   <meta itemprop="datePublished" content="2022-08-12">
<div itemprop="articleBody">
Данные фрагменты кода приведены в качестве примера. Для каждого сайта рекомендуем прописывать код микроразметки индивидуально, с учетом особенности CMS системы и движка сайта.

Перед размещением кода микроразметки на сайте рекомендуем проверять код на валидность с помощью инструментов https://validator.schema.org/ и https://webmaster.yandex.ru/tools/microtest/.
Пожалуйста, оцените статью
Читайте далее
Автор статьи
Дмитрий Лашманов
SEO-специалист
Опыт работы в SEO 4 года
60+ реализованных проектов

Дополнительные курсы:

SEO в СНГ - Rush Academy
SEO на запад - Rush Academy
UX/UI-дизайн - Skillbox
Школа экспертов Нетологии