Микроразметка Schema.org: как научить поисковые системы понимать ваш сайт

Что такое Schema.org

Давайте представим карточку товара. Для пользователя страница понятна. Но поисковый робот видит только DOM-дерево с текстом внутри div-ов. Он не знает, что 79 990 — это цена, 4.7 — рейтинг, а 234 — количество отзывов. Это просто строки.

Микроразметка Schema.org добавляет семантический слой поверх HTML. Она явно указывает поисковику: «это товар, вот его цена, вот рейтинг». Данные становятся структурированными и машиночитаемыми.

Schema.org — словарь стандартизированных типов данных, созданный в 2011 году совместно Google, Microsoft, Yahoo и Яндексом. Вместо того чтобы каждый поисковик придумывал свой формат разметки, они договорились об общем стандарте. На данный момент его использует более 45 миллионов доменов.

Что это даёт на практике

Rich Snippets — расширенные сниппеты в выдаче

Главный эффект микроразметки — изменение внешнего вида результата в поиске.

Обычный результат:

Смартфон Example Pro 256GB — купить в Example Shop
Флагманский смартфон с камерой 108 МП. Доставка по всей России.

С микроразметкой Product + Offer + AggregateRating:

Смартфон Example Pro 256GB — Example Shop
★★★★★ 4.7 (234 отзыва) · 79 990 ₽ · В наличии
Флагманский смартфон с камерой 108 МП. Доставка по всей России.

Второй вариант занимает больше места, содержит ключевую информацию (цена, наличие, рейтинг) и выделяется на фоне конкурентов.

Рост кликабельности

Google приводит конкретные кейсы в документации:

Rotten Tomatoes: +25% CTR на страницах с разметкой
Food Network: +35% визитов после внедрения structured data
Rakuten: пользователи проводят в 1.5 раза больше времени на страницах с разметкой

Цифры варьируются, но паттерн устойчивый: rich snippets повышают кликабельность на 20–30% по сравнению с обычными результатами.

AI-поиск и голосовые ассистенты

Поисковики всё активнее используют LLM для генерации ответов. Structured data помогает этим моделям точнее интерпретировать контент.

Фабрис Канель, Principal Product Manager в Microsoft Bing, на конференции SMX Munich (март 2025): «Schema Markup helps Microsoft's LLMs understand content».

Google в документации Search Central: «You can help us by providing explicit clues about the meaning of a page to Google by including structured data on the page».

Чем лучше поисковик понимает контент, тем выше шанс попасть в AI-генерируемые ответы и сниппеты.

В каких форматах можно использовать Schema.org

Schema.org — это словарь, но «разговаривать» на нем с поисковыми роботами можно на разных «языках» (синтаксисах). Google, Яндекс и Bing поддерживают три основных формата, но их значимость сильно различается.

Microdata (микроданные)

Cамый старый и классический способ разметки, при котором атрибуты Schema.org внедряются прямо в HTML-теги с помощью itemscope, itemtype, itemprop.Как это выглядит:

<div itemscope itemtype="https://schema.org/Article">
  <h1 itemprop="headline">Как работает микроразметка</h1>
  <span itemprop="author">Иван Петров</span>
</div>

Плюсы: поисковик гарантированно видит связь между кодом и текстом, который видит пользователь.

Минусы: громоздко. Любое изменение дизайна заставляет переписывать разметку. Повышается риск «сломать» верстку при редактировании данных.

RDFa

Во многом похож на Microdata, но основан на стандартах W3C для Semantic Web и использует атрибуты vocab, typeof, property.

Статус: В современном вебе практически вытеснен. Встречается в старых проектах или специфических XML-документах. Для новых сайтов использовать его не рекомендуется.

JSON-LD (JavaScript Object Notation for Linked Data)

Формат передачи структурированных данных в виде обычного JSON-объекта. В отличие от Microdata и RDFa, он не смешивается с HTML-разметкой, а размещается внутри тега <script>.

Как это выглядит:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Как работает микроразметка",
  "author": {
    "@type": "Person",
    "name": "Иван Петров"
  }
}
</script>

