E-commerce: Просування та запуск інтернет-магазину
Корисні статті та інструкції щодо просування, запуску та розвитку інтернет-магазинів у сфері E-commerce

Структуровані дані Schema.org для товарів — повний гайд з прикладами



Структуровані дані Schema.org для товарів: повний гайд


Про що цей гайд

  • Що таке Schema.org і навіщо потрібна мікророзмітка
  • Який формат використовувати (JSON-LD)
  • Обов'язкові та рекомендовані поля для картки товару
  • Покрокові приклади: від простого до просунутого
  • Перевірка, інструменти та рекомендації
  • Особливості для платформ інтернет-магазинів

1. Що таке Schema.org і навіщо це потрібно

Schema.org — це словник (вендор-нейтральна схема) для структурованих даних, підтримувана великими пошуковими системами. Розмітка допомагає пошуковикам правильно зрозуміти вміст картки товару та може призвести до розширених сніпетів (ціна, наявність, рейтинг, фотографії).

Офіційні посилання (рекомендується):

2. Який формат розмітки використовувати

Google рекомендує JSON-LD. Він не втручається у DOM, його легко вставляти сервером і динамічно генерувати з даних БД.

Формати, які існують: JSON-LD (рекомендується), Microdata, RDFa — обирайте JSON-LD для інтернет-магазину.

3. Обов'язкові поля для коректної картки товару

Мінімум, який потрібен для коректної обробки Google:

  • name — назва товару
  • image — хоча б одне зображення (URL)
  • description — короткий опис
  • offers.price — ціна
  • offers.priceCurrency — валюта (ISO код, наприклад UAH, USD)
  • offers.availability — наявність (https://schema.org/InStock тощо)
  • offers.url — URL сторінки товару

4. Рекомендовані додаткові поля (повний список корисних атрибутів)

  • sku — артикул
  • mpn — manufacturer part number
  • gtin8 / gtin12 / gtin13 / gtin14 — штрихкод
  • brand — бренд
  • category — категорія
  • color, material, size, weight — характеристики
  • aggregateRating — підсумковий рейтинг
  • review — відгуки
  • itemCondition — стан товару
  • additionalProperty — довільні властивості (PropertyValue)
  • shippingDetails / OfferShippingDetails — умови доставки
  • seller — організація-продавець

5. Простий робочий приклад JSON-LD (мінімум)

Code: JSON-LD
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Wireless Headphones X100" назва товару,
  "image": "https://site.com/images/headphones-x100.jpg" URL основного зображення,
  "description": "Бездротові навушники з шумозаглушенням." короткий опис,
  "offers": {
    "@type": "Offer",
    "url": "https://site.com/product/headphones-x100" сторінка товару,
    "priceCurrency": "UAH" валюта (ISO),
    "price": "2499" ціна — число,
    "availability": "https://schema.org/InStock" наявність
  }
}
</script>

