OG Preview — превью при шаринге

Open Graph + Twitter Card. Покажем как страница выглядит при шаринге в Facebook, Twitter, Telegram, WhatsApp, VK. Проверим og:image размер, HTTPS, alt, fallbacks.

Что мы проверяем

Open Graph (Facebook, LinkedIn, WhatsApp, Telegram, VK, Slack, Discord)

  • og:title — заголовок (30-65 знаков оптимум)
  • og:description — описание (100-160 знаков)
  • og:image — превью-картинка (1200×630, JPEG/PNG, HTTPS, ≥600×315 минимум)
  • og:image:alt — описание для screen readers (доступность)
  • og:image:width + og:image:height — для быстрого парсинга соцсетями
  • og:url — каноническая ссылка
  • og:type — website / article / product
  • og:site_name — имя бренда
  • og:locale — ru_RU / en_US

Twitter Card

  • twitter:card — `summary_large_image` (рекомендовано) или `summary` (мелко)
  • twitter:title, twitter:description, twitter:image — fallback к OG
  • twitter:site, twitter:creator — @username бренда и автора

HTTP-проверка og:image

Делаем HEAD-запрос к og:image. Считаем status, Content-Type, Content-Length, HTTPS. Без HTTPS картинку не покажет ни одна современная платформа.

Проверка размеров

  • Идеально: 1200×630 (соотношение 1.91:1) — стандарт FB/LinkedIn
  • Минимум: 600×315 (FB не показывает превью при меньшем)
  • Twitter Card large: 1200×675 (1.78:1) — предпочтительно для Twitter
  • Telegram: 1200×600+, поддерживает оба соотношения
  • WhatsApp: 300×300 минимум, любит квадратные

Что значит Score

  • 80-100 — превью красивое во всех соцсетях, все теги на месте
  • 50-79 — основные теги есть, но отсутствуют size hints или alt
  • 0-49 — нет og:image или картинка недоступна (превью без картинки)

FAQ

Можно ли использовать одну картинку для всех соцсетей?

Да, обычно достаточно одной 1200×630 PNG/JPEG. Twitter принимает и FB-стандарт. WhatsApp работает с прямоугольными. Если нужно идеально — можно через twitter:image добавить отдельную 1200×675 для Twitter Card large.

Почему og:image должен быть HTTPS?

С 2017 Facebook не показывает HTTP-картинки в превью. Twitter, LinkedIn, Telegram аналогично. Если ваш сайт HTTPS, но og:image указан через HTTP — превью будет без картинки.

Что такое article:author и зачем?

Open Graph extension для статей: article:author, article:published_time, article:section, article:tag. LinkedIn использует для отображения авторства. Telegram Instant View может использовать для red-mode preview.

WebP можно использовать для og:image в 2026?

Twitter поддерживает WebP с 2024. Facebook — с 2023. Telegram, WhatsApp — да. LinkedIn — частично (некоторые WebP не открывает). Безопаснее JPEG/PNG для максимальной совместимости. Если хотите WebP — продублируйте PNG fallback через og:image:secure_url.

Как Telegram превью устроено?

Telegram парсит og:title, og:description, og:image. Если у вас настроен Instant View — открывается полный режим без выхода из мессенджера. Для важных страниц стоит сделать IV-template.

Связанные инструменты