Плюсы:

Чистота кода: структурированные данные отделены от визуальной верстки.
Гибкость: разметку легко генерировать динамически — на сервере или на клиенте.
Рекомендации поисковиков: Google официально называет JSON-LD предпочтительным форматом.

Google рекомендует именно JSON-LD. Из документации: «We recommend using JSON-LD for structured data whenever possible» и «JSON-LD is the easiest solution for website owners to implement and maintain at scale».

Минусы: Требует аккуратности при работе с вложенными объектами и соблюдения корректной JSON-структуры.

На практике JSON-LD — это стандарт для Schema.org в современном вебе. Microdata и RDFa остаются поддерживаемыми, но используются всё реже — в основном в легаси-проектах или при жёсткой привязке данных к HTML.

Из чего состоит разметка Schema.org (JSON+LD)

Любая разметка, независимо от её сложности, строится по единой логике. Это обычный JSON-объект, в котором есть зарезервированные ключи, понятные поисковым роботам.

1. Контекст (@context)

Это обязательное поле, которое указывает поисковику, какой словарь используется для интерпретации данных. Контекст указывается один раз в корневом объекте. Вложенные объекты его наследуют.

"@context": "https://schema.org"

2. Тип объекта (@type)

"@type": "Organization"

Определяет, что именно описывает разметка: организацию, товар, статью или событие. Тип задаёт набор доступных свойств и логику интерпретации данных поисковиками.

Schema.org содержит более 800 типов, организованных в иерархию. Например:

Thing
  └── Organization
        ├── Corporation
        ├── LocalBusiness
        │     ├── Restaurant
        │     ├── Store
        │     └── ...
        └── ...

LocalBusiness наследует все свойства Organization, но добавляет специфичные: openingHours, priceRange, geo. Чем точнее выбран тип, тем лучше поисковик понимает контент.

3. Свойства (Properties)

Пары «ключ-значение», описывающие объект. Набор полей зависит от типа: для товара это price, для статьи — datePublished.

Каждый тип имеет свой набор свойств. Они делятся на:

Обязательные — без них разметка не пройдёт проверку (например, name для Product)
Рекомендуемые — улучшают качество rich snippets (например, description, image)
Опциональные — дополнительная информация. Сюда же относятся enums — строгие URL-константы из словаря, например "availability":

Полный список свойств для каждого типа — на schema.org. Например, для Product: schema.org/Product.

4. Вложенные объекты

Свойства могут содержать не только строки и числа, но и другие объекты со своим @type:

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Смартфон Example Pro",
  "brand": {
    "@type": "Brand",
    "name": "Example"
  },
  "offers": {
    "@type": "Offer",
    "price": "79990",
    "priceCurrency": "RUB",
    "availability": "https://schema.org/InStock"
  }
}

Здесь brand — не строка, а объект типа Brand, offers — объект типа Offer с ценой и наличием. Такая вложенность позволяет передать поисковику больше структурированной информации.

5. Связи через @id

Уникальный идентификатор (обычно URL с хэштегом), который позволяет связывать объекты между собой.

Зачем это нужно: Представьте, что у вас на странице есть товар и организация-продавец. Вместо того чтобы внутри каждого товара заново описывать все данные компании (адрес, логотип, соцсети), можно:

Описать организацию один раз и присвоить @id:

{
  "@type": "Organization",
  "@id": "https://example.com/#organization",
  "name": "Example Shop",
  "logo": "https://example.com/logo.png"
}

В схеме товара сослаться на этот @id:

{
  "@type": "Product",
  "name": "Смартфон Example Pro",
  "offers": {
    "@type": "Offer",
    "price": "79990",
    "seller": { 
      "@id": "https://example.com/#organization" 
    }
  }
}

6. Несколько объектов на странице

На одной странице часто нужно разместить несколько схем: информацию о компании, хлебные крошки, данные о товаре.

Несколько <script> тегов — валидный вариант, но @graph позволяет явно показать связи между сущностями и избежать дублирования:

