Open Graph & Social Preview

Open Graph & Social Preview

Preview how your page looks when shared on Facebook, LinkedIn and X.

Что такое Open Graph и соцпревью?

Инструмент Open Graph и соцпревью читает теги Open Graph и Twitter Card страницы и показывает вживую, как она будет выглядеть при репосте в Facebook, LinkedIn и X. Вы сразу видите, корректны ли заголовок, описание и изображение или их нет, чтобы ваши публикации выглядели профессионально.

Open Graph & Social Preview

Как пользоваться

  1. 1Введите адрес (URL) страницы, которую хотите проверить.
  2. 2Просмотрите превью соцкарточки для Facebook, LinkedIn и X.
  3. 3Найдите и исправьте отсутствующие или неверные теги Open Graph / Twitter.

Как читать результаты

og:title и og:description
Базовые тегиЕсли теги отсутствуют, соцсеть спарсит случайный текст со страницы, сформировав непривлекательный сниппет.
og:image 1200×630
Ключевой элементПревью формирует первое впечатление; отсутствие или малый размер картинки резко снижают кликабельность ссылки.
Размер изображения
До 5 МБСлишком тяжелые файлы отсекаются парсерами по таймауту, из-за чего карточка репоста публикуется без обложки.
Текст на изображении
Внимание к деталямНа экранах смартфонов сниппет сильно масштабируется, поэтому мелкие надписи на картинке станут нечитаемыми.
После правок
Очистка кэшаСоцсети кэшируют сниппеты; после обновления тегов нужно сбросить кэш через официальные отладчики платформ.

Когда использовать

Проверка публикации блога

Контент-маркетологи проверяют новую статью перед репостом в соцсети, чтобы заголовок не обрезался на смартфонах, а обложка отображалась в высоком разрешении без растяжений.

Запуск акций интернет-магазина

Маркетологи тестируют промо-страницы перед анонсом распродажи, убеждаясь, что сниппет выводит свежий баннер со скидкой и точную выгоду вместо устаревшего стандартного превью сайта.

Редизайн и смена CMS

SEO-специалисты после миграции ресурса проверяют шаблоны страниц, чтобы исключить баг, когда движок подставляет одну общую заглушку с логотипом вместо уникальных картинок товаров.

Частые ошибки

Относительный путь к картинке

Указание адреса файла без протокола и домена ломает превью в соцсетях. Краулеры требуют абсолютный URL, обязательно начинающийся с протокола https:// для корректной загрузки изображения.

Неверные пропорции обложки

Использование квадратных изображений 1:1 вместо стандарта 1200×630 пикселей создает серые полосы по бокам либо обрезает важные смысловые элементы на карточках Facebook и LinkedIn.

Избыточный вес файла

Загрузка картинок размером более 5 МБ приводит к таймауту ботов парсинга. Для мгновенного формирования сниппета и экономии мобильного трафика сжимайте изображение до 1 МБ.

Частые вопросы

Для чего нужны теги Open Graph?

Теги Open Graph (og:title, og:description, og:image) задают заголовок, описание и изображение, которые показываются при репосте страницы в соцсетях.

Почему не показывается изображение при репосте?

Может отсутствовать тег og:image, изображение слишком маленькое или устарел кэш платформы; рекомендуемый размер — 1200×630 пикселей.

Чем отличаются Twitter Card и Open Graph?

X (Twitter) сначала использует теги Twitter Card и переходит к Open Graph, если их нет; определять оба — самый надёжный путь.

Работает ли разметка Open Graph в мессенджере WhatsApp?

Да, WhatsApp полностью поддерживает разметку Open Graph для генерации сниппетов ссылок. Мессенджер считывает теги og:title, og:description и og:image. Важно учитывать, что WhatsApp сжимает превью до небольшого квадрата, поэтому основной объект на картинке должен находиться ближе к центру и весить менее 300 КБ для быстрой отправки.

Можно ли использовать форматы WebP и SVG для og:image?

Использовать SVG для og:image нельзя, а поддержка WebP остается ограниченной. Парсеры Facebook, Twitter и LinkedIn часто игнорируют векторный формат SVG и нестандартные форматы сжатия. Безопаснее всего применять проверенные растровые форматы JPEG или PNG с горизонтальным разрешением 1200×630 пикселей для стопроцентной совместимости.