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

Якщо 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 просування і ранжирування в пошукових системах.

Замовити послугу