Примітка: price — відправляйте як число/рядок цифр (без знаку валюти). availability використовуйте повний URL із schema.org (наприклад, https://schema.org/InStock).

6. Детальна розмітка товару (повний приклад)

Нижче — розмітка з багатьма полями: GTIN, бренд, SKU, кілька зображень, aggregateRating, review, additionalProperty, shippingDetails.

Code: JSON-LD
<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "Xiaomi Mi Band 7" назва товару,
  "image": [
    "https://site.com/upload/mi-band-7-1.webp",
    "https://site.com/upload/mi-band-7-2.webp"
  ] список зображень,
  "description": "Фітнес-браслет з AMOLED-екраном та пульсометром." опис,
  "sku": "MI-BAND-7-BLACK" внутрішній артикул,
  "mpn": "MB7-2025" код виробника,
  "gtin13": "6954176850021" штрихкод,
  "brand": {
    "@type": "Brand",
    "name": "Xiaomi" бренд
  },
  "additionalProperty": [
    {
      "@type": "PropertyValue",
      "name": "Колір",
      "value": "Чорний"
    },
    {
      "@type": "PropertyValue",
      "name": "Матеріал",
      "value": "Силікон, метал"
    }
  ] довільні характеристики,
  "offers": {
    "@type": "Offer",
    "url": "https://site.com/product/mi-band-7/" URL товару,
    "priceCurrency": "UAH" валюта,
    "price": "1499" ціна,
    "priceValidUntil": "2026-12-31" дата дії ціни,
    "availability": "https://schema.org/InStock" наявність,
    "itemCondition": "https://schema.org/NewCondition" стан,
    "seller": {
      "@type": "Organization",
      "name": "Hotlist.biz" продавець
    },
    "shippingDetails": {
      "@type": "OfferShippingDetails",
      "shippingRate": {
        "@type": "MonetaryAmount",
        "value": "50"
      } вартість доставки (якщо потрібно)
    }
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.8" середній рейтинг,
    "reviewCount": "238" кількість відгуків
  },
  "review": [
    {
      "@type": "Review",
      "author": "Олена",
      "datePublished": "2025-02-10",
      "reviewBody": "Чудовий браслет, працює стабільно!",
      "reviewRating": {
        "@type": "Rating",
        "ratingValue": "5"
      }
    }
  ]
}
</script>

7. Варіативні товари (розмір/колір) — підходи

Існують два поширених підходи:

  1. Один головний Product + список offers (або окремі Offer для кожного варіанту).
  2. Кілька Product (по одному на унікальну сторінку варіанту) — застосовувати, якщо у варіанту своя сторінка/URL.

Приклад: Product з двома Offer (два кольори, одна сторінка):

Code: JSON-LD
<script type="application/ld+json">
{
  "@context":"https://schema.org",
  "@type":"Product",
  "name":"Футболка Classic",
  "image":["https://site.com/img/tshirt-red.jpg"],
  "description":"Класична футболка",
  "sku":"TSHIRT-001",
  "brand":{"@type":"Brand","name":"BrandCo"},
  "offers":[
    {
      "@type":"Offer",
      "sku":"TSHIRT-001-RED",
      "price":"599",
      "priceCurrency":"UAH",
      "availability":"https://schema.org/InStock",
      "itemCondition":"https://schema.org/NewCondition",
      "color":"Червоний" атрибут варіанту
    },
    {
      "@type":"Offer",
      "sku":"TSHIRT-001-BLUE",
      "price":"599",
      "priceCurrency":"UAH",
      "availability":"https://schema.org/OutOfStock",
      "itemCondition":"https://schema.org/NewCondition",
      "color":"Синій"
    }
  ]
}
</script>

8. BreadcrumbList (хлібні крихти) — корисно для навігації

Хлібні крихти допомагають пошуковикам показати структуру сайту у сніпеті.

Code: JSON-LD
<script type="application/ld+json">
{
  "@context":"https://schema.org",
  "@type":"BreadcrumbList",
  "itemListElement":[
    {
      "@type":"ListItem",
      "position":1,
      "name":"Головна",
      "item":"https://site.com/"
    },
    {
      "@type":"ListItem",
      "position":2,
      "name":"Категорія: Браслети",
      "item":"https://site.com/category/bracelets"
    },
    {
      "@type":"ListItem",
      "position":3,
      "name":"Xiaomi Mi Band 7",
      "item":"https://site.com/product/mi-band-7/"
    }
  ]
}
</script>

9. Як перевіряти розмітку — інструменти

  • Google Rich Results Test — швидко показує помилки та попередження для rich snippets.
  • validator.schema.org — детальна валідація схеми.
  • Google Search Console — у розділі «Покращення» → «Товари» можна відстежувати помилки після публікації.

