Kodokon kodokon.com

Техническое SEO: Open Graph и структурированные данные

Управляй тем, как твои страницы выглядят в превью в соцсетях, с помощью Open Graph и нацеливайся на расширенные результаты через schema.org в формате JSON-LD.

8 мин · 3 вопросов

Открыть этот урок в Kodokon

Когда ссылкой делятся в соцсети или мессенджере, скрапер читает HTML, чтобы собрать карточку превью. Этой карточкой управляет протокол Open Graph: og:title, og:description, og:type, og:url и, главное, og:image, который должен быть абсолютным URL (относительные пути большинство платформ игнорирует). Ловушка из практики: эти скраперы не выполняют JavaScript. Если твои теги подставляет фреймворк на стороне клиента, превью останется пустым; они должны присутствовать в изначально отданном HTML (SSR или статическая генерация).

HTML
<meta property="og:title"
      content="The filter coffee guide">
<meta property="og:type" content="article">
<meta property="og:url"
      content="https://example.com/cafe-filtre">
<meta property="og:image"
      content="https://example.com/cover-1200.jpg">
<meta property="og:description"
      content="Ratios and techniques for a clean cup.">
Базовый набор Open Graph с абсолютным og:image

База дополняется двумя вещами. <link rel="canonical"> указывает эталонный URL, когда страница доступна по нескольким адресам (параметры отслеживания, постраничная навигация): это твоя защита от дублирующегося контента. И теги Twitter Cards: платформа берёт содержимое из Open Graph, но twitter:card всё равно нужен, чтобы выбрать формат отображения, в частности summary_large_image.

HTML
<link rel="canonical"
      href="https://example.com/cafe-filtre">
<meta name="twitter:card"
      content="summary_large_image">
Canonical и формат карточки: две строки, которые окупаются

Структурированные данные schema.org описывают поисковым системам смысл твоего содержимого: статья, товар, рецепт, хлебные крошки, FAQ. Существует три синтаксиса (микроданные, RDFa, JSON-LD), но Google рекомендует JSON-LD: самодостаточный блок внутри <script type="application/ld+json">, отделённый от визуальной разметки и потому простой в генерации и поддержке. Именно эта разметка делает твою страницу кандидатом на расширенные результаты: звёзды отзывов, цены и даты событий прямо в выдаче.

HTML
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "The filter coffee guide",
  "datePublished": "2026-05-12",
  "author": {
    "@type": "Person",
    "name": "Ana Costa"
  }
}
</script>
Article в JSON-LD: поисковики его читают, но он никогда не отображается

Проверка знаний

Убедись, что запомнил ключевые моменты этого урока.

  1. Какое требование предъявляется к значению og:image?
    • Это должен быть абсолютный URL, включая домен
    • Он должен указывать на файл в формате WebP
    • Он должен быть закодирован в base64 прямо внутри тега
  2. Почему Google рекомендует JSON-LD, а не микроданные?
    • JSON-LD выполняется как JavaScript, поэтому он быстрее
    • JSON-LD - самодостаточный блок, отделённый от видимой разметки и простой в генерации
    • Микроданные больше не читаются поисковыми системами
  3. Что гарантирует корректная и полная разметка schema.org?
    • Расширенные результаты, которые показываются всегда
    • Прямой рост позиций страницы в выдаче
    • Право на расширенные результаты, без гарантии показа