Open Graph разметка

Open Graph разметка определяет, как ссылка на ваш сайт выглядит в соцсетях и мессенджерах: какой заголовок увидят, какое описание прочитают, какая картинка появится в превью. Без неё площадка собирает карточку из случайных фрагментов страницы или не показывает её вовсе. Ниже — синтаксис тегов, примеры для разных типов страниц и порядок внедрения, который можно повторить без разработчика.

Open Graph — протокол разметки, который придумали в Facebook (соцсеть компании Meta, признанной в России экстремистской), а сейчас его понимают ВКонтакте, Telegram, Twitter (X), LinkedIn и большинство мессенджеров. Работает просто: вы добавляете в <head> страницы meta-теги с атрибутом property, а соцсеть при первом репосте читает их и строит карточку ссылки.

Польза практическая:

• растёт CTR из соцсетей и мессенджеров — аккуратная карточка с картинкой и понятным заголовком собирает больше переходов, чем голая ссылка;
• публикации выглядят одинаково у всех, кто делится вашей страницей, — вы контролируете заголовок и описание, а не отдаёте их на откуп алгоритму площадки;
• репосты выглядят опрятно, без обрезанных картинок и «мусорного» текста из первого абзаца.

На классическую SEO-выдачу Open Graph напрямую не влияет: Яндекс и Google ранжируют страницу по своим сигналам, а не по og-тегам. Но красивое превью чаще открывают, ссылки из соцсетей приводят больше посетителей — и это уже работает на трафик и поведенческие факторы.

Где встречается разметка: Facebook, ВКонтакте, Telegram, Twitter (X), LinkedIn, WhatsApp и другие мессенджеры. У каждой площадки свои нюансы отображения, но база одна — теги Open Graph.

Теги размещают внутри <head>. У каждого — атрибут property с названием и атрибут content со значением. Порядок тегов не важен, регистр в названиях лучше соблюдать: og:title, а не OG:Title.

Обязательный минимум:

• og:title — заголовок карточки. Не копируйте сюда title из SEO-шаблона вслепую: длинные хвосты вроде «купить с доставкой по России» в превью обрезаются.
• og:type — тип объекта: website для главной, article для статьи, product для товара, video.other для видео.
• og:image — картинка превью. Абсолютный URL, иначе соцсеть её не найдёт.
• og:url — канонический адрес страницы. Если им пренебречь, лайки и репосты могут «размазаться» по разным вариантам ссылки.
• og:description — описание под заголовком. Необязательный формально, но без него карточка выглядит пустой.

Дополнительные теги, которые стоит добавить:

• og:site_name — название сайта, показывается мелким шрифтом над заголовком;
• og:locale — язык и регион, например ru_RU;
• og:image:width и og:image:height — размеры картинки в пикселях, помогают площадке быстрее отрисовать превью без «прыжков» вёрстки;
• og:image:alt — текстовое описание изображения для доступности.

Пример блока meta для типовой страницы статьи:

<meta property="og:type" content="article">
<meta property="og:title" content="Как настроить Open Graph на сайте">
<meta property="og:description" content="Пошаговая инструкция: теги, примеры кода и проверка превью в соцсетях.">
<meta property="og:url" content="https://example.com/blog/open-graph/">
<meta property="og:image" content="https://example.com/img/og-open-graph.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Пример карточки ссылки в мессенджере">
<meta property="og:site_name" content="Example">
<meta property="og:locale" content="ru_RU">

Набор тегов зависит от того, что вы публикуете. Для статьи и блога важен тип article: заголовок, описание, картинка, дата публикации. Для главной сайта обычно ставят website и общее описание компании или проекта.

Для товара добавляют цену и валюту — og:type со значением product, product:price:amount и product:price:currency. Это не влияет на выдачу, но площадки могут подтянуть стоимость в карточку, а описание лучше писать про сам товар, а не про магазин.

Для видео указывают og:type со значением video.other, og:video со ссылкой на файл или плеер и размеры видео. Для музыки — og:type со значением music.song и og:audio. Без этих дополнительных тегов площадки не поймут, что в ссылке медиаобъект.

Требования к изображению og:image:

Twitter Card — отдельный набор тегов с префиксом twitter:. Он не заменяет Open Graph, а дополняет его: если Twitter-тегов нет, X во многих случаях берёт данные из og-разметки, но гарантии нет.

Ключевые теги:

• twitter:card — тип карточки: summary с маленькой картинкой слева или summary_large_image с широкой картинкой сверху;
• twitter:title — заголовок;
• twitter:image — картинка;
• twitter:description — описание.

Правило приоритета: если тег twitter:* задан, X использует его, а не соответствующий og-тег. Если не задан — падает на Open Graph. Поэтому минимальный набор для корректного превью в Twitter (X): twitter:card со значением summary_large_image, twitter:title, twitter:description, twitter:image с абсолютным URL картинки.

Есть два пути. Первый — ручной: теги прописывают прямо в шаблон <head> или выводят значения из CMS. На странице статьи в шаблоне подставляют $post.title, $post.description, $post.image — тогда у каждого поста своя карточка.

Второй — плагины и модули популярных CMS. У большинства движков есть готовые расширения для мета-тегов: вы заполняете поля в админке, плагин сам вставляет блок в head. Настройка занимает несколько минут и не требует правок кода.

