Микроразметка для интернет-магазина

Если 5-6 лет назад многие магазины обходили стороной микроразметку, то сегодня, в связи со стремительным развитием поисковой выдачи Google и Google Shopping просто необходимо сделать микроразметку в интернет-магазине. Мы не будем долго рассказывать, как это влияет на показатели CTR и позиции в выдаче, а сразу объясним, как сделать микроразметку без лишних деталей.

Микроразметка главной страницы:

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

<div itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Название компании">
<meta itemprop="description" content="Описание деятельности компании">
<meta itemprop="image" content="ссылка на логотип">
<meta itemprop="telephone" content="телефон">
<span itemprop="email" content="Электронная почта">

<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<meta itemprop="streetAddress" content="Улица, дом, офис">
<meta itemprop="addressLocality" content="Город">
<meta itemprop="addressRegion" content="Область">
</div>
</div>

Микроразметка категории товара:

Это могут быть светильники, ноутбуки, телефоны, все что угодно с выводом сводной информации о категории: минимальная и максимальная цена, количество товаров в категории, название категории.

<div itemscope itemtype="http://schema.org/Product">
<meta itemprop="Name" content="Название категории">
<div itemtype="http://schema.org/AggregateOffer" itemscope="" itemprop="offers">
<meta content="5114" itemprop="offerCount">          //// Количество товаров в категории
<meta content="987582" itemprop="highPrice">         //// Высшая цена товара в категории
<meta content="315" itemprop="lowPrice">             //// Низшая цена товара в категории
<meta content="UAH" itemprop="priceCurrency">        //// Валюта
</div>

Микроразметка карточки товара:

В микроразметке карточки товара в первую очередь обозначаем: название, изображение, цена, наличие, краткое описание товара.

<div itemscope="" itemtype="http://schema.org/Product">
<meta itemprop="name" content="Название товара">                       //// Здесь название товара
<meta itemprop="image" content="https://site.ua/images/picture.png">   //// Фото товара, только в формате PNG

<div itemprop="offers" itemscope="" itemtype="https://schema.org/Offer">
<meta itemprop="priceCurrency" content="UAH">
<meta itemprop="price" content="5000.00">                              //// Цена товара

<meta itemprop="priceValidUntil" content="2022-01-01">                 //// Сегодняшняя дата
<link itemprop="availability" href="http://schema.org/InStock">        //// Наличие товара (В наличии - InStock, Отсутствует - OutOfStock, Предзаказ - PreOrder)
<meta itemprop="brand" content="Brand">                                //// Бренд производителя товара

<meta itemprop="description" content="Описание товара">                //// Описание товара
<meta itemprop="url" content="https://site.ua">                        //// URL товара
<meta itemprop="sku" content="1234">                                   //// SKU товара
</div>
 
</div>

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

<div itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating">
<meta itemprop="reviewCount" content="31"> //// Количество оценок
<meta itemprop="ratingValue" content="5">  //// Рейтинг
<meta itemprop="bestRating" content="5">   //// Максимальная шкала рейтинга
</div>

Кроме того, в карточке товара можно заметить и отзывы:

<div itemprop="review" itemscope itemtype="http://schema.org/Review">
<meta itemprop="name" content="Заголовок отзыва">           //// Заголовок отзыва
<meta itemprop="reviewBody" content="Текст отзыва">         //// Текст отзыва    
<meta itemprop="author" content="Имя пользователя">         //// Имя автора
<meta itemprop="datePublished" content="2016-12-01">        //// Дата отзыва
</div>

В 2022 году в микроразметке карточки товара появилась возможность сделать еще и разметку преимуществ и недостатков товара для каждого отзыва, с помощью параметров positiveNotes и negativeNotes. В разметке json это может выглядеть примерно так:

<script type="application/ld+json">
{
        "@context": "http://schema.org",
        "@type": "Product",
        "name": "Название товара",
        "review": {
          "@type": "Review",
          "name": "Отзыв о товаре",
          "author": {
            "@type": "Person",
            "name": "Имя автора"
          },
          "positiveNotes": {
            "@type": "ItemList",
            "itemListElement": [
              {
                "@type": "ListItem",
                "position": 1,
                "name": "Преимущество"
              }
            ]
          },
          "negativeNotes": {
            "@type": "ItemList",
            "itemListElement": [
              {
                "@type": "ListItem",
                "position": 1,
                "name": "Недостаток"
              }
            ]
          }
        }
      }
</script>

Есть и дополнительные переменные. О них читайте на страничке schema.org/Product. Все то, что мы перечислили рекомендуем обязательно сделать.

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

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

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://example.com/ ">
<span itemprop="name">Главная</span></a>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://example.com/dresses">
<span itemprop="name">Главная категория</span></a>
<meta itemprop="position" content="2" />
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://example.com/dresses/real">
<span itemprop="name">Подкатегория</span></a>
<meta itemprop="position" content="3" />
</li>
</ol>

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

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

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

Дополнительно в 2021 году schema.org запустила собственный валидатор микроразметки - https://validator.schema.org/

Валидатор микроразметки укажет где конкретно есть проблемы.

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

Заказать услугу