Open Graph image: размер, теги и проверка превью ссылок

Что такое open graph image и зачем он бизнесу

Open Graph — набор метатегов, который изначально предложил Facebook. С его помощью страница сама сообщает платформе, как её показывать: заголовок, описание, адрес и изображение. За картинку отвечает тег og:image. Эти теги читают Telegram, WhatsApp, LinkedIn и другие сервисы, а X использует собственные теги, но нередко опирается и на Open Graph.

Если тега нет, платформа берёт случайное изображение со страницы: иногда это иконка, баннер или кусок рекламного блока. Бывает и хуже — в чате остаётся голая строка со ссылкой. Менеджер отправил клиенту каталог, а клиент видит непонятный адрес и не нажимает.

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

Какие теги нужны вместе с og:image

Все теги размещаются в разделе head страницы. Минимальный рабочий набор выглядит так:

Главная ловушка — относительный адрес вроде /img/cover.jpg. Многие платформы его не распознают. Указывайте полный адрес с https и доменом, и убедитесь, что по нему открывается именно файл изображения, а не страница с редиректом.

• og:title — заголовок карточки
• og:description — короткое описание, одна-две строки
• og:url — основной адрес страницы без лишних параметров
• og:type — тип содержимого: website для главной, article для статьи
• og:image — абсолютный адрес картинки
• og:image:width и og:image:height — размеры файла, помогают платформе быстрее его обработать

Размер, формат и вес картинки

Практический стандарт — 1200×630 пикселей, то есть пропорция около 1,91 к 1. Горизонтальная картинка такого размера корректно отображается в большинстве мессенджеров и соцсетей. Слишком маленькое изображение превращается в миниатюру сбоку, квадратное могут обрезать.

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

• Формат: JPEG или PNG, их понимают все
• Вес: сожмите файл, очень тяжёлые картинки платформа может не загрузить
• Композиция: главное держите в центре, края могут срезаться
• Текст: крупный, несколько слов; на экране телефона мелкий шрифт сливается
• Доступ: файл открывается без авторизации и не закрыт в robots.txt
• Адрес: тот же домен или открытый для роботов поддомен

Что изображать на разных страницах

Универсальной картинки нет, у каждого типа страниц своя задача. Ориентируйтесь на то, что человек должен понять за секунду, ещё не открыв ссылку.

Проверяйте карточку глазами владельца телефона: превью маленькое, и всё, что вы разглядываете на мониторе, там может превратиться в серое пятно.

• Главная — логотип, фирменные цвета и одна строка о том, чем вы занимаетесь
• Статья блога — обложка с крупным заголовком
• Карточка товара — чистое фото на спокойном фоне
• Услуга — результат или процесс, а не абстрактный сток
• Лендинг под рекламу — оффер и визуал, совпадающий с объявлением

Как настроить пошагово

Порядок действий, который подходит и для небольшого сайта, и для магазина с большим каталогом:

• Определите, какие страницы чаще всего пересылают: главная, услуги, товары, статьи
• Сделайте макет 1200×630 с безопасной зоной по центру
• Загрузите файлы на свой домен по https и откройте их в браузере в режиме инкогнито
• Пропишите теги: в WordPress через SEO-плагин, в Tilda в настройках страницы в блоке соцсетей, в Битрикс обычно через шаблон силами разработчика, в Next.js через механизм метаданных
• Для блога и каталога настройте подстановку: обложка записи или главное фото товара автоматически попадает в og:image
• Проверьте результат и при необходимости обновите кэш

Сравнение вариантов: одна картинка, ручная обложка или автогенерация

Одна картинка на весь сайт — самый быстрый путь. Это лучше, чем ничего, но статья, товар и страница услуги выглядят одинаково, и карточка теряется среди других ссылок. Годится как запасной вариант для страниц, до которых руки ещё не дошли.

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

Подстановка из CMS — разумный баланс для каталога: фото товара берётся автоматически. Следите, чтобы фото было достаточно большим и не содержало мелких надписей по краям.

Автогенерация с заголовком страницы удобна для блога: картинка создаётся шаблоном. Нужен разработчик и проверка того, что длинный заголовок не вылезает за границы.

Пример: магазин в Ташкенте

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

Если же в шаблон карточки товара подставляется главное фото в формате 1200×630 и название, ссылка сама выглядит как витрина. То же с постами в Telegram-канале магазина и ссылкой в профиле Instagram: страница с аккуратной карточкой вызывает больше доверия, чем неопознанный адрес.

Настройка делается один раз в шаблоне, а работает для каждого нового товара. Именно поэтому для каталога выгоднее автоматизация, а не ручная работа с каждой страницей.

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

Эти ошибки встречаются чаще всего, и почти все исправляются за один подход к шаблону:

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

Проверка, кэш и чек-лист

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

Чек-лист перед запуском: тег og:image есть в коде страницы, адрес абсолютный и открывается в браузере, размер около 1200×630, файл сжат, текст крупный и в центре, у важных страниц свои картинки, ссылка проверена в Telegram на телефоне и на компьютере.

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