Open Graph — набор meta-тегов в head, по которым соцсеть или мессенджер собирает карточку ссылки. Разметка задаёт заголовок, описание, канонический URL и изображение, но каждая платформа применяет собственный краулер, кеш и правила отображения.
Как работает Open Graph
После вставки ссылки платформа запрашивает URL своим ботом, читает HTML и выбирает метаданные. Чаще всего JavaScript не выполняется, поэтому теги, добавленные после загрузки React-приложением, могут остаться невидимыми. Затем результат кешируется: исправление на сайте не всегда сразу меняет уже созданную карточку.
Open Graph разработан Meta, но используется далеко за пределами Facebook. Telegram, LinkedIn, Slack, Discord и другие продукты читают часть полей и добавляют собственные ограничения. X поддерживает Twitter Cards и может использовать Open Graph как запасной источник. Нельзя гарантировать одинаковый вид во всех клиентах.
Минимальный набор тегов
Протокол называет обязательными og:title, og:type, og:image и og:url. На практике добавьте og:description и og:site_name. Для русского материала используйте og:locale со значением ru_RU; альтернативы указывают через og:locale:alternate. og:url должен совпадать с каноническим публичным адресом без UTM и служебных параметров.
Заголовок и описание пишут для карточки, но без расхождения с содержанием страницы. Не копируйте длинный SEO-title целиком, если он обрезается. Укажите абсолютные HTTPS-адреса изображений. Сервер должен отдавать их боту без cookie, авторизации, referer и выполнения JavaScript.
<meta property="og:type" content="article">
<meta property="og:title" content="Open Graph-разметка 2026: полный гайд">
<meta property="og:description" content="Теги, изображения и проверка карточек ссылок.">
<meta property="og:url" content="https://example.ru/opengraph-guide">
<meta property="og:site_name" content="Название сайта">
<meta property="og:locale" content="ru_RU">
<meta property="og:image" content="https://example.ru/media/opengraph-guide.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Схема тегов Open Graph">
Изображение карточки
Универсальная отправная точка — 1200 × 630 пикселей с отношением около 1,91:1. Держите важный текст и логотип ближе к центру: платформы могут обрезать края или показывать квадратный вариант. Не превращайте карточку в мелкий плакат; заголовок уже будет рядом с изображением.
Укажите og:image:width, og:image:height, og:image:type и og:image:alt. Размер файла должен позволять быструю загрузку. Используйте распространённый JPEG, PNG или поддерживаемый платформой WebP, но для максимальной совместимости проверяйте именно выбранный формат. URL изображения должен возвращать 200 и правильный Content-Type, не 302 на страницу авторизации.
| Проверка изображения | Что требуется |
|---|---|
| URL | Абсолютный HTTPS и стабильный адрес |
| HTTP | 200 без cookie и геоблокировки |
| Формат | Поддерживаемый тип и верный Content-Type |
| Размеры | Указаны width/height; макет выдерживает обрезку |
| Содержание | Крупный объект и безопасные поля |
| Alt | Краткое описание изображения |
Статьи, видео и товары
Для статьи добавляют article:published_time, article:modified_time, article:author и article:section. Даты передают в ISO 8601 с часовым поясом. Авторская ссылка должна вести на устойчивый профиль, если платформа её использует. Не меняйте published_time при редактуре — для этого есть modified_time.
Видео требует og:video и дополнительных полей, но автоматическое воспроизведение зависит от платформы и безопасности источника. Для товаров нет одного универсального набора, который одинаково используют все соцсети. Основные название, описание, URL и изображение важнее экспериментальных product-тегов; цену и наличие синхронизируйте с фактической страницей.
Twitter Cards и обычные meta-теги
Добавьте twitter:card со значением summary_large_image, twitter:title, twitter:description и twitter:image, если важен контролируемый вид в X и совместимых клиентах. Часть полей может быть взята из Open Graph, но явные теги упрощают диагностику. Устаревший Card Validator X больше не является универсальным способом предпросмотра, поэтому проверяйте реальную публикацию в тестовом аккаунте.
Обычные title и meta description остаются нужны для поиска и запасного построения карточки. Canonical и og:url должны указывать на одну публичную версию. Если они расходятся, разные системы могут кешировать разные адреса и объединять реакции непредсказуемо.
SSR, CMS и динамические страницы
В CMS заполняйте Open Graph из данных текущей страницы. Для SPA настройте server-side rendering, static generation или edge-rendering, чтобы первый HTML уже содержал правильные теги. Один набор метаданных из index.html для всех маршрутов создаёт одинаковые карточки и считается ошибкой реализации.
Изображение можно генерировать автоматически из шаблона, но контролируйте переносы, длинные слова, шрифты и экранирование пользовательского текста. Создавайте файл при публикации и храните на постоянном URL. Если использовать один URL и менять байты, кеш платформы может долго показывать старую версию; версионированный путь помогает обновлению.
- Определить шаблоны страниц.
- Сопоставить поля CMS с OG.
- Сгенерировать теги в серверном HTML.
- Подготовить изображения 1200 × 630.
- Проверить доступ без cookie.
- Прогнать валидаторы.
- Сбросить кеш поддерживаемой платформы.
- Проверить реальную карточку.
Сервисы проверки Open Graph
Meta Sharing Debugger показывает, что получил краулер Meta, и позволяет запросить повторный scrape. LinkedIn Post Inspector делает то же для LinkedIn. OpenGraph.xyz и opengraph.dev удобны для независимого предпросмотра тегов, но их картинка не доказывает, что Telegram или Threads смогут загрузить сервер.
Для Telegram нет официального полноценного web-валидатора Open Graph. Проверяйте ссылку в отдельном тестовом чате и учитывайте кеш. Командная строка curl с User-Agent нужного бота помогает сравнить HTTP-ответы, редиректы и head. Никогда не разрешайте доступ только по строке User-Agent: её легко подделать; для защищённого контура используйте опубликованные методы проверки бота.
| Инструмент | Что проверяет |
|---|---|
| Meta Sharing Debugger | Ответ для Meta и повторный scrape |
| LinkedIn Post Inspector | Карточку и кеш LinkedIn |
| OpenGraph.xyz | Независимый разбор основных тегов |
| opengraph.dev | Предпросмотр и диагностику метаданных |
| curl / HTTP-клиент | Статус, редиректы, Content-Type и HTML для заданного UA |
| Тестовая публикация | Фактический вид в конкретном приложении |
Почему карточка не обновляется
Сначала проверьте финальный URL после редиректов и исходный HTML. Затем откройте og:image без авторизации. Типичные причины: теги только в JavaScript, относительный URL, robots или WAF блокирует бота, слишком долгий ответ, неверный Content-Type, TLS-ошибка, изображение слишком велико или платформа сохранила старый кеш.
Если проблема возникает только в Threads или Instagram для российского сервера, диагностика отличается; ей посвящена статья о карточках Meta и российских хостингах. Не меняйте разметку наугад: сравните один и тот же URL из обычного браузера, внешнего региона и от имени краулера.
Частые вопросы
Какие Open Graph-теги обязательны?
Протокол требует og:title, og:type, og:image и og:url. На практике добавьте og:description, og:site_name, locale, размеры и alt изображения.
Почему теги есть в браузере, а карточки нет?
Они могут добавляться JavaScript после первого ответа. Краулеру нужен серверный HTML. Также проверьте доступ к изображению, редиректы, WAF и кеш.
Как обновить старую карточку?
Исправьте опубликованный HTML, затем запросите повторный scrape в инструменте платформы. Иногда помогает новый версионированный URL изображения; срок обновления всё равно задаёт платформа.