Картинка Open Graph: размер и правила для превью ссылок

Когда вы отправляете ссылку в Telegram или публикуете её в соцсетях, мессенджер формирует превью: заголовок, описание и изображение. Изображение для превью задаётся тегом og:image из протокола Open Graph. Если тег не настроен, мессенджер возьмёт случайную картинку со страницы или покажет ссылку без изображения.

Зачем это нужно

В Узбекистане ссылками постоянно делятся в Telegram: в каналах, группах, личных сообщениях. Аккуратное превью с понятной картинкой:

• выделяет ссылку в ленте
• показывает, что это за страница, ещё до перехода
• повышает доверие и вероятность перехода

Тег og:image

Тег размещается в разделе head страницы и содержит абсолютный адрес изображения — с протоколом и доменом. Относительный адрес многие платформы не поймут. Рядом обычно указывают og:title, og:description и og:url.

Дополнительно можно указать ширину и высоту изображения отдельными тегами — это помогает платформам быстрее обработать картинку.

Размер и пропорции

Широко используемый размер — 1200 на 630 пикселей, с пропорцией примерно 1,91 к 1. Такая картинка корректно отображается в большинстве мессенджеров и соцсетей. Некоторые платформы обрезают изображение до квадрата или другой пропорции, поэтому важное держите в центре и не размещайте текст у краёв.

Вес и формат

• используйте JPEG или PNG — они поддерживаются везде
• сжимайте файл: очень тяжёлые изображения платформы могут не загрузить
• изображение должно быть доступно без авторизации и не закрыто в robots.txt

Что изображать

• для главной — логотип и короткое описание компании или фирменное изображение
• для статей — обложка статьи с заголовком крупным шрифтом
• для товаров — фото товара
• для услуг — изображение, отражающее услугу

Текст на картинке должен быть крупным: превью на телефоне маленькое.

Индивидуальные картинки

Лучше, когда у каждой важной страницы своя картинка, а не одна на весь сайт. Для блога и каталога это можно автоматизировать: обложку статьи или главное фото товара подставлять в og:image шаблоном. Некоторые фреймворки позволяют генерировать картинки превью автоматически с заголовком страницы.

Настройка в разных системах

• WordPress — SEO-плагины добавляют поля для изображения превью
• Tilda — в настройках страницы есть раздел для превью в соцсетях
• Битрикс — обычно добавляется в шаблон программистом
• Next.js и другие фреймворки — через механизм метаданных

Кеширование превью

Мессенджеры и соцсети запоминают превью ссылки. Если вы поменяли картинку, старое превью может показываться ещё долго. В Telegram для обновления превью существует служебный бот, через который можно отправить ссылку на повторную обработку. В Facebook есть инструмент отладки ссылок.

Проверка

1. Отправьте ссылку себе в Telegram и посмотрите превью
2. Проверьте исходный код: тег og:image есть, адрес абсолютный
3. Откройте адрес картинки в браузере — она должна открываться
4. Проверьте превью в нескольких мессенджерах

Типичные ошибки

• относительный адрес изображения
• картинка слишком маленькая, и превью показывается мелкой иконкой
• одна и та же картинка на всех страницах
• текст у края, который обрезается
• изображение на поддомене, закрытом от роботов
• после замены картинки превью не обновили

Итог

Картинка Open Graph определяет, как ссылка выглядит в Telegram и соцсетях. Используйте абсолютный адрес, размер около 1200 на 630, крупный текст в центре и индивидуальные изображения для важных страниц. Если ссылки на ваш сайт выглядят в мессенджерах неаккуратно, это быстро исправить.