Предпросмотр Open Graph — проверьте карточки соцсетей

Теги Open Graph определяют, как выглядит ваша страница при каждом расшаривании: отсутствие изображения или заголовка стоит вам кликов и репостов. Вставьте теги og:/twitter:card или URL, чтобы увидеть карточку Facebook, X и в стиле WhatsApp, найти недостающие поля и исправить пропорции изображения. Шаги: вставьте теги или загрузите URL, посмотрите три карточки и таблицу полей, затем дополните недостающее. Режим вставки работает на вашем устройстве; режим URL один раз загружает страницу и не сохраняет её. Пример: страница с og:image 1200×630 публикуется как большая карточка.

Вставить теги

Как это работает

Просмотр разбирает теги og:/twitter:, которые вы вставляете (или извлекает их из HTML, загруженного по URL), и рисует три карточки. Facebook показывает изображение 1.91:1 слева, под ним — заголовок, описание и домен. X следует twitter:card: summary_large_image показывает большое изображение сверху, summary — маленькое рядом с текстом. Мессенджеры вроде WhatsApp показывают одну большую карточку. Таблица помечает og:title, og:description и og:image как обязательные и перечисляет необязательные.

Правила предпросмотра

Вот размеры и запасные варианты, которые используют платформы, согласно протоколу Open Graph и документации X Cards.

Обязательные поля: og:title, og:description и og:image. Отсутствующие помечаются, чтобы вы исправили их до публикации.
og:image размером 1200×630 px (1.91:1) работает на всех крупных платформах. Facebook теперь также поддерживает кадрирование 2:1 и 1:1; мелкие изображения часто растягиваются и выглядят размытыми.
twitter:card summary_large_image соответствует большому изображению, summary — маленькому. Без twitter:card платформы выводят карточку summary из тегов og:.
Когда og:title или og:image отсутствуют, платформы берут HTML-заголовок, meta description и первую картинку страницы.
Размер измеряется загрузкой изображения в браузере; если загрузить не удаётся (заблокировано, офлайн или неверный URL), проверка сообщает «неизвестно».

Пример

Пример тегов описывает статью с og:image 1200×630 и twitter:card summary_large_image. Предпросмотр показывает карточку Facebook с изображением слева, большую карточку X, карточку в стиле WhatsApp и таблицу, где все обязательные поля присутствуют.

Подходящие сценарии

Перед публикацией статьи или лендинга вставьте теги один раз и убедитесь, что карточка корректно выглядит во Facebook, X и мессенджерах.
Когда общая ссылка не показывает изображение или показывает обрезанное, вставьте теги og:, чтобы проверить, отсутствует ли og:image или неверна пропорция.
После обновления CMS или темы загрузите живой URL и проверьте, что теги og: по-прежнему соответствуют странице.

Frequently asked questions

Что будет, если на странице нет тегов Open Graph?

Facebook, X и WhatsApp собирают превью из HTML-заголовка, meta description и первой картинки страницы. Карточка может быть неполной или с неверной картинкой, поэтому и существуют обязательные поля og:.

Какого размера должна быть og:image?

Безопасный размер — 1200×630 px, пропорция 1.91:1, которую принимают все крупные платформы. Facebook теперь также поддерживает кадрирование 2:1 и 1:1. Очень мелкие изображения часто растягиваются и выглядят размытыми.

Как twitter:card связан с тегами og:?

twitter:card выбирает макет: summary_large_image показывает широкое изображение, summary — маленькое. Если twitter:title, twitter:description или twitter:image отсутствуют, X использует соответствующий тег og:.

Что делает платформа, если og:image отсутствует?

Она берёт первую картинку из HTML страницы или показывает карточку без изображения. Отсутствие og:image — самая частая причина, почему у общей ссылки нет превью-картинки.

Почему проверка пропорции сообщает «неизвестно»?

Предпросмотр пытается загрузить og:image загрузкой изображения в браузере, чтобы прочитать реальный размер. Если изображение заблокировано, офлайн, медленное или сервер отклоняет запрос, размер прочитать нельзя, и проверка сообщает неизвестно.

Мои теги куда-то загружаются?

Нет. В режиме вставки разбор и предпросмотр происходят на вашем устройстве. Режим URL один раз загружает страницу через наш worker и не сохраняет её.

Вопросы и отзывы

Что-то неясно, сломано или отсутствует? Напишите сообщение ниже — мы читаем каждую заметку об этих инструментах.