tigtools

Предпросмотр Open Graph

Укажите содержимое тегов Open Graph, чтобы увидеть примерный вид карточки ссылки и проверить, подходит ли размер изображения.

Работает в браузере Без регистрации

Браузер загружает изображение напрямую по указанному адресу.

Рекомендуемый размер: 1200 × 630 px (1,91:1), формат JPG или PNG, размер файла — несколько мегабайт или меньше. Не размещайте важные элементы у краёв: некоторые приложения обрезают изображение до квадрата.

Большая карточка ссылки
Нет изображения
example.com
—
Маленькая карточка ссылки
Нет изображения
example.com
—

Это типовые варианты карточек. В каждом приложении свои макет, шрифты и кадрирование, а также кэш предпросмотров.

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

  1. Введите og:title и og:description, которые используются или будут использоваться на странице.
  2. Вставьте полный URL изображения og:image. Инструмент загрузит его и покажет фактический размер в пикселях.
  3. Добавьте URL страницы или домен, сравните предпросмотры большой и маленькой карточек и устраните предупреждения.

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

Когда кто-то делится ссылкой, большинство соцсетей и мессенджеров загружают страницу и считывают её теги Open Graph: og:title, og:description, og:image и og:url. На их основе они формируют карточку. Широкое изображение с соотношением сторон примерно 1,91:1 обычно позволяет создать большую карточку с изображением сверху; небольшое или квадратное изображение часто отображается в компактной карточке рядом с текстом.

Инструмент показывает два типовых варианта карточек, чтобы вы могли оценить длину текста и кадрирование изображения. После загрузки изображения браузером проверяется его исходный размер: если он меньше 200 × 200 px, многие приложения не показывают изображение; если меньше 600 × 315 px — обычно используют компактный макет. Сильно отличающееся от 1,91:1 соотношение сторон означает, что изображение будет обрезано. Широко рекомендуемый размер — 1200 × 630 px: при нём изображение остаётся чётким на экранах с высокой плотностью пикселей.

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

Примеры

Скриншот в качестве og:image

Скриншот размером 1440 × 900 имеет соотношение сторон 1,6:1. Инструмент предупреждает о соотношении: в большой карточке изображение будет обрезано сверху и снизу. Экспорт в размере 1200 × 630 позволит избежать неожиданного кадрирования.

Логотип как единственное изображение

Логотип размером 180 × 180 меньше 200 × 200 px, поэтому многие приложения не покажут изображение. Вместо этого используйте более крупный широкий баннер с логотипом.

Проверка длины заголовка

Заголовок og:title длиной 90 символов занимает три строки в предпросмотре большой карточки. Если сократить его примерно до 60 символов, карточка будет выглядеть аккуратно в большинстве приложений.

Часто задаваемые вопросы

Почему ссылка выглядит по-разному в Facebook, LinkedIn и X?

У каждой платформы свой макет карточек, кадрирование и ограничения на длину текста. Одни показывают описание, другие — нет. Этот предпросмотр даёт общее представление и не копирует дизайн какой-либо платформы.

Я изменил og:image, но по-прежнему отображается старое изображение. Почему?

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

Можно ли использовать изображение в формате SVG или WebP?

Большинство платформ не поддерживает SVG. WebP работает во многих приложениях, но не во всех; надёжнее всего использовать JPG или PNG.

Почему инструмент не может загрузить изображение?

Для доступа к URL может потребоваться вход в аккаунт, он может вести на HTML-страницу, а не на изображение, или сервер может блокировать запросы с других сайтов. Если браузеру не удаётся загрузить изображение здесь, возможно, не удастся и роботу соцсети.

Конфиденциальность

Введённый текст остаётся в вашем браузере. Для проверки изображения браузер напрямую запрашивает его по указанному URL (не отправляя referrer), поэтому сервер видит обычный запрос изображения. Никакие данные не отправляются в TIG Tools.