Что такое микроразметка?

2.3 Middle🔥 141 комментариев

#HTML и CSS

Комментарии (1)

🐱

claude-haiku-4.5PrepBro AI2 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Микроразметка (Schema Markup): структурирование данных для SEO и поисковых систем

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

Что такое микроразметка на практике

Микроразметка добавляет семантическое значение в HTML. Например, вместо просто текста "John Doe", вы указываете "это имя человека":

<!-- Без микроразметки: просто текст -->
<div>John Doe, главный инженер, 5 лет опыта</div>

<!-- С микроразметкой: структурированные данные -->
<div itemscope itemtype="https://schema.org/Person">
  <span itemprop="name">John Doe</span>,
  <span itemprop="jobTitle">главный инженер</span>,
  <span itemprop="experience">5 лет опыта</span>
</div>

Форматы микроразметки

Существует несколько способов добавления микроразметки:

1. Microdata (itemscope, itemtype, itemprop)

<!-- Информация о статье -->
<article itemscope itemtype="https://schema.org/BlogPosting">
  <h1 itemprop="headline">Основы микроразметки</h1>
  <p>
    Автор:
    <span itemprop="author" itemscope itemtype="https://schema.org/Person">
      <span itemprop="name">Иван Петров</span>
    </span>
  </p>
  <time itemprop="datePublished" datetime="2024-01-15">15 января 2024</time>
  <p itemprop="articleBody">Микроразметка помогает поисковикам...</p>
</article>

2. JSON-LD (JavaScript Object Notation for Linking Data) — рекомендуемый метод

JSON-LD это современный и самый простой способ. Google рекомендует именно JSON-LD:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "Основы микроразметки",
  "author": {
    "@type": "Person",
    "name": "Иван Петров"
  },
  "datePublished": "2024-01-15",
  "image": "https://example.com/image.jpg",
  "articleBody": "Микроразметка помогает поисковикам понять содержимое..."
}
</script>

3. RDFa (Resource Description Framework in Attributes)

<div vocab="https://schema.org/" typeof="BlogPosting">
  <h1 property="headline">Основы микроразметки</h1>
  <span property="author" typeof="Person">
    <span property="name">Иван Петров</span>
  </span>
  <time property="datePublished" datetime="2024-01-15">15 января 2024</time>
</div>

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

Schema.org — это стандартный набор типов данных. Вот самые используемые:

Person (Человек)

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Person",
  "name": "Jane Doe",
  "email": "jane@example.com",
  "telephone": "+1-100-123-4567",
  "jobTitle": "Senior Software Engineer",
  "url": "https://example.com/jane"
}
</script>

Organization (Организация)

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "TechCorp",
  "url": "https://techcorp.com",
  "logo": "https://techcorp.com/logo.png",
  "description": "Компания разработки ПО",
  "sameAs": [
    "https://twitter.com/techcorp",
    "https://facebook.com/techcorp"
  ]
}
</script>

Product (Товар)

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "iPhone 15 Pro",
  "description": "Флагманский смартфон Apple",
  "image": "https://example.com/iphone.jpg",
  "brand": {
    "@type": "Brand",
    "name": "Apple"
  },
  "offers": {
    "@type": "Offer",
    "price": "999",
    "priceCurrency": "USD",
    "availability": "https://schema.org/InStock"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.5",
    "reviewCount": "1250"
  }
}
</script>

Event (Событие)

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Event",
  "name": "Конференция Frontend 2024",
  "startDate": "2024-06-15T09:00:00",
  "endDate": "2024-06-15T18:00:00",
  "location": {
    "@type": "Place",
    "name": "Moscow Convention Center",
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "123 Main St",
      "addressLocality": "Moscow",
      "postalCode": "101000"
    }
  },
  "organizer": {
    "@type": "Organization",
    "name": "TechEvents"
  },
  "url": "https://example.com/conference"
}
</script>

Recipe (Рецепт)

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Recipe",
  "name": "Паста Болоньезе",
  "author": {
    "@type": "Person",
    "name": "Марко Розси"
  },
  "prepTime": "PT15M",
  "cookTime": "PT30M",
  "totalTime": "PT45M",
  "recipeYield": "4",
  "recipeIngredient": [
    "500 граммов спагетти",
    "400 граммов говяжьего фарша",
    "2 зубца чеснока"
  ],
  "recipeInstructions": [
    {
      "@type": "HowToStep",
      "text": "Отварите спагетти"
    },
    {
      "@type": "HowToStep",
      "text": "Обжарьте фарш"
    }
  ],
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "5",
    "reviewCount": "150"
  }
}
</script>

Практический пример: E-commerce страница с microdata

