Проверка превью ссылки
Вставьте ссылку в чат, и она превратится в карточку с картинкой, заголовком и строкой текста. Или в унылый серый прямоугольник. Эта проверка читает теги, из которых собирается карточка, измеряет изображение и рисует результат для шести мест.
Что происходит, когда вы вставляете ссылку
Как только вы вставляете адрес в пост или в чат, сервер этого сервиса запрашивает страницу. Он её не показывает. Он читает начало HTML, ищет несколько тегов <meta>, скачивает картинку, на которую указывает один из них, и собирает из этих частей карточку. Затем он сохраняет карточку, и все, кто видит ссылку, получают сохранённую версию.
Теги следуют соглашению Open Graph, которое Facebook ввёл в 2010 году и которое сейчас читают почти все соцсети и мессенджеры. Каждый из них начинается с og:. X читает те же теги и добавляет один свой, twitter:card, чтобы выбрать макет.
Теги, по степени влияния
og:image- Картинка. Больше всего остального именно она решает, заметят ли ссылку. Адрес должен быть абсолютным, начинаться с
https://. og:title- Заголовок карточки. Без него сервисы берут тег
<title>, который часто заканчивается названием сайта, которое вы не хотели повторять. og:description- Одно-два предложения под заголовком. Запасной вариант это meta description, а после него отрывок, который сервис выберет за вас.
twitter:card- Задайте ему значение
summary_large_image, и X покажет картинку во всю ширину. Без него вы получите маленький квадрат рядом с текстом. og:url- Адрес, на который засчитываются лайки и репосты. Он должен совпадать с каноническим URL страницы.
og:site_name,og:type,og:locale,og:image:alt- Вспомогательные детали: подпись над заголовком в Slack и Discord, тип содержимого, язык и описание картинки для пользователей программ экранного доступа.
Как оценивается изображение
Наш сервер скачивает файл, указанный в og:image (или в twitter:image, если есть только он), и сравнивает его с такими порогами.
| Что измерено | Результат |
|---|---|
og:image нет вовсе | Проблема. Если есть только twitter:image, это становится предупреждением: у X картинка есть, у остальных нет. |
| Файл не загружается, это не изображение или он больше 5 MB | Проблема |
| Меньше 600 × 315 px | Проблема. Facebook и LinkedIn уменьшают его до миниатюры или отбрасывают |
| Меньше 1200 × 630 px | Предупреждение. Показывается, но выглядит размыто на экранах высокой плотности |
| Ширина, делённая на высоту, меньше 1,6 или больше 2,2 | Предупреждение. Карточки примерно 1,91 к 1, поэтому края обрезаются |
| Тяжелее 1 MB | Предупреждение. Некоторые загрузчики перестают ждать |
Относительный адрес, например /img/share.jpg | Предупреждение. Нескольким сервисам нужен полный URL |
Если нужен рецепт, который работает везде, сделайте один JPEG или WebP размером 1200 × 630 пикселей, меньше 300 KB, и не ставьте надписи близко к краям. Проверка также отмечает отсутствие заголовка или описания, <title> длиннее 60 символов, описание длиннее 200 и og:url, который расходится с канонической ссылкой.
Шесть карточек в результатах это реконструкции по вашим тегам. Ваш браузер загружает картинку с нашего сервера, в уменьшенной копии, так что проверяемый сайт вашего визита не видит.
Как добавить теги и обновить старые карточки
В конце результатов есть блок, заполненный по найденному. Он ставится внутрь <head>:
<meta property="og:title" content="How we made our builds twice as fast">
<meta property="og:description" content="Three changes to our pipeline, with the numbers before and after.">
<meta property="og:image" content="https://www.example.com/img/build-time-card.jpg">
<meta property="og:url" content="https://www.example.com/blog/build-time/">
<meta name="twitter:card" content="summary_large_image">Следите за атрибутом. Теги Open Graph используют property=, а тег X использует name=. В CMS всё это редко набирают вручную. В SEO-плагинах WordPress, темах Shopify, Squarespace и Webflow есть поле «изображение для соцсетей» для каждой страницы и значение по умолчанию для всего сайта.
Исправленные теги не меняют уже существующие карточки. Каждый сервис хранит свою копию днями или неделями. Запросить новую загрузку можно через Sharing Debugger у Facebook или Post Inspector у LinkedIn. В мессенджерах лишний параметр в ссылке, например ?v=2, превращает её в новый адрес.
Помните о двух ограничениях. Макеты меняются, поэтому рисунки показывают, какие части видны, а не точные пиксели. И проверка читает HTML, не запуская скрипты, так же, как работают загрузчики превью. Теги, которые вставляет JavaScript, здесь будут отсутствовать, и в соцсетях их тоже не будет.
Частые вопросы
Какого размера должно быть og:image?
1200 × 630 пикселей, соотношение 1,91 к 1, в JPEG, PNG или WebP. По возможности меньше 300 KB и в любом случае меньше 1 MB. Ниже 600 × 315 Facebook и LinkedIn перестают показывать его большой карточкой.
Почему у ссылки старая картинка, хотя я её поменял?
Сервис закешировал карточку, когда ссылкой поделились впервые. Пропустите адрес через Sharing Debugger у Facebook и нажмите «Scrape Again» или через Post Inspector у LinkedIn. У WhatsApp, iMessage и Slack такого инструмента нет, поэтому немного измените URL, чтобы получить новую карточку.
Нужны ли X ещё теги twitter:?
Только один. X читает og:title, og:description и og:image, когда версий twitter: нет. Добавьте twitter:card со значением summary_large_image, чтобы получить широкую картинку.
Почему при вставке ссылки нет никакого превью?
Обычно это страница, которой нужен JavaScript, чтобы создать теги, сервер или файрвол, который отгоняет ботов превью, стена входа или адрес og:image, который возвращает ошибку. Эта проверка сообщает об ошибке изображения, если она есть.
Помогают ли теги Open Graph в поисковой выдаче?
Нет. Поисковики строят сниппеты из тега title и meta description. Теги Open Graph определяют только то, как ссылка выглядит там, где ею делятся, а от этого зависит, сколько людей на неё нажмут.