Когда ссылку отправляют в мессенджер или соцсеть, пользователь часто видит карточку: заголовок, описание и изображение. За изображение обычно отвечает тег og:image. Если картинка не задана, слишком маленькая, недоступна по ссылке или содержит мелкий текст, превью может выглядеть непрофессионально.
Генератор мета-тегов помогает собрать базовые Open Graph-теги для страницы, но качество превью зависит не только от кода. Важно заранее подготовить изображение и проверить, как оно выглядит в реальном интерфейсе.
Зачем нужна отдельная картинка для превью
Обычная иллюстрация на странице не всегда подходит для карточки ссылки. В превью изображение часто обрезается, уменьшается и показывается рядом с коротким текстом. Если на картинке много деталей, мелких надписей или важный объект находится у края, пользователь может не понять, о чём ссылка.
Хорошая Open Graph-картинка должна быстро объяснять тему страницы: инструмент, продукт, инструкцию, чек-лист или выгоду. Она не обязана повторять весь заголовок, но должна поддерживать его.
Размер и пропорции
Часто используют широкую картинку с соотношением сторон около 1.91:1. На практике важно не только точное число пикселей, но и запас по краям. Разные сервисы могут немного по-разному кадрировать изображение. Поэтому не размещайте важный текст или логотип вплотную к границам.
Если вы готовите универсальную обложку, сделайте центральную композицию: основной смысл в середине, фон без лишнего шума, крупные элементы и достаточно контраста.
Текст на изображении
Текст на картинке должен быть коротким. Не пытайтесь повторить весь title или description. На мобильном экране длинная фраза станет слишком мелкой, а в некоторых интерфейсах часть изображения будет обрезана.
Лучше использовать 2–5 слов: название инструмента, ключевую задачу или понятный акцент. Например: «SEO-аудит сайта», «QR-код для меню», «Короткая ссылка». Всё остальное можно объяснить в og:title и og:description.
URL изображения
og:image должен указывать на доступный файл. Если картинка закрыта авторизацией, отдаётся с ошибкой или слишком долго загружается, сервис может не показать её в превью. Используйте стабильный HTTPS-адрес и проверьте, что он открывается в отдельной вкладке.
Не стоит указывать временные ссылки из редактора, локальные адреса или файлы, которые могут исчезнуть после деплоя. Превью в соцсетях может обновляться не сразу, поэтому важно, чтобы изображение оставалось доступным.
Что проверить перед публикацией
Проверьте четыре вещи: правильный og:title, понятный og:description, доступный og:image и корректный канонический URL. После этого отправьте ссылку себе в мессенджер или используйте инструмент проверки карточек.
Если превью не обновилось, причина часто в кеше платформы. Некоторые сервисы запоминают старую картинку и описание. В таком случае нужно подождать или очистить кеш через инструмент самой площадки.
Частые ошибки
Первая ошибка — использовать слишком мелкий скриншот страницы. На карточке он превращается в нечитаемую миниатюру.
Вторая ошибка — положить важный текст у самого края. При обрезке часть фразы исчезает.
Третья ошибка — забыть, что разные страницы требуют разных карточек. Если у всех материалов одна и та же обложка, пользователь хуже понимает, чем они отличаются.
Быстрый чек-лист
Перед запуском страницы убедитесь, что картинка открывается по HTTPS, выглядит понятно в маленьком размере, не содержит мелкого текста, имеет запас по краям и соответствует теме страницы. Затем сгенерируйте теги и вставьте их в head страницы.
Так ссылка будет выглядеть аккуратнее в Telegram, мессенджерах, соцсетях и других местах, где пользователи видят превью до клика.