Бесплатный предпросмотр Open Graph и карточек соцсетей

Что такое разворачивание ссылок и почему это важно?

Когда вы вставляете URL в Facebook, Twitter, LinkedIn, Slack, Discord, iMessage или WhatsApp, платформа отправляет краулер по этому адресу, считывает мета-теги в заголовке страницы и формирует превью-карточку с заголовком, описанием и изображением. Такое превью называют unfurl, карточкой ссылки или социальной карточкой — в зависимости от платформы. Это первое, что видит каждый пользователь, прежде чем решить, кликнуть ли по ссылке. Хорошо оформленная карточка значительно повышает CTR по сравнению с обычной синей ссылкой, а сломанная — полностью убивает вовлечённость.

Система основана на протоколе Open Graph, который Facebook опубликовал в 2010 году, чтобы дать платформам стандартный способ извлечения корректного превью. Open Graph определяет пространство имён мета-тегов с префиксом og: — og:title, og:description, og:image, og:url, og:type и длинный хвост опциональных полей для видео, аудио, статей и продуктов. Twitter в 2012 году надстроил поверх него собственный протокол Twitter Card с пространством имён twitter:, которое перекрывает Open Graph при одновременном присутствии обоих. LinkedIn, Slack, Discord и большинство мессенджеров читают Open Graph напрямую и добавляют поверх него собственные особенности.

Каждая платформа применяет собственную логику рендеринга. Facebook и LinkedIn отображают крупное изображение-герой с заголовком и описанием ниже, занимая примерно четыре строки в ленте. Карточка summary_large_image в Twitter рендерит крупное изображение с хостом URL внизу. Slack отображает компактное вложение с маленьким встроенным эскизом. Discord формирует карточку, которая подтягивает любой видео- или аудио-эмбед, когда задан соответствующий тип. iMessage рендерит вертикальную карточку с квадратным изображением. Все эти варианты управляются одним и тем же набором мета-тегов, однако визуальный результат достаточно сильно различается — так что проверка на каждой платформе по отдельности — единственный надёжный способ выявить проблемы.

Цена сломанного unfurl вполне ощутима. Твит кампании без изображения получает ничтожную долю вовлечённости по сравнению с твитом с карточкой. Публикация в LinkedIn, в которой вместо обложки статьи отображается типовая иконка-глобус, выглядит незаконченной. Ссылка в Slack-канале, у которой не загружается превью-картинка, подрывает доверие к самой ссылке. Каждый подобный случай сам по себе некритичен, но на маркетинговой или контентной команде, которая публикует десятки ссылок в неделю, совокупные потери существенны.

Как пользоваться этим инструментом предпросмотра

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

Шаг 1 — Вставьте URL. Введите полный URL в поле ввода. Краулер загружает страницу, читает заголовок и извлекает все релевантные теги Open Graph и Twitter Card. Если страница требует авторизации или защищена проверкой бота от Cloudflare, загрузка завершится ошибкой — инструмент покажет её, и вы будете знать, что разворачивание также не сработает на реальных платформах.

Шаг 2 — Проверьте карточки для всех пяти платформ. Facebook, LinkedIn, Twitter, Slack и Discord отображаются рядом. Обратите внимание на отсутствующие изображения, обрезанный текст и кадрирование по соотношению сторон, которое срезает ключевые части иллюстрации. Инструмент выделяет красным отсутствующие обязательные теги и жёлтым — неоптимальные размеры.

Шаг 3 — Отредактируйте и снова проверьте. Обновите мета-теги в исходной странице и нажмите Refresh. Инструмент загружает свежую копию без кеша, так что вы сразу видите актуальное состояние. Когда здесь всё выглядит правильно, реальные публикации на платформах будут соответствовать — при условии, что вы не забудете сбросить кеш Facebook и LinkedIn после обновления.

Особенности рендеринга на разных платформах

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

Facebook

