Проверка Open Graph
Теги Open Graph — это метатеги, которые определяют, как выглядит страница, когда её ссылку вставляют в Facebook, X, LinkedIn, Slack или чат-приложение. Введите URL, и этот проверщик получит страницу один раз, покажет, какие именно теги и запасные варианты будет использовать каждая платформа, отрисует четыре карточки для шеринга и проверит реальные размеры изображения. Сопутствующее руководство проверьте карточки перед публикацией пошагово объясняет, как исправить найденное; для более широкой плановой проверки используйте вместо этого проверку здоровья сайта.
Последнее обновление:
Хотите постоянный контроль? Следите бесплатно с myeventwatch — оповещения об истечении срока и простоях, без карты.
Как работает проверка
Проверщик выполняет одно защищённое серверное получение введённого вами URL, следует за редиректами и читает статический HTML конечной страницы — тот же HTML, что видит скрапер платформы. Он разбирает метатеги og: и twitter:, <title> страницы и мета-описание, а затем вычисляет, платформа за платформой, какое значение реально покажет каждая карточка и откуда это значение взялось. Значения, предоставленные запасным вариантом, помечены как запасные, чтобы карточка, выглядящая полной, не скрывала отсутствующий тег под собой.
Одно ограничение определяет всё остальное: это обычное HTTP-получение, а не браузер, и скраперы платформ тоже не браузеры — ни те, ни другие не выполняют JavaScript. Теги, внедрённые скриптом, отрисованные на клиенте или добавленные только после входа, невидимы здесь и невидимы в Facebook, X, LinkedIn и Slack ровно тем же образом. Если тег существует только в вашем пакете JavaScript, для шеринга он не существует. То, что вы видите в результате — конечный URL, статус HTTP, сырую таблицу тегов и четыре отрисованные карточки, — это статическая истина, с которой приходится работать скраперам.
Запасные варианты, ловушка относительного изображения и кэши скраперов
Каждая платформа откатывается по-разному, поэтому одна и та же страница может выглядеть правильно в одном приложении и сломанно в другом. Facebook читает теги og: напрямую. X сначала читает свои собственные теги twitter: и откатывается к соответствующим тегам og:, когда их нет. LinkedIn читает только теги og:, поэтому идеальная настройка Twitter Card там ничем не помогает. Slack сначала читает теги og:, а затем теги twitter:. Контрольный список ниже отмечает каждое отсутствующее поле, каждое пустое поле и каждое поле, которое платформа заполнила бы из запасного варианта, называя источник, к которому она откатилась бы.
Самая частая тихая поломка — относительный og:image: значение вроде /images/share.jpg выглядит нормально в вашем шаблоне и в вашем браузере, но большинство скраперов не могут разрешить его относительно чего-либо, поэтому карточка просто не показывает изображение. Исправление — всегда абсолютный URL, включая схему. Вторая ловушка — кэширование: каждая платформа кэширует то, что получил её скрапер, поэтому исправление тегов не обновляет уже вышедшие публикации, и даже свежий предпросмотр может продолжать отдавать старую карточку, пока вы не попросите платформу повторно соскрапить URL. Сначала исправьте теги, проверьте их здесь, а затем повторно соскрапьте — именно в этом порядке, иначе вы снова закэшируете сломанную версию.
Честные ограничения: предпросмотр здесь — это моделирование документированного поведения каждой платформы, а не скриншот реальной публикации. Платформы по-разному обрезают, скругляют и усекают, меняют макеты своих карточек без уведомления и могут по-разному обращаться с вошедшими и невошедшими зрителями, поэтому относитесь к карточкам как к верной модели, а не как к гарантии. Одно не моделируется: размеры изображения читаются из заголовков реального файла изображения, а не из значений og:image:width и og:image:height, которые объявляет страница, — объявленные значения являются заявлениями, и этот проверщик сверяет их с самим файлом.
Что проверяется и правила, стоящие за этим
| Проверяемые теги | og:title, og:description, og:image, og:url, og:type и og:site_name, плюс twitter:card, twitter:title, twitter:description и twitter:image — и, в качестве источников запасных вариантов, <title> страницы и мета-описание. |
| Рекомендуемый размер изображения — 1200 × 630 px | 1200 × 630 — это рекомендация платформ, а не формальный стандарт: это размер, который рекомендует Facebook, и размер большой карточки, с которым X, LinkedIn и Slack работают лучше всего. Изображения меньшего размера всё равно отображаются, но карточки могут обрезать их или откатиться к маленькой миниатюре. |
| Читает теги og: напрямую — og:title, og:description и og:image — и откатывается к <title> страницы и мета-описанию, только когда теги og: отсутствуют. | |
| X (Twitter) | Сначала читает twitter:title, twitter:description и twitter:image; каждый откатывается к соответствующему тегу og:, когда отсутствует. twitter:card выбирает макет карточки, а без него X угадывает по тому, что находит. |
| LinkedIn и Slack | LinkedIn читает только теги og: — теги twitter: там не помогают. Slack сначала читает теги og:, а затем теги twitter:, поэтому он самый снисходительный из четырёх. |
| Относительные URL изображений | og:image и twitter:image должны быть абсолютными URL, включая схему. Большинство скраперов не может разрешить относительный путь, и результат — карточка без изображения и без какой-либо ошибки где-либо. |
| Размеры изображения | Читаются из реального файла изображения — его заголовков PNG, JPEG, GIF или WebP — вместе с его размером в байтах и форматом. Объявленные og:image:width и og:image:height показываются для сравнения, но им никогда не доверяют самим по себе. |
| Размеры неизвестны | Означает, что проверщик не смог получить или разобрать файл изображения — истекло время ожидания, запрос был отклонён или формат имеет заголовок, который он не может прочитать. Тогда объявленные страницей размеры, если они есть, — это всё, что есть у кого-либо, включая скраперы. |
Частые вопросы
Почему моя опубликованная ссылка не показывает изображение?
Обычные причины, по порядку: og:image вообще нет; og:image — это относительный URL, который скраперы не могут разрешить; изображение слишком мало или находится там, куда скрапер не может добраться (за входом, заблокировано правилами robots или отвечает ошибкой); либо платформа всё ещё показывает свой закэшированный скрап, сделанный до появления изображения. Запустите проверку выше — она назовёт, какая из причин применима, — исправьте тег, а затем попросите платформу повторно соскрапить.
Теги Open Graph или Twitter — нужны оба набора?
На практике — да. Facebook и LinkedIn читают только теги og:, тогда как X предпочитает свои собственные теги twitter: и использует теги og: как запасной вариант. Полный набор og: плюс тег twitter:card покрывает большинство случаев, но явные twitter:title, twitter:description и twitter:image — единственный способ сделать карточку X отличной от карточки Facebook, — а Slack читает оба набора, сначала og:.
Почему реальная публикация выглядит иначе, чем этот предпросмотр?
Почти всегда из-за кэширования. Скрапер каждой платформы кэширует то, что он получил для URL, и редактирование ваших тегов не делает этот кэш недействительным. Публикация, созданная до исправления, сохраняет старую карточку, и даже собственный отладчик платформы может продолжать показывать закэшированную версию, пока повторный скрап не будет принудительно выполнен. Реже разница — в обрезке: платформы обрезают и усекают под свой текущий макет, а этот предпросмотр — моделирование документированного поведения, а не скриншот.
Выполняет ли этот проверщик JavaScript?
Нет — и это намеренно. Проверщик получает статический HTML один раз, ровно так, как это делает скрапер платформы, а скраперы тоже не выполняют JavaScript. Поэтому тег, добавленный скриптом или клиентским фреймворком, отсутствует здесь по той же причине, по которой он отсутствовал бы в Facebook, X, LinkedIn и Slack. Если ваши теги отрисовываются JavaScript, они должны находиться в отрендеренном на сервере HTML, чтобы засчитываться при шеринге.
Какого размера должен быть og:image?
По возможности используйте 1200 × 630 px. Это рекомендация платформ, а не формальный стандарт — это то, что рекомендует Facebook, и размер, вокруг которого построены большие карточки в X, LinkedIn и Slack. Держите файл разумно маленьким, используйте PNG или JPEG (поддержка WebP зависит от скрапера) и всегда ссылайтесь на него абсолютным URL. Этот проверщик помечает изображения меньше 1200 × 630 и сообщает вам реальные размеры, которые он измерил из файла.