SSeoForgeВойти
SchemaRedirectOGBriefПримеры

Блог

Ссылка без картинки в Telegram и ВКонтакте — чиним превью за 10 минут

·~2 мин чтения·Андрей · seoforge.dev

Знакомо: запостил ссылку на свою статью в канал, а вместо аккуратной карточки с картинкой и заголовком — просто синий URL. Выглядит так, будто сайт мёртвый. Кликают такие ссылки заметно хуже.

Причина почти всегда в OG-разметке (Open Graph) — или в её отсутствии. Разберём, как починить, и почему Telegram и ВКонтакте ведут себя по-разному.

Что должно быть на странице

Минимум, который понимают и Telegram, и ВК, и все остальные — четыре мета-тега в <head>:

<meta property="og:title" content="Заголовок статьи" />
<meta property="og:description" content="Короткое описание, 1-2 предложения" />
<meta property="og:image" content="https://site.ru/og/article.png" />
<meta property="og:url" content="https://site.ru/article" />

Без og:image карточки не будет вообще — будет голый текст. Это и есть причина «мёртвой» ссылки в 9 случаях из 10.

Требования к картинке

  • Размер 1200×630. Это стандарт. Меньше — Telegram покажет мелкую иконку сбоку вместо большой карточки.
  • Абсолютный URL. og:image должен начинаться с https://, а не /og/article.png. Относительный путь часть парсеров не подхватывает.
  • Вес до ~5 МБ, формат PNG или JPG. WebP в OG до сих пор поддерживается не везде — для превью надёжнее PNG.
  • Картинка отдаётся без авторизации. Если файл за логином или с горячей защитой от хотлинка — бот превью его не увидит.

Чем Telegram отличается от ВК

  1. Telegram агрессивно кэширует. Один раз подтянул превью — и дальше показывает старое, даже если ты поменял картинку. Сбросить кэш можно через бота @WebpageBot: отправь ему ссылку, он перечитает OG заново.
  2. ВКонтакте требует, чтобы домен был доступен его краулеру и иногда подтягивает превью с задержкой. Проверить, что именно видит ВК, можно в VK Share Debugger — там же сбрасывается кэш.
  3. Telegram читает og:image напрямую, ВК умеет ещё и link rel + микроразметку. Если делаешь под обе площадки — ориентируйся на строгий OG, его понимают все.

Как проверить, что увидит бот

Не угадывай — посмотри глазами краулера:

  • Telegram: отправь ссылку @WebpageBot — он покажет, что подтянул, и обновит кэш.
  • Универсально: opengraph.xyz или VK Share Debugger — вставляешь URL, видишь рендер карточки.

Если в дебаггере пусто — значит og:image либо нет, либо он недоступен. Чини тег, потом сбрасывай кэш.

Где взять саму картинку

Рисовать OG-картинку под каждую статью вручную — долго. OG Studio генерит её по URL: выбираешь шаблон, вбиваешь заголовок и автора — на выходе готовый PNG 1200×630 и ссылка, которую сразу кладёшь в og:image. На Pro — без водяного знака. Подробнее про правила хорошей OG-картинки — в шпаргалке из 7 правил.

Итог

Голая ссылка без карточки = упущенные клики и ощущение заброшенного сайта. Четыре мета-тега + картинка 1200×630 по абсолютному URL + сброс кэша через @WebpageBot — и ссылка начинает выглядеть как у живого проекта. Десять минут работы, которые окупаются на каждом репосте.

Понравилась статья?

Подпишись — пришлём 1 письмо в 2 недели, без спама.

← Все статьи