Микроразметка — это структурированные данные, которые помогают поисковым системам и социальным сетям лучше понимать содержание веб-страниц. Наиболее популярные стандарты микроразметки: Schema.org (используется для SEO) и Open Graph (используется для социальных сетей, таких как Facebook).

Разберем, как они работают и приведем примеры кода. А если это для вас слжно, вы всегда можете обратиться к профессионалам, например в Digital агентство https://soroka-marketing.ru/

1. Schema.org: микроразметка для SEO

Schema.org — это стандарт разметки, разработанный Google, Bing, Yahoo и Yandex. Он позволяет поисковым системам выделять ключевые элементы страницы и отображать их в расширенных сниппетах (например, рейтинг товаров, рецепты, события).

Форматы Schema.org

Schema.org можно внедрять на сайт тремя способами:

• JSON-LD (рекомендуемый Google)
• Microdata (встраивается в HTML)
• RDFa (менее распространенный)

Пример Schema.org для статьи (JSON-LD)

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Что такое микроразметка сайта и как её настроить",
  "author": {
    "@type": "Person",
    "name": "Иван Иванов"
  },
  "datePublished": "2025-02-27",
  "dateModified": "2025-02-27",
  "publisher": {
    "@type": "Organization",
    "name": "SEO Блог",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.png"
    }
  },
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://example.com/microdata"
  }
}
</script>

Этот код помогает Google и другим поисковикам лучше индексировать статью, указывая ее название, автора, дату публикации и издателя.

Пример Schema.org для интернет-магазина (карточка товара)

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "Смартфон iPhone 15",
  "image": "https://example.com/iphone15.jpg",
  "description": "Новый смартфон с 128 ГБ памяти.",
  "brand": {
    "@type": "Brand",
    "name": "Apple"
  },
  "offers": {
    "@type": "Offer",
    "priceCurrency": "RUB",
    "price": "99990",
    "availability": "https://schema.org/InStock",
    "url": "https://example.com/iphone15"
  }
}
</script>

Этот фрагмент разметки позволит отображать цену, наличие товара и бренд в выдаче Google.

2. Open Graph: микроразметка для соцсетей

Open Graph (OG) используется соцсетями (Facebook, ВКонтакте, Twitter) для формирования превью страниц при публикации ссылок.

Основные мета-теги Open Graph

<meta property="og:title" content="Что такое микроразметка сайта?" />
<meta property="og:description" content="Разбираем, что такое микроразметка Schema.org и Open Graph и как ее настроить." />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/microdata" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="SEO Блог" />

Пример Open Graph для интернет-магазина

<meta property="og:title" content="iPhone 15 – новинка 2025 года!" />
<meta property="og:description" content="Купите iPhone 15 с доставкой по всей России." />
<meta property="og:image" content="https://example.com/iphone15.jpg" />
<meta property="og:url" content="https://example.com/iphone15" />
<meta property="og:type" content="product" />
<meta property="product:price:amount" content="99990" />
<meta property="product:price:currency" content="RUB" />

Этот код поможет красиво оформить карточку товара при публикации в Facebook или ВКонтакте.

Сравнение Schema.org и Open Graph

Заключение

• Schema.org помогает поисковым системам лучше индексировать страницы и отображать расширенные сниппеты.
• Open Graph делает публикации в соцсетях более привлекательными.
• Использование обоих стандартов микроразметки повышает видимость сайта и улучшает пользовательский опыт.

Рекомендуется использовать Schema.org в формате JSON-LD и Open Graph одновременно для достижения максимального эффекта.