Вашу ссылку кинули в чат, и там появилась чужая картинка. Или никакой

Ситуация, которую видел каждый. Вы отправляете другу ссылку на свою страницу, и в чате разворачивается карточка: заголовок, кусок текста и картинка.

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

Это не случайность и не сбой мессенджера. Картинку задаёте вы, просто обычно об этом не знаете.

Откуда берётся картинка в карточке

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

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

То есть вопрос не в том, можно ли этим управлять, а в том, взяли вы управление или нет.

Каким должен быть кадр для превью

Это не обложка статьи и не иллюстрация. У картинки для превью одна задача: остановить палец в переписке, где вокруг чужие сообщения.

Горизонтальная и близкая к пропорции 1200 на 630. Это самый распространённый ориентир. Вертикальный кадр обрежется, а квадратный часто показывается маленькой миниатюрой сбоку вместо большой карточки.

Одно крупное пятно. Карточка в чате небольшая, и сложная сцена в ней не читается.

Плотный цвет. Ленты переписок в основном светлые или тёмно-серые, и насыщенный кадр в них заметнее.

Лицо работает. Как и везде, где надо остановить взгляд.

Текста либо нет, либо он очень крупный. Заголовок и так стоит рядом в самой карточке.

Не путайте с фавиконом. Маленькая иконка сайта это отдельная картинка, она показывается в другом месте и должна быть простой до предела.

Что было и что поменяли

Кондитер с сайтом на конструкторе, продаёт торты, основной канал это переписки и чаты.

Было. При отправке ссылки на сайт в чате появлялась карточка с логотипом конструктора и заголовком, который дублировал адрес сайта. Картинок с тортами в карточке не было ни разу, при том что весь сайт из них состоял. Клиенты пересылали ссылку друг другу, и на том конце было непонятно, что это вообще такое.

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

Стало. Ссылка в чате стала выглядеть как карточка товара, а не как техническая строка. Кондитер отметила, что пересылать её стали чаще: людям стало понятно, что они отправляют.

Как проверить, что получилось

Три способа, от простого к точному.

1. Отправьте ссылку самому себе в мессенджере. Самый быстрый способ, но мешает кэш: если карточка уже сохранялась, вы увидите старую.
2. Отправьте в чат, куда ссылку ещё не кидали. Кэш там пустой, и вы увидите настоящую картинку.
3. Откройте отладчик разметки той площадки, где вам важно превью. У большинства крупных площадок такой инструмент есть, и он же позволяет сбросить кэш.

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

Один кадр или разные под площадки

Соблазн понятный: сделать одну картинку и поставить её везде. Иногда это работает, иногда нет.

Одного горизонтального кадра хватает для мессенджеров и большинства соцсетей: они показывают карточку примерно в одной пропорции.

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

Универсальное решение: снимайте с запасом по краям и держите главное в центральной трети кадра. Тогда один и тот же снимок переживёт обрезку в любую сторону. Это то же правило, что и для обложек и аватарок.

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

Что делать, если сайта нет

У многих мастеров вместо сайта одна страница со ссылками или профиль на площадке. Управление превью там ограничено, но кое-что можно.

Конструкторы страниц-визиток почти всегда дают задать картинку и описание для превью в настройках. Это первое место, куда стоит заглянуть.

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

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

Отдельные случаи

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

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

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

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