Facebook читает og:title, og:description, og:image и og:url и рендерит карточку-герой: изображение сверху, жирный заголовок под ним, описание серым, домен хоста мелким шрифтом снизу. Изображение кадрируется до соотношения 1.91:1, если не соответствует ему. Facebook агрессивно кеширует результат — при первой публикации URL краулер считывает теги, и последующие публикации переиспользуют закешированную карточку часами или даже сутками. Чтобы обновить, вставьте URL в Sharing Debugger и нажмите Scrape Again. Другого надёжного способа сбросить кеш не существует. Краулер Open Graph идентифицирует себя агентом facebookexternalhit.

Twitter

Twitter сначала читает twitter:card, twitter:title, twitter:description, twitter:image и twitter:site, возвращаясь к эквивалентам og:, если тег twitter: отсутствует. Значение twitter:card определяет выбор макета: summary создаёт маленький квадратный эскиз слева от заголовка и описания, занимая примерно один твит по высоте; summary_large_image создаёт крупное изображение-герой над заголовком с хостом URL внизу, удваивая визуальное пространство. Валидатор Twitter Card перенесли в Twitter Ads в 2022 году, поэтому отдельного Card Validator больше нет, однако платформа по-прежнему соблюдает протокол в точности, как прежде.

LinkedIn

LinkedIn читает Open Graph идентично Facebook и рендерит аналогичную карточку-герой. Краулер называется LinkedInBot и кеширует результаты примерно на семь дней, если не сбросить через Post Inspector по адресу linkedin.com/post-inspector. LinkedIn требует, чтобы og:image был не менее 1200 на 627 пикселей (обратите внимание на чуть другую нижнюю границу) и не превышал 5 МБ. Изображения по HTTP молча отбрасываются. LinkedIn также игнорирует подсказки og:image:width и og:image:height при валидации, поэтому всегда тестируйте с реальной загрузкой.

Slack

Slack читает Open Graph, но по умолчанию рендерит более компактное вложение. og:title становится заголовком ссылки, og:description — текстом, а og:image — маленьким встроенным эскизом сбоку. Рабочие пространства могут настраивать поведение разворачивания ссылок для каждого канала и приложения — это значит, что одна и та же ссылка может отображаться полной карточкой в одном канале и обычным текстовым URL в другом. Slack также дедуплицирует разворачивания в рамках короткого временного окна, поэтому повторная вставка той же ссылки после правки мета-тегов нередко показывает закешированную версию. Аккаунты ботов и входящие вебхуки имеют отдельные настройки разворачивания, которые может потребоваться включить явно.

Discord

Discord рендерит карточки Open Graph как эмбеды внутри сообщения, отображая изображение встроенным героем. Он также учитывает og:video и встраивает видеоплееры напрямую при их наличии — это делает Discord одной из немногих распространённых платформ, где теги Open Graph для видео действительно дают результат. Цвета карточек берутся из theme-color в заголовке мета, если другой цвет не указан. Краулер называется Discordbot, и в отличие от Facebook или LinkedIn, Discord не кеширует агрессивно — большинство правок отражается в течение нескольких минут.

Требования к размеру изображения для каждой платформы

Самая распространённая причина деградации карточки до эскиза или ошибки рендеринга — это изображение. У каждой платформы собственные предпочтительные размеры и минимальные требования.

Facebook и LinkedIn предпочитают 1200 на 630 пикселей при соотношении сторон 1.91:1. Обе платформы рендерят карточку с изображениями от 600 пикселей по длинной стороне, но ниже этого порога переключаются на маленький эскиз. Размер файла должен оставаться в пределах 5 МБ. PNG и JPG поддерживаются оба; WebP поддерживается Facebook, но не стабильно LinkedIn — используйте PNG или JPG для og:image.

Twitter предпочитает 1200 на 675 пикселей для summary_large_image — слегка более широкое соотношение 16:9. Минимум составляет 300 на 157, однако всё, что уже 600 пикселей, заметно теряет в качестве. Для карточек summary изображение квадратное и обрезается до 144 на 144 в ленте; проектируйте так, чтобы смысл передавал центр изображения.