{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "Organization",
      "@id": "https://example.com/#organization",
      "name": "Example Shop"
    },
    {
      "@type": "Product",
      "name": "Смартфон",
      "offers": {
        "@type": "Offer",
        "seller": { "@id": "https://example.com/#organization" }
      }
    },
    {
      "@type": "BreadcrumbList",
      "itemListElement": [...]
    }
  ]
}

Где искать информацию

При работе с микроразметкой есть два основных источника.

Google Search Central — схемы, которые гарантированно поддерживают rich results в Google, с жёсткими требованиями к обязательным полям. Для большинства бизнес-задач достаточно этой галереи.

Schema.org — полный словарь стандарта (800+ типов). Полезен, когда нужно найти специфический тип, которого нет у Google, или изучить все доступные свойства сущности.

Архитектура работы с микроразметкой в Next.js приложении

При внедрении структурированных данных Schema.org на сайт возникает вопрос: как организовать код так, чтобы он был переиспользуемым, поддерживаемым и масштабируемым?

Подход основан на разделении ответственности на четыре уровня:

Базовый компонент рендеринга — отвечает только за вывод JSON-LD
Функции-генераторы — формируют структуру отдельных типов схем
Компоненты-схемы страниц — комбинируют несколько схем для конкретных страниц
Использование в страницах — декларативное размещение схем

Уровень 1: Базовый компонент JsonLd

Единственный компонент, который непосредственно работает с DOM и отвечает за корректный вывод JSON-LD разметки в HTML.

import React from 'react';
import { JsonLdSchema } from '../types';

type Props = {
  data: JsonLdSchema | JsonLdSchema[] | null;
};

export default function JsonLd({ data }: Props) {
  if (!data) return null;
  
  const schema = Array.isArray(data)
    ? { '@context': 'https://schema.org', '@graph': data.filter(Boolean) }
    : { '@context': 'https://schema.org', ...data };
  
  return (
    <script 
      type="application/ld+json" 
      dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }} 
    />
  );
}

Компонент принимает либо один объект схемы, либо массив схем (в этом случае автоматически оборачивает их в @graph), что позволяет размещать несколько связанных схем на одной странице.

Уровень 2: Функции-генераторы схем

Функции инкапсулируют логику построения конкретных типов Schema.org разметки.

import { CreateBreadcrumbListSchemaParams } from '../types';
export function createBreadcrumbListSchema({
  items,
  baseUrl = '',
}: CreateBreadcrumbListSchemaParams): JsonLdSchema {
  const itemListElement = items.map((item, index) => ({
    '@type': 'ListItem',
    position: index + 1,
    name: item.name,
    item: {
      '@type': 'Thing',
      '@id': `${baseUrl}${item.link}`,
    },
  }));
  
  return {
    '@type': 'BreadcrumbList',
    itemListElement,
  };
}

Уровень 3: Компоненты-схемы страниц

Компоненты комбинируют несколько типов схем для конкретных страниц.

import { createOrganizationSchema } from '../creators/createOrganizationSchema';
import { createWebSiteSchema } from '../creators/createWebSiteSchema';
import { JsonLdSchema } from '../types';
import JsonLd from './JsonLd';

export function HomePageSchema() {
  const schemas: JsonLdSchema[] = [];
  
  const organization = createOrganizationSchema({
name: 'Company Name',
 	url: 'https://example.com',
 	logo: 'https://example.com/logo.png',
 	description: 'Company description',
...//остальные свойства применимы к вашему проекту
  });
  schemas.push(organization);
  
  const website = createWebSiteSchema({
name: 'Site Name',
url: 'https://example.com',
...//остальные свойства применимы к вашему проекту
  });
  schemas.push(website);
  
  return <JsonLd data={schemas} />;
}

Уровень 4: Использование в страницах

Размещение компонентов-схем на страницах веб-приложения.

// app/page.tsx
import { HomeSchema } from '@/components/schema-org';

const Home = async () => {
  return (
    <>
      <HomeSchema />
      {/* Контент страницы */}
    </>
  );
};

export default Home;

Микроразметка может жить как в Server, так и в Client компонентах (в зависимости от источника данных).

Когда этот подход оправдан