<!DOCTYPE html>
<html>
<head>
  <title>iPhone 15 Pro - купить онлайн</title>
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Product",
    "name": "iPhone 15 Pro",
    "description": "Смартфон Apple последнего поколения",
    "image": [
      "https://example.com/phone-1.jpg",
      "https://example.com/phone-2.jpg"
    ],
    "brand": {
      "@type": "Brand",
      "name": "Apple"
    },
    "offers": {
      "@type": "Offer",
      "url": "https://example.com/iphone15pro",
      "priceCurrency": "USD",
      "price": "999",
      "availability": "https://schema.org/InStock",
      "seller": {
        "@type": "Organization",
        "name": "Example Electronics"
      }
    },
    "aggregateRating": {
      "@type": "AggregateRating",
      "ratingValue": "4.8",
      "reviewCount": "2340",
      "bestRating": "5",
      "worstRating": "1"
    },
    "review": [
      {
        "@type": "Review",
        "author": {
          "@type": "Person",
          "name": "John Smith"
        },
        "datePublished": "2024-01-10",
        "reviewRating": {
          "@type": "Rating",
          "ratingValue": "5"
        },
        "reviewBody": "Отличный смартфон, очень доволен!"
      }
    ]
  }
  </script>
</head>
<body>
  <h1>iPhone 15 Pro</h1>
  <p>999 USD</p>
  <p>В наличии</p>
  <p>Рейтинг: 4.8 из 5 (2340 отзывов)</p>
</body>
</html>

Зачем нужна микроразметка

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

Google использует структурированные данные для лучшего понимания контента и может показывать Rich Snippets (расширенные результаты):

ОБЫЧНЫЙ РЕЗУЛЬТАТ ПОИСКА:
Паста Болоньезе - рецепт
Этот рецепт пасты болоньезе готовится за 45 минут...

РАСШИРЕННЫЙ РЕЗУЛЬТАТ (Rich Snippet):
Паста Болоньезе - рецепт
Паста Болоньезе - рецепт от Марко Розси
★★★★★ (150 отзывов)
Время приготовления: 45 минут
Выход: 4 порции

2. Rich Cards и Knowledge Panels

Когда вы ищете известного человека или компанию, Google может показать специальную карточку в поиске — это результат микроразметки.

3. Голосовой поиск и AI

Голосовые ассистенты (Google Assistant, Яндекс.Алиса) могут лучше понимать контент с микроразметкой:

Голосовой запрос: "Какой рейтинг у iPhone 15?"
Ассистент находит микроразметку Product с aggregateRating
Ответ: "iPhone 15 Pro имеет рейтинг 4.8 из 5 звезд"

4. Социальные сети и обмен ссылками

Open Graph и Twitter Card работают вместе с микроразметкой для красивого предпросмотра:

<meta property="og:title" content="iPhone 15 Pro">
<meta property="og:image" content="https://example.com/phone.jpg">
<meta property="og:description" content="Новый смартфон Apple">

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "iPhone 15 Pro",
  "image": "https://example.com/phone.jpg",
  "description": "Новый смартфон Apple"
}
</script>

Как проверить микроразметку

1. Google Rich Results Test

https://search.google.com/test/rich-results

Вставляете URL или HTML код и видите, как Google интерпретирует разметку.

2. Structured Data Testing Tool

https://www.google.com/webmasters/markup-helper/

Помогает создавать и проверять микроразметку.

3. Яндекс Вебмастер

https://webmaster.yandex.ru/

Проверка структурированных данных для Яндекса.

Лучшие практики

<!-- ✅ ХОРОШО: JSON-LD, рекомендуется Google -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "Статья",
  "author": { "@type": "Person", "name": "John" },
  "datePublished": "2024-01-15"
}
</script>

<!-- ❌ ПЛОХО: Некорректная структура -->
<script type="application/ld+json">
{
  "@type": "BlogPosting",
  "headline": "Статья"
  // Без @context
}
</script>

<!-- ❌ ПЛОХО: Вложенные ошибки -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "author": "John Doe" // Должно быть объект Person
}
</script>

<!-- ✅ ХОРОШО: Правильно структурировано -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "author": {
    "@type": "Person",
    "name": "John Doe"
  }
}
</script>

Поддержка в React/Next.js

// React компонент с микроразметкой
export function ProductPage({ product }) {
  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify({
            "@context": "https://schema.org",
            "@type": "Product",
            "name": product.name,
            "price": product.price,
            "image": product.image,
            "aggregateRating": {
              "@type": "AggregateRating",
              "ratingValue": product.rating,
              "reviewCount": product.reviews.length
            }
          })
        }}
      />
      
      <h1>{product.name}</h1>
      <p>${product.price}</p>
      <img src={product.image} alt={product.name} />
    </>
  );
}

Итоговый вывод

Микроразметка это:

Структурированные данные в HTML
JSON-LD - самый рекомендуемый формат
Улучшение SEO через Rich Snippets
Помощь поисковикам в понимании контента
Поддержка голосового поиска и AI

Используйте микроразметку для:

E-commerce страниц (товары, цены, рейтинги)
Новостей и статей (автор, дата, изображение)
Событий (дата, место, организатор)
Рецептов (ингредиенты, инструкции)
Контактной информации (люди, организации)