Open Graph теги

Open Graph (OG) — это протокол метаданных, разработанный для того, чтобы управлять тем, как контент веб-страниц отображается при публикации в социальных сетях. Каждый тег OG описывает определённый аспект страницы: заголовок, описание, изображение и тип контента. В сочетании с MDX, который позволяет встраивать JSX в Markdown, Open Graph теги становятся мощным инструментом для динамического управления метаданными в документации, блогах и маркетинговых страницах.

Структура Open Graph тегов

Стандартный набор тегов включает:

  • og:title — заголовок страницы.
  • og:description — краткое описание контента.
  • og:image — ссылка на изображение для превью.
  • og:url — канонический URL страницы.
  • og:type — тип контента (website, article, video и др.).
  • og:locale — локализация страницы (например, ru_RU).
  • og:site_name — название сайта.

Пример HTML-разметки:

<meta property="og:title" content="MDX и Open Graph">
<meta property="og:description" content="Использование MDX для управления Open Graph тегами">
<meta property="og:image" content="https://example.com/preview.png">
<meta property="og:url" content="https://example.com/mdx-og">
<meta property="og:type" content="article">
<meta property="og:locale" content="ru_RU">
<meta property="og:site_name" content="Документация по MDX">

Интеграция Open Graph тегов в MDX

MDX позволяет использовать React-компоненты прямо в Markdown. Это открывает возможности динамической генерации OG тегов на основе пропсов или контента документации. Для этого часто создают отдельный компонент <SEO>.

Пример компонента:

import React from 'react';
import Head from 'next/head';

const SEO = ({ title, description, image, url }) => (
  <Head>
    <meta property="og:title" content={title} />
    <meta property="og:description" content={description} />
    <meta property="og:image" content={image} />
    <meta property="og:url" content={url} />
    <meta property="og:type" content="article" />
    <meta property="og:locale" content="ru_RU" />
  </Head>
);

export default SEO;

Использование в MDX:

import SEO from './components/SEO'

<SEO 
  title="MDX и Open Graph" 
  description="Детальный разбор интеграции Open Graph тегов в MDX" 
  image="https://example.com/preview.png" 
  url="https://example.com/mdx-og" 
/>

Динамическая генерация OG тегов

Для проектов на Next.js или Gatsby MDX теги можно генерировать на основе frontmatter в каждом документе:

---
title: "MDX и Open Graph"
description: "Подробное руководство по Open Graph тегам в MDX"
image: "/images/og-preview.png"
---

<SEO 
  title={frontmatter.title}
  description={frontmatter.description}
  image={frontmatter.image}
  url={`https://example.com${router.asPath}`}
/>

Такой подход обеспечивает:

  • Автоматическое обновление метаданных при изменении frontmatter.
  • Согласованность SEO и социальных превью.
  • Простое масштабирование на большие проекты с десятками или сотнями MDX-документов.

Взаимодействие с социальными сетями

  • Facebook: проверка корректности тегов через Sharing Debugger.
  • Twitter: несмотря на собственный протокол Twitter Cards, поддерживает Open Graph.
  • LinkedIn: использует OG теги аналогично Facebook для предпросмотра ссылок.

Особое внимание стоит уделять размеру изображений: оптимальные размеры для Facebook и LinkedIn — минимум 1200×630 пикселей, для Twitter — 1200×675 пикселей. MDX позволяет динамически подставлять изображения, что упрощает подготовку к публикации.

Советы по организации MDX-контента с OG

  1. Централизация SEO-компонентов: один компонент <SEO> для всего проекта облегчает поддержку.
  2. Использование frontmatter: хранение ключевых метаданных в YAML-блоке позволяет легко интегрировать их в OG теги.
  3. Проверка и кэширование: социальные сети кэшируют превью, поэтому при обновлении OG тегов рекомендуется обновлять URL или использовать query-параметры для сброса кэша.

Особенности для статических и динамических сайтов

  • Статические сайты: генерация OG тегов на этапе сборки с использованием frontmatter и MDX-обработчиков.
  • Динамические приложения: тег <SEO> можно использовать с серверным рендерингом, обеспечивая корректное отображение OG при первом запросе страницы.

Расширенные возможности

  • Использование og:video для видео-контента.
  • Поддержка дополнительных локализаций через og:locale:alternate.
  • Интеграция с CMS, где frontmatter генерируется автоматически из полей публикации.

MDX и Open Graph теги совместно создают гибкую архитектуру для управления метаданными, позволяя комбинировать простоту Markdown с мощью React-компонентов и динамического контента.

Оглавление