Как пользоваться
- Введите адрес страницы, например
example.com/blog/launch, и нажмите Проверить. Нет страницы под рукой? Попробуйте один из примеров. - Посмотрите, какую карточку строит для неё каждое приложение: X, Facebook, LinkedIn, Slack, Discord, WhatsApp и iMessage. Зелёная точка значит, что карточка выглядит правильно; жёлтая или красная — что под карточкой написано, что не так.
- Откройте Показать исправления и теги, чтобы увидеть каждый проверенный тег по отдельности. Недостающие теги готовы к вставке в ваш
<head>: скопируйте их, заполните значения, опубликуйте изменения и проверьте снова.
Адрес проверки есть в адресной строке браузера, так что его можно отправить тому, кто отвечает за страницу.
Как работают превью ссылок
Когда вы вставляете ссылку в пост или чат, краулер приложения один раз загружает страницу и читает теги в её <head>. Он не выполняет JavaScript, не входит в аккаунт и не принимает баннеры cookie, поэтому теги, которые скрипт добавляет после загрузки страницы, для него невидимы. Проверка загружает страницу так же: один запрос, без JavaScript, с переходами по перенаправлениям, как это делает краулер.
Каждое приложение читает одни и те же несколько тегов, со своими запасными вариантами:
- Open Graph (
og:title,og:description,og:image,og:url,og:site_name) читают Facebook, LinkedIn, Slack, Discord, WhatsApp и iMessage. - X сначала читает
twitter:card,twitter:title,twitter:descriptionиtwitter:image, а при их отсутствии берёт теги Open Graph. Безtwitter:cardон показывает маленькую карточку-сводку, даже если есть изображение. - Если нет
og:title, большинство приложений берут<title>. Если нетog:description, одни используют meta description, а другие вообще не показывают текст. - Discord окрашивает край своей карточки цветом из
theme-color.
Превью здесь следуют этим правилам. Каждое приложение время от времени меняет дизайн, так что считайте их близкими, а не точными.
Изображение для превью
Одно изображение подходит везде: 1200 × 630 пикселей (1,91:1), PNG или JPEG, по полному адресу https://.
- При ширине меньше 600 пикселей Facebook и LinkedIn показывают маленькую миниатюру вместо большой карточки. Меньше 200 × 200 Facebook изображение не показывает.
- X принимает изображения до 5 МБ, Facebook — до 8 МБ. WhatsApp часто не показывает изображения больше примерно 600 КБ, так что хорошо сжатый JPEG — надёжный выбор.
- SVG не поддерживает ни одно из крупных приложений.
- Относительный адрес вроде
/og.pngработает не у всех краулеров. Пишите полный URL. - Квадратная обрезка встречается часто (WhatsApp, iMessage для небольших ссылок), поэтому держите важную часть изображения ближе к центру.
Проверка загружает и изображение, измеряет его по заголовку файла и показывает в превью.
Почему превью всё ещё старое
Приложения кешируют загруженное — от нескольких минут до примерно недели. После того как вы исправите теги, проверка сразу покажет новую версию, но уже опубликованная ссылка сохранит старое превью, пока приложение не загрузит её снова. Sharing Debugger в Facebook и Post Inspector в LinkedIn загружают страницу заново по запросу. В Slack ссылка, отправленная повторно через какое-то время, получает новое превью. Если добавить строку запроса, например ?v=2, любое приложение воспримет ссылку как новую.
Частые вопросы
Почему в моём превью нет изображения?
Обычные причины по порядку: нет тега og:image, адрес изображения относительный или возвращает ошибку, изображение слишком маленькое или слишком большое, или тег добавляется JavaScript после загрузки страницы. Строка под каждой карточкой называет подходящую причину.
Какие теги нужны как минимум?
og:title, og:description, og:image с изображением 1200 × 630, og:url и twitter:card со значением summary_large_image. Генератор мета-тегов напишет их за вас.
Можно ли проверить страницы, для которых нужен вход?
Нет. Краулеры не входят в аккаунты, поэтому у страницы за логином нигде нет превью. Проверка видит то же, что и они, и загружает только публичные адреса: частные и внутренние сети отклоняются.
Сохраняет ли проверка загруженные страницы?
Нет. Она загружает страницу и её изображения, когда вы нажимаете «Проверить», и присылает вам найденное. Результат хранится две минуты, чтобы повторная проверка того же адреса была мгновенной, а затем удаляется. Она читает до 2 МБ HTML и до 8 МБ на изображение и прекращает попытку через 8 секунд.
Почему проверка пишет, что моя страница отвечает 403, хотя в браузере она открывается?
Некоторые сайты и файрволы блокируют запросы, которые приходят не из браузера или от известных им крупных краулеров. Если проверка получает 403, его могут получить и Facebook с LinkedIn: проверьте настройки ботов в своём файрволе.
Есть ли ограничения?
Двадцать проверок в минуту с одного адреса. Кроме того, каждый сайт загружается не чаще 60 раз в минуту на всех пользователей проверки, чтобы её нельзя было использовать для забрасывания сайта запросами. Результаты хранятся две минуты, поэтому тот же адрес, проверенный вскоре после этого, возвращается сразу; повторное нажатие Проверить на странице, которую вы смотрите, всегда загружает её заново.