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

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

Стандарт Schema.org был запущен западными поисковыми системами Google, Yahoo и Bing в 2011 года. Чуть позднее к ним присоединился российский Яндекс. Основная задача инициативы состоит в разработке единой семантической разметки HTML5, которая упростила бы поисковикам «понимание» содержимого веб-сайтов, а значит способствовала улучшению качества поиска.

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

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

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

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

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

  1. Хлебные крошки
  2. Контактные данные организации
  3. Статья
  4. Поисковая строка
  5. Часто задаваемые вопросы
  6. Вопросы и ответы
  7. Инструкция
  8. Товар
  9. Товарное предложение
  10. Отзывы на товар или услугу
  11. Учебные курсы
  12. Мероприятия
  13. Рецепты

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

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

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


<section itemscope="" itemtype="http://schema.org/Article">
  <h1 itemprop="headline">Аквариумные рыбы лисицы</h1>
  <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 конкретного сайта. Она помогает сразу уточнить запрос к сайту и получить нужный результат.Особенностью данной микроразметки на практике является и то, что ее добавление вовсе на гарантирует появления поиска в сниппете вашего сайта. И наоборот, для крупных популярных сайтов 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>
  </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>
    

Не забудьте экранировать кавычки, если используете формат JSON-LD. Для этого надо поставить перед каждой кавычкой, не относящейся к формату, обратный слеш \.

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

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

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

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

Если на странице может быть несколько вопросов, то используйте схему разметки 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-разметка улучшит представление в результатах поиска страниц с пошаговыми инструкциями. Каждый шаг может содержать поясняющие фото и видеоматериалы или же просто текст.Как и в случае 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 для карточки товара

Пример разметки 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.

Пример разметки Product-AggregateOffer в microdata


<div itemscope="" itemtype="http://schema.org/Product">
  <figure class="image"><img itemprop="image" src="dell-30in-lcd.jpg" alt="A Dell UltraSharp monitor"><figcaption>A Dell UltraSharp monitor</figcaption></figure>
  <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. 

Пример разметки Product с review в 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>	  

Пример разметки 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>	

Другие виды микроразметки Schema.org

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

Разметка образовательных курсов

Подходит для разметки учебных курсов и образовательных программ, состоящих из нескольких модулей (уроков). Разовые образовательные события, такие как, например, 2-часовая лекция, относятся к мероприятиям.

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

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

Разметка мероприятий

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

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

Разметка рецептов

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

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

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

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

Валидатор микроразметки

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

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

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

Вместо заключения

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

Рейтинг: 0/5 - 0 голосов

Комментарии (0)




Разрешённые теги: <b><i><br>Добавить новый комментарий:


© 2020 Siteapp.by | Все права защищены