Настройка структурированных данных (Schema.org / JSON-LD) для сайта
Структурированные данные помогают поисковым системам понять содержимое страницы и показывать расширенные сниппеты (rich results): звёзды рейтинга, цены, хлебные крошки, ответы на вопросы.
Форматы: 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": "RUB" }
}
]
</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).