Чек-лист внедрения:

• определите типы страниц: главная, статьи, товары, видео, служебные;
• для каждого типа задайте уникальные og:title и og:description — не дублируйте их между страницами;
• проверьте, что og:url и og:image — абсолютные адреса с https;
• сделайте отдельную картинку под каждую страницу или хотя бы под каждый раздел;
• убедитесь, что блок не дублируется в шаблоне.

Типичные ошибки: относительные адреса вида /img/og.png — площадка их не подхватит; два блока мета с разными значениями; отсутствие og:image — карточка получается текстовой; заголовок в og:title длиннее, чем помещается в превью.

Прежде чем отправлять ссылку в чат, посмотрите, как она будет выглядеть. Сервис nextin.ru показывает превью так, как его увидят в Telegram и ВКонтакте, и подсказывает, каких тегов не хватает.

1. Откройте проверку Open Graph и вставьте адрес страницы, которую хотите проверить.
2. Запустите проверку — сервис загружает страницу и строит карточку, как в Telegram и ВКонтакте.
3. Посмотрите на превью: заголовок, описание, картинку. Сразу видно, обрезается ли текст и уместна ли картинка.
4. Проверьте блок с тегами: og:title, og:description, og:image, og:url, og:type, og:site_name и их длину. Отдельно — картинку: открывается ли она, её размер, пропорции, вес и формат.
5. Изучите блок Twitter Card: twitter:card и запасные теги, которые используют X и часть агрегаторов.
6. Скопируйте готовую разметку из нижней части страницы и вставьте её в <head>, если тегов не хватало.

Title и description для поисковой выдачи проверяет отдельный SEO-анализ страницы, а сразу для списка адресов — массовая проверка мета-тегов в nextin.ru.

Инструментов несколько: отладчик Facebook, валидаторы и встроенные средства соцсетей, а также проверка превью ссылки в Telegram и ВКонтакте. Результат читайте по трём пунктам: заголовок и описание подтянулись, картинка открылась и её размер в порядке, критичных ошибок в тегах нет. Критичны отсутствие og:image и относительный адрес картинки — с ними превью не появится.

Если теги исправлены, а площадка показывает старое превью — она закешировала карточку. Сбросьте кэш:

• для Telegram отправьте ссылку боту @WebpageBot — он обновит карточку;
• для ВКонтакте воспользуйтесь страницей vk.com/dev/pages.clearCache;
• для Facebook используйте отладчик ссылок.

Изменения не всегда видны сразу: после сброса кэша отправьте ссылку ещё раз или повторите обход. Если превью не обновилось, проверьте, не осталось ли на странице старого блока тегов выше нового.

Заголовок в og:title держите коротким — 60–70 символов, без длинных хвостов. Описание — 110–160 символов: в карточке оно обрезается, и обрывок на полуслове выглядит неаккуратно. Проверяйте, чтобы первые слова описания передавали суть: часть площадок показывает только их.

Картинку подбирайте под формат карточки. Для широкой карточки в Twitter (X) и превью в Telegram — горизонталь 1200×630, для квадратной миниатюры — изображение с центровым смыслом, который не обрежется. Не ставьте на картинку текст мелким шрифтом: в превью он не читается.

Кнопки «Поделиться» на сайте сами используют Open Graph — при клике площадка берёт заголовок, описание и картинку из тегов. Если разметка пустая, кнопка сформирует невнятное превью, и пользователь отменит репост.

• Определите типы страниц: главная, статьи, товары, видео.
• Задайте теги для каждого типа: обязательные og:title, og:type, og:image, og:url плюс описание и дополнительные.
• Проверьте превью и ошибки через сервис проверки Open Graph.
• Сбросьте кэш в соцсети и убедитесь, что карточка обновилась.
• После редизайна или смены шаблона прогоните проверку заново — при правках вёрстки теги теряются чаще всего.

Что такое Open Graph разметка простыми словами?

Это набор meta-тегов в коде страницы, по которым соцсеть строит карточку ссылки: заголовок, описание, картинку. Без разметки площадка собирает превью из случайных кусков страницы или не показывает его.

Какие теги Open Graph обязательны для сайта?

Базовый набор: og:title, og:type, og:image и og:url. Описание og:description формально необязательно, но без него карточка пустая — добавляйте его на каждую страницу.

Влияет ли Open Graph на позиции в Яндексе и Google?

Напрямую на позиции — нет. Но аккуратное превью чаще открывают, ссылки из соцсетей и мессенджеров приводят больше посетителей, а это уже работает на трафик.

Какой размер картинки нужен для og:image?

1200×630 пикселей, пропорция 1,91:1, формат JPG или PNG. Картинка уже 600 px по ширине показывается маленькой миниатюрой сбоку, а не широким баннером.

Почему соцсеть не обновляет превью после изменения тегов?

Площадка закешировала карточку. В Telegram отправьте ссылку боту @WebpageBot, во ВКонтакте сбросьте кэш через vk.com/dev/pages.clearCache, затем проверьте превью повторно.

Можно ли настроить Open Graph без программиста через CMS?

Да. В популярных CMS есть готовые плагины и модули для мета-тегов: вы заполняете поля в админке, расширение само вставляет блок в head. Ручной вариант — правка шаблона, но её обычно делает разработчик.