10. Best practices та рекомендації

  • Генеруйте JSON-LD на сервері з БД — ціна, наявність, sku, зображення повинні бути синхронізовані з контентом сторінки.
  • Не використовуйте тестові/фейкові дані у production.
  • Якщо показуєте кілька цін (акції), використовуйте priceValidUntil та вказуйте актуальну ціну в offers.price.
  • Вказуйте priceCurrency у форматі ISO (UAH, USD, EUR).
  • Не створюйте конфліктну розмітку (різні ціни у видимому контенті та JSON-LD).
  • Для міжнародних магазинів — вказуйте локалі, адресу продавця та shippingDetails.

11. Часті помилки та як їх виправити

  • Помилка: price містить символ валюти — виправлення: зберігати та виводити лише цифри.
  • Помилка: відсутність image — виправлення: додати хоча б 1 коректний URL.
  • Помилка: різні URL — виправлення: використовувати URL саме поточної сторінки товару в offers.url.
  • Помилка: масив review/aggregateRating фальсифікований — виправлення: показувати лише реальні відгуки.

12. SEO-поради

  • Додайте структуровані дані на кожну картку товару — це підвищує шанс отримати розширений сніпет.
  • Додавайте докладні зображення (ImageObject) з вказанням width/height, якщо можливо.
  • Використовуйте BreadcrumbList та Product разом — це покращує навігацію у видачі.
  • Моніторьте Search Console та виправляйте помилки розмітки.

13. Шаблон для вставки в шаблон товару (динамічний)

Нижче — шаблон, де змінні замінюються сервером (PHP/Twig/Smarty). Підставляйте свої змінні замість %VAR%.

Code: JSON-LD
<script type="application/ld+json">
{
  "@context":"https://schema.org",
  "@type":"Product",
  "name":"%PRODUCT_NAME%" підставляється з БД,
  "image":[%IMAGE_LIST%] масив URL зображень,
  "description":"%SHORT_DESCRIPTION%" короткий опис,
  "sku":"%SKU%" артикул,
  "brand":{"@type":"Brand","name":"%BRAND%"},
  "offers":{
    "@type":"Offer",
    "url":"%PRODUCT_URL%" повний URL,
    "priceCurrency":"%CURRENCY%",
    "price":"%PRICE%",
    "priceValidUntil":"%PRICE_VALID_UNTIL%",
    "availability":"%AVAILABILITY%" https://schema.org/InStock тощо
  }
}
</script>

14. Важливо для користувачів Hotlist.biz

За замовчуванням платформа Hotlist.biz уже містить коректну базову мікророзмітку (Product, Offer, Price, Availability, BreadcrumbList, ImageObject). Зазвичай достатньо розширювати її додатковими полями (gtin, mpn, additionalProperty тощо) за потреби.

15. Open Graph та Twitter Cards для товарів

Для коректного відображення товарів у соцмережах Facebook, Messenger, Viber, WhatsApp та X (Twitter) рекомендується використовувати метатеги Open Graph та Twitter Cards. Нижче наведені готові приклади.

Приклад Open Graph для товару

Code: HTML

<meta property="og:type" content="product"> тип даних — товар
<meta property="og:title" content="Назва товару"> назва товару
<meta property="og:description" content="Короткий опис товару"> короткий опис
<meta property="og:url" content="https://site.com/product-url"> URL сторінки товару
<meta property="og:image" content="https://site.com/upload/product.jpg"> зображення товару

<meta property="product:price:amount" content="2499"> ціна
<meta property="product:price:currency" content="UAH"> валюта
<meta property="product:availability" content="in stock"> наявність

Приклад Twitter Cards для товару

Code: HTML

<meta name="twitter:card" content="summary_large_image"> велика картка товару
<meta name="twitter:title" content="Назва товару"> заголовок
<meta name="twitter:description" content="Короткий опис товару"> опис
<meta name="twitter:image" content="https://site.com/upload/product.jpg"> зображення
<meta name="twitter:url" content="https://site.com/product-url"> URL товару

16. Корисні інструменти та посилання

Адаптивна верстка та мобільне меню для інтернет-магазину: як створити адаптивний інтернет-магазин та мобільне меню
Чому оренда інтернет-магазину вигода?
Рекомендації щодо СЕО просування сайтів.