Подходит для:

Сайтов с множеством страниц и типов контента (e-commerce, медиа, каталоги)
Проектов, где микроразметка нужна на 10+ страницах
Команд из нескольких разработчиков
Случаев, когда важна типобезопасность и долгосрочная поддержка

Избыточно для:

Простой лендинг с 2-3 страницами
Микроразметка нужна только на одной странице
MVP или одноразовый проект

Можно использовать альтернативный подход для простых случаев - прямая вставка JSON:

export default function Home() {
  return (
    <>
      <script type="application/ld+json">
        {JSON.stringify({
          '@context': 'https://schema.org',
          '@type': 'Organization',
          name: 'Company Name',
        })}
      </script>
      {/* Контент страницы */}
    </>
  );
}

Проверка микроразметки: как убедиться, что всё работает

После добавления Schema.org важно проверить, что разметка действительно читается поисковыми системами. Даже небольшая опечатка — лишняя запятая или неверный формат даты — может привести к тому, что поисковик полностью проигнорирует разметку. Чтобы этого не произошло, используйте три этапа проверки.

Инструменты проверки «здесь и сейчас»

Для разовой проверки конкретной страницы или куска кода используйте два дополняющих друг друга сервиса:

Schema Markup Validator (стандарт качества). Это официальный инструмент от Schema.org. Проверяет общую логику и семантическую корректность: правильность типов, связи между вложенными элементами, синтаксические ошибки в JSON-LD.

Совет: Используется для проверки общей логики и вложенности, особенно при работе с редкими типами разметки, которые Google пока не поддерживает официально.

Важно: Этот инструмент не гарантирует появление «звездочек» в поиске — он лишь подтверждает, что JSON-LD написан без ошибок.

Разметку страницы в Schema Markup Validator можно проверить следующими способами:

по фрагменту кода
по URL вашей страницы

Google Rich Results Test (билет в выдачу). Специализированный инструмент для оценки пригодности разметки к формированию расширенных результатов в Google.

Совет: Инструмент умеет анализировать разметку, сгенерированную через JavaScript (React, Vue или Next.js).

Важно: Если здесь есть «Критическая ошибка» (красный значок), Google гарантированно не покажет расширенный сниппет.

Разметку страницы в Google Rich Result Test можно проверить следующими способами:

по фрагменту кода
по URL вашей страницы

Мониторинг после публикации: Google Search Console

Если валидаторы проверяют одну страницу, то Google Search Console следит за всем сайтом в динамике.

Раздел «Улучшения» (Enhancements): Здесь автоматически появятся отчеты по всем типам разметки (Product, FAQ, Breadcrumbs и др.).
Контроль ошибок: Если шаблон сломается и разметка «поедет» на множестве страниц, Search Console немедленно пришлет уведомление на почту.
Аналитика: В отчете «Эффективность» можно отфильтровать данные по «Виду в поиске», чтобы увидеть, сколько кликов принесли именно расширенные результаты.

Быстрая проверка через консоль браузера

Если разметка реализована через JSON-LD, её можно проинспектировать прямо в браузере, не копируя код в сторонние сервисы.

Открыть нужную страницу
Нажать F12 → вкладка Console

Вставить код:

document.querySelectorAll('script[type="application/ld+json"]').forEach(script => { console.log(JSON.parse(script.innerText)); });

Все схемы страницы отобразятся в виде раскрывающихся объектов. Если в коде есть ошибка, консоль подсветит её.

Чек-лист перед релизом

Корректность данных

Тип разметки соответствует смыслу страницы (для статьи в блоге лучше BlogPosting, а не универсальный Article)
Цена, рейтинг, даты в JSON-LD совпадают с тем, что видит пользователь на странице

Формат данных

Даты в формате ISO 8601 (2026-02-12 или 2026-02-12T14:30:00+03:00)
Цена указывается без валюты и символов: "price": "1500" или "price": 1500. Валюта — в отдельном поле priceCurrency

Техническая доступность