Slack принимает практически любой размер и масштабирует изображение до маленького эскиза. Эскиз занимает примерно 80 на 80 пикселей в боковом отображении. Детализация изображения шириной 1200 пикселей в этом макете теряется, но само изображение подходит — Slack масштабирует, а не обрезает.

Discord рендерит изображение встроенным в полный размер, ограниченный максимальными размерами поверхности чата — обычно до 1280 пикселей в ширину на десктопе. Более крупные изображения масштабируются с сохранением качества. Discord обрезает высокие изображения до максимального соотношения сторон, поэтому избегайте портретного формата для карточек-героев.

Теги og:image:width и og:image:height — это подсказки о размерах, которые краулеры используют для резервирования места в макете до завершения загрузки изображения. Они не изменяют само изображение, но помогают рендерить предпросмотр без сдвига макета. Всегда включайте их, когда размеры стабильны, и указывайте реальные пиксельные размеры файла, который вы отдаёте.

Распространённые ошибки, которые вредят публикациям

Относительные URL в og:image. Open Graph и Twitter Card требуют абсолютных URL. Путь вида /og.png молча отклоняется всеми основными платформами. Всегда используйте полную форму https://example.com/og.png.

HTTP в og:image на HTTPS-странице. Смешение HTTP-URL изображений на HTTPS-странице приводит к тому, что большинство платформ отбрасывает картинку. Карточка деградирует до эскиза или рендерится без изображения вовсе. Все URL Open Graph должны быть HTTPS вне зависимости от протокола страницы.

Отсутствие og:image:width и og:image:height. Без подсказок о размерах краулеры ждут загрузки изображения перед выбором макета карточки. На медленных хостах изображений платформа превышает таймаут и откатывается к меньшей карточке. Всегда включайте подсказки при отдаче изображения с известными размерами.

Одинаковый og:image на тысячах страниц. Одно общее изображение подходит для главной страницы, но делает все статьи неотличимыми друг от друга при публикации. Шаблонные динамические OG-изображения, генерируемые на сервере из заголовка и фона, дают каждой странице уникальную карточку без ручной работы.

Забытый сброс кеша Facebook после правок. Правки, внесённые после того, как URL уже был опубликован, не видны до повторного скрапинга через Sharing Debugger. Команды, обновляющие мета-теги без сброса кеша, нередко думают, что изменения не применились — хотя платформы просто показывают старые закешированные версии.

Неверное значение twitter:card. Указание summary при наличии крупного изображения шириной 1200 пикселей создаёт карточку с маленьким эскизом, расходуя ресурс впустую. Указание summary_large_image без реально крупного изображения создаёт карточку с пустым местом там, где должен быть герой. Тип карточки должен соответствовать размеру подаваемого изображения.

Описание, дословно скопированное из текста страницы. Обрезанный лид-абзац в og:description редко побуждает кликнуть. Превью для публикаций — это рекламный текст в 200 символах; относитесь к нему соответственно и пишите описание, которое позиционирует ссылку, а не пересказывает страницу.

Крайние случаи, о которых никто не говорит

Краулеры Open Graph видят страницу иначе, чем браузеры. Как правило, они не выполняют JavaScript, не хранят куки и истекают по таймауту быстрее, чем обычный запрос. Одностраничные приложения, которые вставляют мета-теги на клиенте через React Helmet или document.head, создают пустые карточки — потому что краулер читает исходный HTML, отрендеренный сервером, до выполнения какого-либо JS. Решение — рендерить мета-теги на сервере через metadata в Next.js, useHead в Nuxt или аналоги. Некоторые конфигурации CDN также блокируют пользовательские агенты ботов на уровне edge, возвращая 403 для facebookexternalhit при нормальном обслуживании реальных пользователей — ошибка, невидимая до тех пор, пока кто-то не поделится ссылкой и карточка не откажет в рендеринге.