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

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