robots.txt не запрещает доступ к страницам с разметкой
JSON-LD отдаётся через SSR. Хотя Google справляется с JavaScript, другие системы (Яндекс, Pinterest, мессенджеры) могут проигнорировать разметку, если она подгружается только в браузере

Проверка инструментами

Schema Markup Validator — используйте в процессе разработки, чтобы убедиться в чистоте кода и правильной вложенности объектов.
Google Rich Results Test — используйте непосредственно перед деплоем, чтобы подтвердить, что Google одобряет ваши данные для формирования расширенного сниппета.
Google Search Console — используйте после индексации, чтобы отслеживать разметку в масштабах всего сайта и вовремя узнавать о сбоях.

Даже если все валидаторы показывают статус «Valid», это не гарантия появления расширенного сниппета. Поисковик сам решает, полезна ли разметка пользователю. Главное требование: данные в коде должны соответствовать контенту, который видит пользователь.

Дарья Я.

Frontend Developer

Ошибки и мифы: почему микроразметка может не работать

Разметка не совпадает с контентом: нельзя указывать цены, рейтинги или хлебные крошки, которых пользователь не видит. Несоответствие может привести к ручным санкциям (manual action) и полному исчезновению rich snippets для всего сайта.

Несуществующие свойства: Schema.org — это строгий словарь. Свойства пишутся в camelCase. Частые ошибки:

Придуманные поля (productColor вместо color)
Опечатки (avalability вместо availability)
Неверный регистр (PriceCurrency вместо priceCurrency)

Валидатор покажет warning, но поисковик просто проигнорирует некорректные поля.

Дублирование разметки: не используйте Microdata и JSON-LD для одного и того же объекта на одной странице. Это путает роботов.

Битая связность (@id): если используются идентификаторы @id для связи объектов (например, автора и статьи), но сами объекты не описаны полностью, Google выдаст ошибку связности данных.

Переизбыточность: не пытайтесь заполнить все 40 полей, которые предлагает Schema. Лучше 5–7 ключевых и точных свойств, чем полотно из лишней информации.

Бесполезные страницы: нет смысла размечать корзину, личный кабинет, страницы регистрации или страницы, закрытые в robots.txt (noindex). Роботы туда либо не зайдут, либо не выведут их в поиск.

Завышенные ожидания: чего НЕ стоит ждать от Schema.org

Микроразметка — это мощный инструмент, но не «волшебная таблетка». Важно понимать её ограничения:

Это не фактор ранжирования. Schema.org не поднимет сайт в топ. Она влияет на кликбейтовость (CTR), но не на позицию в списке.
Не гарантирует показ rich snippets. Даже идеально валидная разметка — это лишь запрос к поисковику. Google сам решает, когда и для какого пользователя показать расширенный сниппет, а когда оставить обычную ссылку.
Не заменяет качественный контент. Если сам текст на странице слабый или бесполезный, никакая разметка не заставит пользователя на него нажать.

Заключение

Микроразметка — это не просто «дополнительные теги», это прямой канал связи с алгоритмами поисковых систем и нейросетей. В мире, где за внимание пользователя борются миллионы ссылок, структурированные данные становятся вашим главным невидимым преимуществом.

Ключевые моменты:

JSON-LD — стандарт де-факто. Забудьте про раздутый HTML. Используйте чистые, читаемые скрипты, которые легко масштабировать в любом современном фреймворке.
CTR вместо позиций. Сама по себе разметка не поднимет вас в топ-1, но она сделает ваш сниппет «звездным». В поиске выигрывает не тот, у кого больше текста, а тот, на кого хочется кликнуть.
Связи важнее ключей. Помогайте роботам объединять сущности: автора со статьей, товар с брендом. Чем понятнее ваш «граф данных», тем выше доверие поисковой системы.
Валидация обязательна. Одна лишняя запятая может «погасить» ваши звезды в выдаче. Проверяйте код до релиза и мониторьте Search Console после.

Микроразметка — это инвестиция в долгосрок. Пока конкуренты надеются на «магию ключевых слов», вы создаете цифровой паспорт своего контента. Начните с базовых сущностей и постепенно расширяйте карту данных вашего сайта.

Яна К.