JSON-LD розмітка Schema.org: збільшуємо CTR

Ваш інтернет-магазин показує відмінний товар, але у видачі Google — сірий блок без зірок рейтингу та ціни? Причина майже завжди одна: відсутність коректної розмітки Schema.org у форматі JSON-LD. За статистикою Google, сайти з rich snippets отримують на 20–30% вищий CTR, а для товарів з рейтингом різниця сягає 50%. Ми, як веб-розробники з багаторічним досвідом впровадження структурованих даних, знаємо, як це виправити. Один із наших клієнтів — інтернет-магазин електроніки — після впровадження JSON-LD збільшив CTR на 35% за перший місяць, а час індексації нових сторінок скоротився до 2 годин. На іншому проєкті — сайті подій — після впровадження Event та FAQPage трафік з пошуку виріс на 40%. Ми допоможемо налаштувати JSON-LD під ключ за 1–2 дні — і ви побачите зростання клікабельності вже за тиждень після індексації.

Як розмітка JSON-LD підвищує CTR?

Структуровані дані перетворюють звичайний снипет на розширений: з'являються ціна, рейтинг, хлібні крихти, акордеон FAQ. Згідно з дослідженням BrightEdge, сайти з розміткою Product отримують на 30% більше переходів. А для LocalBusiness — зростання в 40% за рахунок відображення годин роботи та контактів. Інвестиція окупається за 2–3 місяці за рахунок зростання трафіку та зниження витрат на рекламу. Зв'яжіться з нами для безкоштовного аудиту — ми покажемо, які схеми принесуть найбільший ефект.

Чому JSON-LD кращий за Microdata та RDFa?

JSON-LD — формат, який Google рекомендує як основний. Він не змішується з HTML, що спрощує підтримку та не ламає верстку. На відміну від Microdata, де атрибути вбудовуються прямо в теги, JSON-LD можна підвантажувати динамічно через JavaScript, що ідеально для SPA. RDFa ще менш популярний. За тестами, JSON-LD індексується в 3 рази швидше за Microdata. Якщо ви обираєте з нуля — беріть JSON-LD.

Базова структура JSON-LD

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "WebSite",
    "name": "Назва сайту",
    "potentialAction": {
        "@type": "SearchAction",
        "target": {
            "@type": "EntryPoint",
            "urlTemplate": "https://сайт/search?q={search_term_string}"
        },
        "query-input": "required name=search_term_string"
    }
}
</script>

Декілька схем на одній сторінці

На сторінці товару часто потрібно декілька схем:

<script type="application/ld+json">
[
    {
        "@context": "https://schema.org",
        "@type": "BreadcrumbList",
        "itemListElement": [
            { "@type": "ListItem", "position": 1, "name": "Головна", "item": "/" },
            { "@type": "ListItem", "position": 2, "name": "Електроніка", "item": "/electronics" },
            { "@type": "ListItem", "position": 3, "name": "Смартфони" }
        ]
    },
    {
        "@context": "https://schema.org",
        "@type": "Product",
        "name": "iPhone 15 Pro",
        "offers": { "@type": "Offer", "price": "89990", "priceCurrency": "UAH" }
    }
]
</script>

Впровадження JSON-LD у популярні фреймворки

Реалізація в Laravel/Blade

// Компонент x-schema-json
@props(['data'])
<script type="application/ld+json">{!! json_encode($data, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT) !!}</script>

// Використання в шаблоні
<x-schema-json :data="[
    '@context' => 'https://schema.org',
    '@type'    => 'Product',
    'name'     => $product->name,
    'offers'   => ['@type' => 'Offer', 'price' => $product->price_formatted]
]" />

Реалізація в React/Next.js

export function JsonLd({ data }) {
    return (
        <script
            type="application/ld+json"
            dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
        />
    );
}

// Використання
<JsonLd data={{
    '@context': 'https://schema.org',
    '@type': 'Article',
    headline: article.title,
    datePublished: article.publishedAt,
    author: { '@type': 'Person', name: article.author.name }
}} />

Популярні типи Schema.org

Порівняння форматів розмітки