Все инструменты

Проверка Open Graph и предпросмотра ссылок

Введите URL и посмотрите карточку, которая рисуется при отправке ссылки, рядом с каждым найденным тегом и всем, что с ними не так.

Вставьте любую публичную страницу. Если не указать схему, мы подставим https.

Вставьте публичный URL. Мы запросим страницу со своего сервера, прочитаем её теги Open Graph, Twitter card и стандартные мета-теги и нарисуем карточку, которую каждая площадка из них соберёт.

Наш сервер запрашивает указанную вами страницу. Изображение предпросмотра загружает ваш браузер напрямую с проверяемого сайта, поэтому ни одна картинка через нас не проходит.

Из чего собирается предпросмотр ссылки

Предпросмотр ссылки собирается из мета-тегов в head страницы. Facebook написал протокол Open Graph, и всё остальное его переняло, поэтому основную работу делают og:title, og:description, og:image и og:url. X читает те же теги и добавляет свои: twitter:card решает, идёт ли картинка во всю ширину или остаётся миниатюрой, а twitter:title, twitter:description и twitter:image перекрывают значения Open Graph, когда заданы. То, что страница пропустила, подменяется: сначала другим пространством имён, затем элементом title и мета-описанием, поэтому даже страница совсем без тегов всё равно получает карточку.

Почему предпросмотр остаётся неправильным после исправления

Площадки кешируют прочитанное. Facebook, LinkedIn и X держат каждый свою копию уже просканированной страницы, часто по несколько дней, поэтому карточка, которая была неправильной при первой отправке, остаётся такой ещё долго после исправления тегов. У каждого есть отладчик, перечитывающий страницу по запросу, и только так копию можно сбросить. Эта страница ничего не кеширует: если теги здесь читаются верно, а карточка снаружи всё ещё неправильная, дело в кешированной копии, а не в вашей разметке.

Вопросы про предпросмотр ссылок

С нашего сервера. Браузер не может прочитать теги страницы на другом домене, поэтому запрос должен идти со стороны сервера. Только изображение предпросмотра загружает ваш браузер, напрямую с проверяемого сайта.

Каждая площадка хранит собственную копию прочитанного, обычно несколько дней. У Facebook есть sharing debugger, который перечитывает URL по запросу, у LinkedIn - post inspector, а X перечитывает, когда его краулер зайдёт в следующий раз. Эта страница ничего не кеширует, поэтому она быстрее всего подтвердит, что сами теги в порядке, до того как идти чистить чужую копию.

Нет. X берёт теги og: для заголовка, описания и изображения, когда теги twitter: отсутствуют. Единственный, который стоит задать, - twitter:card, потому что именно он просит крупную раскладку вместо мелкой.

1200 на 630 пикселей - безопасный ответ, потому что так изображение заполняет рамку 1,91 к 1, которую рисует каждая площадка. Для маленькой карточки X подойдёт квадратное изображение. Размеры мы здесь не проверяем: для этого пришлось бы скачивать саму картинку, а этот инструмент никогда этого не делает.

Увидеть страницу такой, какой её видел автор отчёта

Session Replay сохраняет страницу, консоль и сетевые запросы рядом с отчётом об ошибке, поэтому у следующего человека сразу есть всё перед глазами, когда ссылка расшарилась неправильно.