Микроразметка карточки товара с помощью Schema org
15 августа 2018
Пример разметки Schema.org для посадочной страницы с ценой, рейтингом и отзывами:
<!-- Указывается схема Product.-->
<div itemscope itemtype="http://schema.org/Product">
<!-- В поле name указывается наименование товара.-->
<h1 itemprop="name">Название товара </h1>
<!-- В поле image указывается ссылка на картинку товара.-->
<a itemprop="image" href="/schema/Product.jpeg" title="Описание картинки " ><img src="/schema/Product.jpeg" alt="альтернативный текст картинки"></a>
<!-- В поле description дается описание товара.-->
<div itemprop="description">Описание товара или услуги</div>
<!-- рейтинг товара -->
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
Рейтинг: <span itemprop="ratingValue">4.3</span> (<span itemprop="reviewCount">13</span> отзывов)
<!-- или можно указать в скрытом варианте: -->
<!-- минимальное значение рейтинга: -->
<meta itemprop="worstRating" content="1"/>
<!-- само значение рейтинга: -->
<meta itemprop="ratingValue" content="4,8"/>
<!-- максимальное значение рейтинга: -->
<meta itemprop="bestRating" content="5"/>
<!-- количество голосов по рейтингу: -->
<meta itemprop="ratingCount" content="38914"/>
</div>
<!-- Указывается схема Offer - цена товара-->
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<!-- В поле price указывается цена товара.-->
Цена: <span itemprop="price" content="9490.00">9490 руб.</span>
<!-- В поле priceCurrency указывается валюта данные выводим мета информацией так как на странице она не где не присутствует.-->
<meta itemprop="priceCurrency" content="RUB">
<!-- Указывается свойство InStock, которое свидетельствует о том, что товар в наличии, данные выводим также метаинформацией -->
<!-- указываем наличие: -->
<meta itemprop="availability" href="http://schema.org/InStock" content="В наличии">
<!-- или: -->
<span itemprop="availability">Уже в продаже!</span>
<!-- или указываем отсутствие: -->
<meta itemprop="availability" href="http://schema.org/OutOfStock" content="Отсутствует">
<!-- если под заказ, то указываем: -->
<meta itemprop="availability" href="http://schema.org/PreOrder" content="Под заказ">
</div>
<!-- Указывается схема Review - отзыв о товаре -->
<div itemprop="review" itemscope itemtype="http://schema.org/Review">
<span itemprop="name">Отзыв о продукте</span>
<!-- В поле date указывается дата публикации отзыва.-->
<meta itemprop="datePublished" content="2017-06-20">20 июня 2017 года
<!-- Указывается схема Rating - рейтинг отзыва -->
<span itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<!-- В поле worstRating метаинформацией указываем минимально возможный рейтинг.-->
<meta itemprop="worstRating" content = "1">
<!-- В поле ratingValue мета информацией указываем текущий рейтинг.-->
<meta itemprop="ratingValue" content = "3">
<!-- В поле bestRating метаинформацией указываем максимально возможный рейтинг.-->
<meta itemprop="bestRating" content = "5"/>
</span>
<!-- Указывается схема Person.-->
<span itemprop="author" itemscope itemtype="http://schema.org/Person">
<!-- В поле name указываем имя автора.-->
<span itemprop="name" class="name">Наталья</span>
</span>
<!-- В поле reviewBody указываем сам отзыв на товар.-->
<div itemprop="reviewBody">Текст отзыва</div>
</div>
</div>
Такая семантическая разметка позволит передавать в Яндекс и Google размеченные данные по товарам и ценам - что позволит улучшить отображение сайта в поисковой выдачи (SERP), и косвенно повлияет на CTR и поведенческие факторы.
Придерживайтесь данного примера. Надеюсь он вам помог в решении задач.
Валидаторы микроразметки
Делайте разметку так, чтобы в ней не было ошибок - при проверке в валидаторах поисковых систем.