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

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

Структурированные данные, размеченные согласно стандарту, извлекаются роботами и могут быть использованы в различных сервисах поисковых систем. Влияет ли микроразметка на позиции сайта? Официальный ответ поисковиков состоит в том, что влияния нет. Но используя разметку Schema.org, можно улучшить представление своего сайта в результатах выдачи и сделать сниппет более привлекательным и кликабельным.

Не все описанные в Schema.org схемы разметки задействованы на поиске. В разделах помощи Яндекса и в Google указано, какие типы структурированных данных в настоящий момент используются в формировании расширенных сниппетов — значительно меньше, чем описано словарем Схема.орг, но постепенно их число увеличивается.

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

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

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

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

<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>   

<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 для данных о компаниях с привязкой к конкретному месту работы: салоны красоты, пекарни и т.п.

<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>

<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 использовалась в поиске Google для отображения данных о компании в блоке знаний. Теперь эта разметка больше не поддерживается, а данные добавляются автоматически.

Разметка LocalBusiness позволяет передать данные о компании в Google Maps, включая информацию о филиалах. Эти данные поступают в сеть знаний наравне с другими источниками.

<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>

<script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "LocalBusiness",
    "additionalType": "AutoRental",
    "address": {
      "@type": "PostalAddress",
      "addressLocality": "Москва",
      "streetAddress": "ул. Илимская, дом 1 Б"
    },
    "name": "Абсолют Корона",
    "email": "mail@absolutecrown.ru",
    "openingHours": [
      "Mo-Fr 10:00-21:00",
      "Sa-Su 10:00-18:00"
    ],
    "priceRange": "1100-4700RUB",
    "telephone": ["8 (495) 783-70-83", "8 (916) 783-03-03"],
    "image": "/images/logo-square.png",
    "url": "https://www.absolutecrown.ru",
    "geo": {
      "@type": "GeoCoordinates",
      "latitude": "55.88923006884247",
      "longitude": "37.57312349999997"
    }
  }
</script>

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

На мобильных устройствах еще и картинка:

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

<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>

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

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

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

<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>

<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 нельзя использовать для рекламы, зато Google поддерживает HTML-разметку внутри ответов, а значит внутри информационного контента можно разместить ссылки на другие страницы.

<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>

<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>

Для открытых вопросов, ответы на которые может оставлять любой пользователь, т.е. ответов может быть несколько, используется другой тип разметки — Вопросы и ответы (Q&A).

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

По рекомендациям Google, желательно формировать собственный URL для каждого ответа, чтобы облегчить навигацию для пользователей. Сделать это можно, например, добаляя хэш с идентификатором ответа к адресу страницы с вопросом. Такие адреса вы сможете отслеживать и в системах статистики.

Микроразметка QApage заметна в расширенных результатах поиска, прежде всего, на мобильных устройствах:

На десктопах сниппет меняется незначительно, но тем не менее:

Если на странице может быть несколько вопросов, то используйте схему разметки FAQ.

<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>

 <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>

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

Как и в случае Q&A-схемы, желательно разметить каждый шаг инструкции с собственными урлами с хешем. Пользователь, кликнув по определенному шагу, сможет попасть сразу на соответствующее место в вашей статье.

Разметка работает только на мобильных устройствах и должна соответствовать требованиям Google:

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

Формат HowTo не применим для микроразметки кулинарных рецептов, для них существует отдельный тип структурированных данных Рецепты.

<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>

<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>

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

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

В Яндексе микроразметка Product тоже работает, хотя по сравнению со сниппетом по программе Товары и цены, выглядит менее заметно:

<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>

<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 обязательно содержит в себе минимальную и максимальную цену на товар, которые выводятся в поисковом сниппете:

<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>

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Product",
  "image": "dell-30in-lcd.jpg",
  "name": "Dell UltraSharp 30\"Монитор LCD" ,
  "description": "Dell UltraSharp 30 с поддержкой технологии 
  Premier Color — UP3017.",
  "brand": "DELL",
  "aggregateRating": {
    "@type": "AggregateRating",
    "bestRating": "10",
    "ratingCount": "5",
    "ratingValue": "8.2"
  },
  "offers": {
    "@type": "AggregateOffer",
    "highPrice": "32000",
    "lowPrice": "22000",
    "priceCurrency": "RUB",
    "offerCount": "2",
    "offers": [
      {
        "@type": "Offer",
        "url": "save-a-lot-monitors.com/dell-30.html"
      },
      {
        "@type": "Offer",
        "url": "jondoe-gadgets.com/dell-30.html"
      }
    ]
  }
}
</script>

Если вы публикуете отзывы покупателей и клиентов на страницах товаров и услуг, то можно встроить их в разметку товара с помощью свойства review. В этом случае рейтинг товара отобразится в сниппете страницы:

Для этого обращайтесь к уже приведенному примеру разметки Product и добавляйте соответствующую разметку для отзывов https://schema.org/Review.

<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>      

<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-часовая лекция, относятся к мероприятиям.

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

Расширенный сниппет формируется для страницы со всем курсами, тогда как разметка делается на странице каждого курса отдельно.

Для разметки используйте схему https://schema.org/Course. Узнать больше о разметке курсов в материалах Google.

Эта разметка привлечет внимание к вашим мероприятиям в поиске и на Google-картах.

Ее можно использовать не только для концертов, но и для любых ивентов: выставок, акций компании с четкими временными ограничениями и т.д.

Для разметки используйте схему https://schema.org/Event. Узнать больше о разметке мероприятий в материалах Google.

Разметка кулинарных рецептов участвует в формировании специальных снипетов и в Яндексе, и в Гугле.

Разметку можно увидеть в результатах поиска.

В Google также можно увидеть специальную карусель из рецептов при некоторых запросах.

А в Яндексе — попасть в расширенный сниппет справа от основного поиска.

Для разметки используйте схему https://schema.org/Recipe. Узнать больше о разметке рецептов в материалах Google и Яндекс.

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

У Яндекса такой функционал представлен в инструменте Вебмастер. Авторизуйтесь в сервисе и пройдите по ссылке Инструменты — Валидатор микроразметки. Проверить микрозметку можно по URLу страницы или фрагменту HTML-кода.

В Google проверка микроразметки доступна в https://search.google.com/structured-data/testing-tool/u/0/ с похожими возможностями. Но тут интерфейс чуть более удобен — в нем для любого исходного варианта предусмотрена возможность отладки и мгновенной проверки внесенных в разметку изменений.

Здесь есть 2 типа замечаний: собственно ошибки (выделяются красным), которые мешают интерпретации разметки, и предупреждения (выделяются оранжевым), которые допустимы, но говорят о том, что данные в разметке неполные.

Недавно Google представил еще один онлайн-инструмент, чтобы проверить расширенные сниппеты и узнать может ли ваша разметка быть показана в результатах поиска https://search.google.com/test/rich-results?hl=ru. Необходимо указать URL страницы или фрагмент проверяемого кода и выбрать основного робота (в большинстве случаев это Googlebot для смартфонов).

Как видите, получить красивый сниппет, привлекающий внимание, совсем не сложно! Достаточно один раз разобраться в Schema.org, используя наши подсказки и примеры, и вы сможете самостоятельно структурировать данные на своем сайте.