Форум с Михаилом Молчановым

Вы создали отличный контент, но когда делитесь ссылкой, в соцсети появляется что-то невнятное: обрезанная картинка, скучный заголовок или просто голый URL. Знакомо? Превью — это лицо вашего контента в ленте. От него зависит, кликнут по ссылке или продолжат скроллить. Давайте разберемся, как сделать так, чтобы ссылка выглядела идеально на любой платформе.

Техническая основа: знакомьтесь, Open Graph

Чтобы соцсети понимали, как показывать вашу ссылку, на странице должны быть специальные метатеги Open Graph (OG). Это код в разделе <head> вашего сайта, который подсказывает платформам, какой заголовок, описание и картинку использовать для превью .

Вот основные теги, которые нужно настроить:

og:title — заголовок превью (около 60 символов, чтобы не обрезался).
og:description — краткое описание (120–155 символов), которое дополняет заголовок.
og:image — ссылка на изображение для превью. Это самый важный элемент.
og:url — канонический адрес страницы.
og:type — тип контента (например, article для статьи) .

Для X (Twitter) есть отдельный набор тегов twitter:card, но платформа также понимает и стандартные OG-теги. Для больших картинок используйте twitter:card="summary_large_image" .

Важно: Если эти теги не заданы, соцсеть будет сама «угадывать», что показать. Часто это выглядит не лучшим образом: случайная картинка со страницы или странно обрезанный текст .

Размер имеет значение: какую картинку загружать

Картинка — главный элемент превью, который привлекает внимание. Чтобы она не обрезалась и выглядела качественно, придерживайтесь рекомендаций по размерам. Универсальный совет — используйте изображение с соотношением сторон 1.91:1 и размером не менее 1200 x 630 пикселей. Такой вариант подойдет для большинства платформ .

Но у каждой площадки есть свои нюансы:

Facebook и ВКонтакте: Рекомендуемый размер для превью ссылок — 1200 x 630 пикселей (соотношение 1.91:1) . ВКонтакте может кадрировать изображение под свои пропорции, поэтому горизонтальный формат — самый безопасный выбор.
X (Twitter): Для карточек с большим изображением (summary_large_image) используйте соотношение 2:1 и размер от 300x157 до 4096x4096 пикселей . Для обычных твитов изображение будет отображаться в размере 600x335 пикселей в ленте .
Instagram: При публикации ссылки (например, в сторис или через кнопку в профиле) превью берется из OG-тегов. Сами посты в ленте Instagram сейчас оптимально публиковать с вертикальным изображением 1080 x 1350 пикселей (4:5) .
LinkedIn: Рекомендуется размер 1200 x 627 пикселей (соотношение 1.91:1) .

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

Контент — всему голова: как написать привлекательное превью

Технические настройки — это лишь половина дела. Вторая, не менее важная, — это содержание заголовка, описания и самой картинки.

Заголовок (og:title): Должен быть цепляющим, четким и передавать суть. Используйте цифры, вопросы, обращение к боли или выгоде аудитории. Вспомните, что в ленте пользователь видит обычно 140–180 символов текста поста, и решение о клике часто принимается именно по первым строкам .
Описание (og:description): Это ваш мини-питч. Дополните заголовок, объясните, почему стоит кликнуть. Держитесь в пределах 120–155 символов, чтобы описание не обрезалось. Думайте о нем как о бесплатной рекламе вашего контента .
Изображение: Картинка должна привлекать внимание, быть качественной и релевантной содержанию. Избегайте кричащих цветов и перегруженного текста — для таргетированной рекламы есть строгие ограничения (текст не более 20% площади) . Изображение должно работать в паре с заголовком, а не перетягивать всё внимание на себя .

Если превью не обновляется: как сбросить кэш

Вы обновили OG-теги, а соцсеть все равно показывает старую картинку? Это потому, что платформа сохранила кэш вашей ссылки при первом шеринге . Нужно принудительно его обновить.

Facebook: Используйте официальный инструмент Sharing Debugger. Вставьте URL своей страницы, нажмите «Debug», а затем кнопку «Получить новую информацию об URL» (Fetch new information) .
ВКонтакте: Воспользуйтесь специальным методом API pages.clearCache на сайте разработчиков ВКонтакте. Получите access token, вставьте ссылку и выполните запрос .
Telegram: Отправьте ссылку боту @WebpageBot, и он обновит превью для вашей страницы .
Универсальный трюк: Добавьте в конец URL параметр ?v=1 (или любую цифру) и отправьте ссылку заново. Это заставит соцсеть воспринять ссылку как новую и перезапросить данные . Например: ваш-сайт.ru/page?v=1.

Краткие итоги

Настройте OG-теги на сайте: og:title, og:description, og:image.
Используйте качественное изображение с соотношением 1.91:1 и размером около 1200x630.
Пишите цепляющий заголовок и лаконичное описание, как бесплатную рекламу.
Располагайте важные элементы в центре картинки, чтобы они не обрезались.
При изменении превью используйте инструменты для сброса кэша или трюк с ?v=1.

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