Поисковая разметка (Schema Markup)

Поисковая разметка (или структурированные данные) — это способ пометить содержимое на веб-странице специальным кодом, чтобы поисковые системы (Google, Yandex) лучше понимали, что на странице находится. Это инструмент для SEO оптимизации.

Основные форматы разметки

1. JSON-LD (рекомендуется Google)

JSON-LD (JSON for Linking Data) — это встроение JSON в тег <script>. Это предпочитаемый Google формат.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Как писать на React",
  "description": "Полное руководство по React для начинающих",
  "image": "https://example.com/image.jpg",
  "author": {
    "@type": "Person",
    "name": "Иван Петров"
  },
  "datePublished": "2024-01-15",
  "dateModified": "2024-01-20"
}
</script>

2. Microdata (HTML5)

Атрибуты itemscope, itemtype, itemprop прямо в HTML:

<article itemscope itemtype="https://schema.org/Article">
  <h1 itemprop="headline">Как писать на React</h1>
  <p itemprop="description">Полное руководство</p>
  <img itemprop="image" src="image.jpg" />
  <p itemprop="author" itemscope itemtype="https://schema.org/Person">
    <span itemprop="name">Иван Петров</span>
  </p>
  <time itemprop="datePublished" datetime="2024-01-15">15 января 2024</time>
</article>

3. RDFa

Семантическая разметка с атрибутами vocab, typeof, property:

<article vocab="https://schema.org" typeof="Article">
  <h1 property="headline">Как писать на React</h1>
  <p property="description">Полное руководство</p>
  <img property="image" src="image.jpg" />
</article>

Основные типы Schema.org

1. Article (Статья)

{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Статья о React",
  "description": "Детальное описание",
  "image": "https://example.com/img.jpg",
  "author": {
    "@type": "Person",
    "name": "Автор"
  },
  "datePublished": "2024-01-15",
  "dateModified": "2024-01-20"
}

2. Product (Товар)

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Ноутбук X1",
  "description": "Мощный ноутбук для работы",
  "image": "laptop.jpg",
  "brand": "TechBrand",
  "price": "99999",
  "priceCurrency": "RUB",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.5",
    "ratingCount": "127"
  },
  "availability": "https://schema.org/InStock"
}

3. Review (Отзыв)

{
  "@context": "https://schema.org",
  "@type": "Review",
  "reviewRating": {
    "@type": "Rating",
    "ratingValue": "5"
  },
  "author": {
    "@type": "Person",
    "name": "Петр"
  },
  "reviewBody": "Отличный товар, очень доволен!",
  "datePublished": "2024-01-15"
}

4. Event (Событие)

{
  "@context": "https://schema.org",
  "@type": "Event",
  "name": "Конференция по React",
  "description": "Конференция для React разработчиков",
  "startDate": "2024-06-01T09:00:00",
  "endDate": "2024-06-02T17:00:00",
  "location": {
    "@type": "Place",
    "name": "Конференц-зал А",
    "address": "Москва, ул. Ленина 1"
  }
}

5. LocalBusiness (Локальный бизнес)

{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "IT студия",
  "image": "logo.jpg",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "ул. Пушкина 10",
    "addressLocality": "Москва",
    "postalCode": "101000",
    "addressCountry": "RU"
  },
  "telephone": "+7 (999) 999-99-99",
  "url": "https://example.com",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.8",
    "ratingCount": "250"
  }
}

Практические примеры в React

1. Компонент для статей

function ArticlePage({ article }) {
  const schema = {
    '@context': 'https://schema.org',
    '@type': 'Article',
    headline: article.title,
    description: article.excerpt,
    image: article.imageUrl,
    author: {
      '@type': 'Person',
      name: article.authorName
    },
    datePublished: article.publishedDate,
    dateModified: article.modifiedDate
  };

  return (
    <>
      <Helmet>
        <script type="application/ld+json">
          {JSON.stringify(schema)}
        </script>
      </Helmet>
      <article>
        <h1>{article.title}</h1>
        <p>{article.excerpt}</p>
        <img src={article.imageUrl} alt={article.title} />
      </article>
    </>
  );
}

