Вы выкатили страницу, поделились ссылкой — а превью показывает не ту картинку или вообще ничего. Почти любая проблема с OG image сводится к одной из трёх причин: отсутствующие теги, битый URL картинки или устаревший кэш. Это руководство показывает, как проверить OG image до публикации и как чинить каждый из этих сбоев.
Сначала проверьте теги
Прежде чем браться за инструменты, откройте исходный код страницы (Ctrl+U / Cmd+U) и убедитесь, что в <head> есть эти теги:
<meta property="og:title" content="Launch day: v2.0" />
<meta property="og:description" content="Everything new in this release." />
<meta property="og:image" content="https://example.com/og/launch.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />Два правила сразу отлавливают большинство ошибок:
og:imageдолжен быть абсолютным HTTPS-URL. Относительные пути (/og/launch.png) не работают у большинства краулеров.- URL картинки должен быть публично доступен — откройте его в окне инкогнито. Если он требует входа, редиректит или отдаёт 404, ни одна платформа его не получит.
Если вы не уверены, что картинка вообще нужного размера, начните с нашего руководства по размерам OG image — размеры составляют вторую половину рабочего превью.
Инструменты проверки по платформам
У каждой крупной платформы есть официальный отладчик, который показывает ровно то, что видит её краулер:
| Платформа | Инструмент | Что делает |
|---|---|---|
| Sharing Debugger | Показывает собранную карточку, выводит предупреждения и предлагает кнопку «Scrape Again» | |
| Post Inspector | Рендерит превью и обновляет кэш LinkedIn при каждой проверке | |
| X (Twitter) | Создайте черновик поста | X закрыл отдельное превью Card Validator — вставьте ссылку в черновик (или отправьте её себе в личные сообщения), чтобы увидеть живую карточку |
| Slack | Напишите сами себе | Slack разворачивает ссылки в реальном времени; сообщение самому себе — самый быстрый способ увидеть OG-превью |
| Discord | Вставьте ссылку в любой канал | Эмбеды рендерятся сразу из ваших тегов Open Graph |
| WhatsApp / Telegram | Отправьте в «Избранное» / самому себе | Оба читают og:image; Telegram кэширует жёстко (см. ниже) |
Практичный порядок действий: исправьте теги → прогоните URL через Sharing Debugger от Facebook (у него самые подробные предупреждения) → затем точечно проверьте платформу, которая вам действительно важна.
Принудительное обновление кэша
Платформы агрессивно кэшируют превью ссылок — иногда неделями. Если вы обновили OG image, но продолжаете видеть старую:
- Facebook: откройте Sharing Debugger и нажмите Scrape Again.
- LinkedIn: прогоните URL через Post Inspector — сама проверка сбрасывает кэш.
- X: ручного обновления нет; кэш обычно истекает примерно за неделю.
- Telegram: отправьте свой URL боту
@WebpageBot, чтобы заставить его перечитать страницу. - Универсальный запасной вариант: смените URL картинки. Версия в query-параметре (
/og/launch.png?v=2) — а ещё лучше имя файла с хешем содержимого — мгновенно заставляет каждую платформу считать картинку совершенно новой.
Если ваши OG image генерируются пайплайном, зашивайте версию или хеш в имя файла с первого дня. Инвалидация кэша перестаёт быть проблемой в принципе.
Почему OG image всё ещё не показывается
Прогнали отладчики, а картинки всё нет? Пройдитесь по списку:
- Картинка слишком тяжёлая или медленная. Краулеры отваливаются по таймауту на многомегабайтных файлах. Держите её меньше 1 MB (и заметно меньше 300 KB для WhatsApp).
- Размеры ниже порога большой карточки. Меньше 600×315 — и Facebook откатывается к маленькой миниатюре. Экспортируйте в 1200×630 — полный разбор есть в руководстве по размерам.
- Страница блокирует краулеров. Проверьте, что
robots.txt, файрвол или защита от ботов не отдают 403 краулерамfacebookexternalhit,TwitterbotилиLinkedInBot. - Теги подставляются на клиенте. Большинство социальных краулеров не выполняют JavaScript. OG-теги должны присутствовать в HTML, отрендеренном на сервере.
- Несколько тегов
og:imageконфликтуют. Платформы обычно берут первый — удалите остатки из шаблонов и плагинов.
Проверяйте до публикации, а не после
Отладчики выше сообщают, что пошло не так, уже постфактум. Более дешёвая привычка — делать картинку правильной ещё до релиза. Наш бесплатный генератор OG image показывает живое превью в точных размерах 1200×630 прямо во время редактирования — то, что вы видите в редакторе, пиксель в пиксель совпадает с будущей карточкой, — и экспортирует оптимизированный PNG, который проходит все проверки из этой статьи. Без регистрации и водяных знаков.
FAQ
Как проверить OG image без публикации?
Используйте Sharing Debugger от Facebook или Post Inspector от LinkedIn для официального рендера либо отправьте ссылку самому себе в Slack, Discord или WhatsApp — сообщения самому себе разворачиваются точно так же, как публичные репосты.
Сколько живёт кэш OG image?
По-разному: Facebook кэширует, пока вы не запустите повторный скрейп, LinkedIn обновляется через Post Inspector, у X кэш истекает сам примерно за неделю. Смена URL картинки (?v=2 или новое имя файла) обходит все кэши разом.
Почему OG image видна в Facebook, но не в WhatsApp?
Почти всегда дело в весе файла. WhatsApp сдаётся на тяжёлых картинках — сожмите PNG или отдавайте уменьшенный вариант и держите его заметно меньше 300 KB.
Работают ли OG-теги на страницах, рендерящихся через JavaScript?
Только если теги присутствуют в первоначальном ответе сервера. Социальные краулеры, как правило, не выполняют JavaScript, поэтому метатеги, подставленные на клиенте, для них невидимы.
