Почему ссылка на ваш сайт выглядит некрасиво в WhatsApp или Facebook (и как починить OG-картинку)
Отправили ссылку, а она появилась без картинки или с неправильным текстом? Вот почему так и как починить превью за несколько шагов.
Вы отправляете клиенту ссылку на свой сайт в WhatsApp, нажимаете «отправить» и... появляется пустой прямоугольник, без картинки, со странным заголовком или с растянутым во всю ширину веб-адресом. Первое впечатление испорчено. И вы ничего не сделали не так при отправке: проблема в самом сайте.
Это превью (картинка, заголовок и описание, которые появляются при вставке ссылки) не выдумывается WhatsApp или Facebook из воздуха. Им управляете вы — через скрытые теги в коде страницы, которые называются Open Graph. Когда их нет или они настроены неправильно, приложение угадывает как может, и часто угадывает плохо. Хорошая новость: это чинится, и обычно несложно. Давайте разберём, почему так происходит и что делать.
Что такое OG-картинка на самом деле (и почему вы видите её повсюду)
OG расшифровывается как Open Graph — набор правил, придуманный Facebook и принятый почти всеми: WhatsApp, Facebook, LinkedIn, Telegram, Slack и даже iMessage. Когда кто-то вставляет вашу ссылку, приложение заходит на страницу и читает специальные теги в коде:
- `og:title` — заголовок в превью
- `og:description` — строчка текста под заголовком
- `og:image` — большая картинка
- `og:url` — официальный адрес страницы
Если эти теги есть и они правильные, вы получаете аккуратную карточку с вашей картинкой, вашим заголовком и понятным описанием. Если их нет, приложение импровизирует: берёт первый попавшийся заголовок, может быть, крохотную картинку со страницы, а может — вообще ничего. Отсюда и пустые или странные карточки.
Самые частые причины, почему картинка не появляется
По нашему опыту, почти все случаи сводятся к нескольким простым проблемам:
- Тега `og:image` вообще нет. Сайт не говорит приложению, какую картинку показать, поэтому оно не показывает никакой.
- Картинка слишком маленькая или с неправильными пропорциями. Facebook требует минимум 200x200 пикселей; идеал — 1200x630 пикселей (соотношение 1.91:1). Ниже минимума картинка игнорируется.
- Адрес картинки относительный, а не полный. Нужен полный адрес, начинающийся с `https://`, а не `/img/foto.jpg`. Приложение не находится на вашем сайте, оно не знает, откуда её взять.
- Картинка недоступна публично — она за логином, заблокирована через robots.txt, или сайт не на HTTPS.
- Файл слишком тяжёлый. WhatsApp особенно часто отбрасывает очень большие картинки; держите её под несколькими сотнями КБ.
Часто причина всего одна. Найдите её, почините — и готово.
Скрытый виновник: кэш. Почему вы всё починили, а выглядит по-прежнему плохо
Вот что доводит людей до белого каления: вы меняете сайт, вставляете ссылку снова, а превью всё то же старое (или всё так же пустое). Вы не ошиблись — Facebook и WhatsApp сохраняют (кэшируют) первую увиденную версию, чтобы не перезагружать страницу при каждой отправке. Поэтому они продолжают показывать старый вариант.
Решение — заставить их перечитать страницу. У Facebook есть бесплатный инструмент Sharing Debugger (поищите «Facebook Sharing Debugger»): вставляете ссылку, нажимаете «Scrape Again» и сразу видите, какие OG-теги оно читает, какую картинку находит и какие ошибки есть. WhatsApp использует тот же кэш Facebook, поэтому после «Scrape Again» там WhatsApp тоже обновляется. Маленькая запасная хитрость: добавьте `?v=2` в конец ссылки при отправке, чтобы приложение увидело её как совсем новый адрес.
Как починить, шаг за шагом
Если у вас есть доступ к сайту (или к тому, кто им управляет), шаги такие:
1. Подготовьте хорошую картинку — 1200x630 пикселей, с логотипом или чётким визуалом, крупным и коротким текстом, сохранённую под несколько сотен КБ.
2. Добавьте OG-теги в `<head>` страницы: `og:title`, `og:description`, `og:image` (с полным адресом `https://`), `og:url`.
3. На HTTPS проверьте, что картинка открывается сама по себе, прямо в браузере, без логина.
4. Запустите Facebook Sharing Debugger, нажмите Scrape Again и исправьте ошибки, которые он покажет.
5. Проверьте по-настоящему — отправьте ссылку себе в WhatsApp.
На WordPress SEO-плагин (Yoast, Rank Math) заполняет эти поля без кода. На сайте, собранном аккуратно с нуля, это настраивается один раз и работает везде.
Когда это не то, что вы можете починить сами
Иногда нажимать просто негде: сайт на закрытой платформе, вы не можете добраться до `<head>`, или вам просто не хочется воевать с кодом и плагинами в загруженный день. Это совершенно нормально.
Именно так мы работаем в MPO Web Studio: мы делаем сайты, где превью в WhatsApp и Facebook выглядит правильно с первой же отправки, потому что мы настраиваем его при создании сайта, а не после жалобы первого клиента. Мы работаем удалённо, по всей стране, с прозрачными ценами, и делаем вам бесплатное демо до любой оплаты — вы видите точный результат до того, как решите.
Если вы просто хотите, чтобы мы починили ссылку, которая сейчас выглядит плохо, напишите нам в WhatsApp с адресом страницы. Чаще всего мы назовём причину в тот же день.
Частые вопросы
Я починил картинку, но в WhatsApp она всё равно не появляется. Почему?+
Почти наверняка дело в кэше. WhatsApp использует данные, сохранённые Facebook, и они остаются старыми, пока их не заставить обновиться. Зайдите в Facebook Sharing Debugger, вставьте ссылку, нажмите «Scrape Again», затем отправьте ссылку в WhatsApp заново. Если обновление не происходит сразу, добавьте `?v=2` в конец адреса.
Какого размера должна быть картинка для превью?+
Идеально 1200x630 пикселей, соотношение 1.91:1 — так выглядит хорошо везде. Минимум, который принимает Facebook, — 200x200 пикселей, но ниже 1200 пикселей может получиться размыто. Держите файл лёгким, под несколько сотен КБ, потому что WhatsApp иногда отбрасывает очень тяжёлые картинки.
Можно поставить разную картинку для каждой страницы?+
Да, и так даже идеально. У каждой страницы может быть свой тег `og:image` и свой заголовок. Страница услуг может показывать другую картинку, чем страница контактов. На WordPress это настраивается для каждой страницы в SEO-плагине.
Почему вместо заголовка появляется адрес сайта?+
Это значит, что тега `og:title` нет (и, вероятно, остальных OG-тегов тоже). Приложение не находит чёткий заголовок, поэтому показывает то, что под рукой, — часто сам URL. Добавление OG-тегов решает это мгновенно.
Ломается ли превью, если я перенесу сайт или сменю картинку?+
Может измениться, да. Если вы переименуете или переместите файл картинки, старый адрес `og:image` ведёт в никуда, и превью становится пустым. После любого такого изменения снова запустите Sharing Debugger и нажмите Scrape Again.
7 ошибок, которые отпугивают клиентов с вашего сайта
Оставьте email и получите гид прямо здесь, сразу. Без спама.
Хотите увидеть, как мог бы выглядеть сайт вашего бизнеса?
Напишите нам в WhatsApp — и мы БЕСПЛАТНО подготовим демо-сайт с названием вашего бизнеса. Сначала смотрите, потом решаете.