2. Компонент для товаров

function ProductPage({ product }) {
  const schema = {
    '@context': 'https://schema.org',
    '@type': 'Product',
    name: product.name,
    description: product.description,
    image: product.images,
    brand: product.brand,
    price: product.price,
    priceCurrency: 'RUB',
    aggregateRating: {
      '@type': 'AggregateRating',
      ratingValue: product.rating,
      ratingCount: product.reviewCount
    },
    availability: product.inStock 
      ? 'https://schema.org/InStock'
      : 'https://schema.org/OutOfStock'
  };

  return (
    <>
      <Helmet>
        <script type="application/ld+json">
          {JSON.stringify(schema)}
        </script>
      </Helmet>
      <div className="product">
        <h1>{product.name}</h1>
        <p>{product.description}</p>
        <span className="price">{product.price} руб</span>
        <rating>{product.rating}</rating>
      </div>
    </>
  );
}

3. Утилита для добавления разметки

// utils/schema.ts
export function createArticleSchema(data: {
  title: string;
  description: string;
  image: string;
  author: string;
  publishedDate: string;
  modifiedDate: string;
}) {
  return {
    '@context': 'https://schema.org',
    '@type': 'Article',
    headline: data.title,
    description: data.description,
    image: data.image,
    author: { '@type': 'Person', name: data.author },
    datePublished: data.publishedDate,
    dateModified: data.modifiedDate
  };
}

export function createProductSchema(data: {
  name: string;
  description: string;
  image: string;
  price: number;
  currency: string;
  rating: number;
  reviewCount: number;
}) {
  return {
    '@context': 'https://schema.org',
    '@type': 'Product',
    name: data.name,
    description: data.description,
    image: data.image,
    price: data.price,
    priceCurrency: data.currency,
    aggregateRating: {
      '@type': 'AggregateRating',
      ratingValue: data.rating,
      ratingCount: data.reviewCount
    }
  };
}

Почему это нужно

1. Улучшение SEO

Поисковые системы лучше понимают содержимое:

• Rich snippets в результатах поиска
• Карточки (cards) на Google
• Voice search оптимизация

2. Богатые результаты поиска

Вместо:
Мой сайт - описание

Получаем:
★★★★★ (127 отзывов)
Мой сайт
Цена: 99999 руб
В наличии

3. Featured snippets

Гугл может показать вашу страницу в "Избранных ответах".

4. Улучшение кликабельности

Богатые результаты привлекают больше кликов.

Инструменты для проверки

// 1. Google Rich Results Test
// https://search.google.com/test/rich-results

// 2. Schema.org Validator
// https://validator.schema.org/

// 3. JSON-LD Playground
// https://json-ld.org/playground/

// 4. Yandex Structured Data Validator
// https://webmaster.yandex.ru/tools/structured-data/

Best Practices

// GOOD: JSON-LD в <head>
<head>
  <script type="application/ld+json">
    {/* ваша разметка */}
  </script>
</head>

// GOOD: Используй https://schema.org
"@context": "https://schema.org"

// GOOD: Все необходимые поля
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "...",
  "description": "...",
  "image": "..."
}

// BAD: Неверное имя поля
"title": "..." // используй "headline"

// BAD: Валидация не пройдёт
"@context": "schema.org" // без https://

Заключение

Поисковая разметка — это способ структурировать данные на странице для поисковых систем. Её использование:

• Улучшает SEO и видимость в поиске
• Даёт rich snippets (звёзды, цены, отзывы)
• Помогает поисковикам правильно понять содержимое
• Увеличивает CTR (click-through rate)

Используй JSON-LD — это новый стандарт и рекомендуется Google.