Ссылка на лендинг в мессенджере или соцсети показывает превью: картинку, заголовок и описание из тегов og:image, og:title и og:description в head страницы. Без этих тегов часть площадок берёт случайную картинку сама и угадывает через раз, а без свежего favicon нужная вкладка теряется среди десятка открытых сайтов.
Почему это не мелочь для конверсии
Ссылку на лендинг чаще пересылают, чем открывают напрямую: клиент скидывает партнёру в WhatsApp, менеджер в чат отдела, знакомый в личку с вопросом "глянь, нормально?". В этот момент решение о переходе принимается по превью, а не по самой странице. Если в чате вместо картинки серый прямоугольник и голый адрес сайта, доверие падает ещё до клика.
Я проверял это на живых лендингах: у страниц с корректным og:image переход по пересланной ссылке в мессенджерах выше на глаз в полтора-два раза, хотя точную цифру по конверсии тут вывести сложно - слишком много переменных зависит от того, кто и кому пересылает.
Отдельная категория ситуаций - реклама в соцсетях, где ссылка на лендинг идёт вместе с постом или сторис. Модерация части площадок вручную сверяет, соответствует ли картинка превью содержанию сайта, и пустой прямоугольник или чужое изображение иногда становится причиной отказа в показе объявления, хотя формальная причина в отчёте модерации звучит расплывчато.
Первое впечатление от лендинга сегодня формируется не на лендинге, а в мессенджере, за секунду до перехода по ссылке.
Тег og:image и что в нём должно быть
За картинку превью отвечает мета-тег og:image в head страницы. Если его нет, часть мессенджеров и соцсетей пытается взять первую крупную картинку со страницы сама и угадывает через раз: иногда в превью попадает иконка из футера или логотип партнёра из блока отзывов. Тег нужно проставлять явно, а не надеяться на автоопределение. Минимальный набор мета-тегов для нормального превью:
- og:title - заголовок для превью;
- og:description - короткое описание под заголовком;
- og:image - ссылка на картинку 1200 на 630;
- og:url - канонический адрес страницы;
- favicon и apple-touch-icon - иконки для вкладки и домашнего экрана.
В картинку для og:image стоит выносить не логотип компании, а суть предложения: короткий текст с оффером поверх фото, как на баннере. Логотип на этом месте не говорит человеку ничего нового, а конкретное предложение цепляет взгляд ещё до перехода на сайт.
Текста на самой картинке должно быть немного: заголовок в три-пять слов и, если есть место, короткая цифра вроде цены или срока. Мессенджеры часто сжимают превью до небольшого размера в ленте чата, и длинная фраза мелким шрифтом на такой картинке превращается в нечитаемое пятно.
Какого размера должна быть картинка для og:image?
Рабочий стандарт - 1200 на 630 пикселей, пропорция примерно 1,91 к 1. Facebook, Telegram и большинство мессенджеров ожидают именно такую пропорцию и обрезают картинку под неё, если она квадратная или вертикальная. Квадратное превью 1200 на 1200 тоже покажется, но в ленте выглядит мельче, а часть текста на баннере может обрезаться по краям.
Вес файла стоит держать до 300-500 килобайт: не потому что есть жёсткий лимит у всех площадок, а потому что тяжёлая картинка дольше подгружается при генерации превью, и часть сервисов в этом случае просто не покажет картинку вовсе, отдав пустой прямоугольник. Общие принципы работы с весом изображений на странице разобраны в статье Скорость загрузки лендинга.
og:title и og:description отдельно от SEO
Заголовок и описание в превью берутся из тегов og:title и og:description, а не из обычного title и meta description, если явно не указано иное. Их можно и стоит делать разными: SEO title оптимизирован под поисковый запрос и ограничение в 60 символов, а og:title в мессенджере может быть чуть длиннее и написан не под запрос, а под то, чтобы зацепить в чате. Настройка обеих пар мета-тегов не конфликтует: страница просто отдаёт разные значения разным потребителям разметки. Общий разбор метатегов лендинга есть в статье SEO-подготовка лендинга.
Фавикон: где теряется чаще всего
Фавикон, маленькая иконка вкладки браузера, часто остаётся стандартной от конструктора или вообще пустой после переезда на новый хостинг. Проверяется это за пять секунд: открыть сайт в новой вкладке и посмотреть, что там за иконка. Частая причина потери фавикона после переноса лендинга - файл favicon.ico остался в старой папке, а ссылка на него в head указывает на путь, которого больше нет.
На вкладке с десятком открытых сайтов фавикон - единственное, по чему человек находит нужную вкладку взглядом. Пустая или чужая иконка не критична для конверсии напрямую, но легко теряется именно та вкладка, где лежит форма с уже начатой заявкой.
Для мобильных экранов имеет смысл отдельно проверить apple-touch-icon: если посетитель добавляет лендинг на домашний экран айфона, без этого тега вместо иконки подставляется автоматический скриншот страницы, обрезанный и почти всегда нечитаемый.
Как разные площадки показывают превью
Telegram, WhatsApp, VK и обычный поиск читают og-теги немного по-разному. WhatsApp иногда упорно держит старую версию превью даже после правки картинки, Telegram обновляет заметно быстрее. VK у части ссылок вообще требует отдельной верификации домена через VK Admin, иначе превью показывается урезанным, без картинки.
Из-за этих различий нельзя один раз настроить og-теги и быть уверенным, что превью одинаково выглядит везде. Проверка нужна в каждом канале, через который реально идут ссылки на лендинг: если основной трафик идёт через рекламу в Директе, а ссылками делятся в основном в Telegram, приоритет проверки там, а не в VK.
С поиском Яндекса и Google своя история: они читают og-теги, но могут показать собственное превью на основе того, что сочтут более релевантным запросу, и это не всегда совпадает с картинкой из og:image. Здесь дополнительно помогает разметка schema.org с явным указанием изображения, а документация Google по структурированным данным описывает, как поиск её читает, но полного контроля над сниппетом в поиске не даёт ни один тег.
Почему после смены og:image превью не обновляется сразу?
После смены og:image мессенджер может показывать старую картинку ещё несколько дней: превью закэшировано на стороне площадки, а не подгружается заново при каждой пересылке ссылки. Для Facebook и связанных с ним сервисов есть инструмент принудительного сброса кэша, у Telegram официального способа очистки нет, помогает добавление произвольного параметра к ссылке вроде ?v=2, который площадка считает новым адресом.
Это стоит учитывать в сроках: если правите превью лендинга перед стартом рекламной кампании, делайте это минимум за два-три дня до запуска, а не в день включения объявлений.
Ещё один источник путаницы - разница между кэшем самой площадки и кэшем браузера у конкретного человека. Даже после успешного сброса на стороне Facebook или Telegram у пользователя, который уже видел старое превью в переписке, может остаться прежняя картинка локально. Это не ошибка настройки, а особенность работы кэша, и переубеждать клиента, что превью обновилось, стоит новой ссылкой в новом чате, а не спором о том же самом сообщении.
Инструменты проверки перед отправкой
| Инструмент | Что показывает | Когда использовать |
|---|---|---|
| Telegram, отправка ссылки себе в избранное | Реальное превью в Telegram | Перед рассылкой в чаты и каналы |
| Facebook Sharing Debugger | og-теги и принудительный сброс кэша | Проверка и обновление превью для Facebook и Instagram |
| VK, инструмент проверки ссылок | Превью и статус верификации домена | Перед публикацией в сообществах VK |
| Просмотр исходного кода страницы | Сами теги og:image, og:title, og:description | Проверка, что теги вообще присутствуют |
| WhatsApp Web, тестовый чат с собой | Превью в WhatsApp | Перед рассылкой клиентам в WhatsApp |
Частые вопросы
Почему в превью лендинга показывается не та картинка?
Обычно потому, что на странице нет явного тега og:image. Часть мессенджеров и соцсетей в этом случае сама выбирает крупную картинку со страницы и промахивается: берёт логотип партнёра из блока отзывов или иконку из футера. Решение простое - прописать og:image явно, а не полагаться на автоопределение.
Как быстро обновляется og-превью после правки картинки?
Не сразу. Площадка кэширует превью на своей стороне, и правка на сайте не значит мгновенное обновление в чатах. У Facebook есть инструмент принудительного сброса кэша, у Telegram официального способа нет, помогает добавление параметра к ссылке. Если готовите превью под рекламную кампанию, меняйте его за два-три дня до старта.
Нужен ли favicon, если лендинг и так работает?
Нужен. Это единственный способ найти нужную вкладку взглядом среди десятка открытых сайтов, а на телефоне без apple-touch-icon вместо иконки на домашнем экране появляется обрезанный автоскриншот страницы. Проверяется за пять секунд: открыть сайт в новой вкладке и посмотреть на иконку.
Можно ли сделать одну картинку для og:image и для SEO-сниппета в поиске?
Технически можно, но лучше не совмещать. Поиск Яндекса и Google может показать собственное превью независимо от og:image, а мессенджеры читают именно этот тег напрямую. Разные задачи редко закрываются одной картинкой без потерь с обеих сторон.
Коротко
OG-превью и фавикон - не декоративная деталь, а часть первого впечатления от лендинга, которое формируется до перехода по ссылке. Без явного og:image мессенджеры угадывают картинку сами и угадывают плохо, без свежего favicon сайт теряется среди вкладок.
Проверка занимает 10 минут: посмотреть исходный код на наличие тегов, отправить ссылку себе в Telegram и WhatsApp, свериться с фавиконом на вкладке. Сделать это стоит один раз при запуске и ещё раз после любого переноса лендинга на новый хостинг или домен, детали такого переноса разобраны в статье Хостинг для лендинга.
