Налаштування структурованих даних (Schema.org / JSON-LD) для сайту
Структуровані дані допомагають пошуковим системам зрозуміти вміст сторінки та показувати розширені результати: зірки рейтингу, ціни, хлібні крошки, відповіді на питання.
Формати: JSON-LD vs Microdata vs RDFa
JSON-LD — рекомендуємий Google формат. Розміщується в тегу <script> в <head>, не змішується з HTML, легко управляється через JavaScript.
Microdata — атрибути прямо в HTML-тегах. Складніше підтримувати при змінах розмітки.
RDFa — аналогічно Microdata, менш поширений.
Використовуйте JSON-LD.
Базова структура JSON-LD
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "Назва сайту",
"url": "https://example.ru",
"potentialAction": {
"@type": "SearchAction",
"target": {
"@type": "EntryPoint",
"urlTemplate": "https://example.ru/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": "https://example.ru" },
{ "@type": "ListItem", "position": 2, "name": "Електроніка", "item": "https://example.ru/electronics" },
{ "@type": "ListItem", "position": 3, "name": "Смартфони" }
]
},
{
"@context": "https://schema.org",
"@type": "Product",
"name": "iPhone 15 Pro",
"offers": { "@type": "Offer", "price": "89990", "priceCurrency": "UAH" }
}
]
</script>
Реалізація в 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
| Тип | Застосування | Rich Result |
|---|---|---|
| Product | Товари | Зірки, ціна |
| Article | Статті, новини | Заголовок, дата |
| BreadcrumbList | Хлібні крошки | Шлях у сніпеті |
| FAQPage | Питання/відповіді | Аккордеон у виданні |
| Organization | Організація | Knowledge Panel |
| LocalBusiness | Місцевий бізнес | Карти, години роботи |
| Event | Заходи | Дата, місце |
| Review | Відзиви | Зірки |
| JobPosting | Вакансії | Карточка вакансії |
Валідація
- Google Rich Results Test: search.google.com/test/rich-results
- Schema.org Validator: validator.schema.org
Час налаштування: 1–2 дні для базових типів (Product, BreadcrumbList, Organization, Article).