Как пользоваться: Проверка Open Graph
- Вставьте URL, которым планируете поделиться, и нажмите Проверить теги.
- Сравните превью для Facebook/LinkedIn, X и Slack: они показывают, что каждая платформа построит по вашим тегам.
- Ищите красные значки «отсутствует» в таблицах тегов и убедитесь, что og:image загружается и имеет рекомендуемый размер.
- Скопируйте сгенерированный фрагмент для недостающих тегов в
<head>вашей страницы, затем заново просканируйте URL на каждой платформе.
Что такое проверка Open Graph?
Когда ссылкой делятся в Facebook, LinkedIn, Slack, WhatsApp, Discord и большинстве других приложений, платформа загружает страницу и строит карточку превью на основе мета-тегов Open Graph — протокола, изначально созданного Facebook. X (бывший Twitter) использует собственные теги twitter:*, но при их отсутствии берёт данные из Open Graph. Проверка Open Graph загружает страницу так же, как это делают платформы, показывает найденные теги и карточки, которые они создадут, поэтому вы можете исправить некорректное превью до того, как им поделятся.
Теги, которые должны быть на каждой странице
| Тег | Назначение |
|---|---|
og:title | Заголовок карточки. Может быть более живым, чем SEO-заголовок. |
og:description | Одно-два предложения под заголовком. |
og:image | Абсолютный URL изображения превью — главный фактор, влияющий на клики. |
og:url | Канонический URL, чтобы репосты вариантов страницы учитывались вместе. |
og:type | Обычно website или article. |
twitter:card | summary_large_image для большого изображения, summary для маленькой квадратной миниатюры. |
К рекомендуемым дополнительным тегам относятся og:site_name, og:locale, og:image:alt (описание изображения для программ чтения с экрана) и og:image:width/og:image:height, которые позволяют некоторым платформам отрисовать карточку до загрузки изображения.
Рекомендации по размеру изображения
- 1200 × 630 px (соотношение 1,91 : 1) хорошо работает в Facebook, LinkedIn и Slack. Держите важный текст подальше от краёв, так как некоторые приложения обрезают изображение до квадрата или соотношения 2 : 1.
- Большая карточка X: соотношение сторон 2 : 1, минимум 300 × 157 px, размер до 5 МБ. Изображение 1200 × 630 отображается с небольшой обрезкой.
- Для максимальной совместимости используйте JPEG или PNG, абсолютный URL с
https://и убедитесь, что изображение не заблокировано в robots.txt и не требует входа в систему.
Нужно изображение? Создайте его с помощью генератора OG-изображений.
Почему всё ещё показывается старое превью?
Платформы кэшируют превью, часто на несколько дней. После исправления тегов попросите каждую платформу заново загрузить страницу: Sharing Debugger от Facebook («Scrape Again»), Post Inspector от LinkedIn, а для Slack достаточно поделиться URL с безобидным параметром, например ?v=2. Также проверьте, что страница не блокирует краулеры и что теги присутствуют в HTML, сформированном на сервере, — большинство сборщиков не выполняют JavaScript. Чтобы написать полный набор тегов с нуля, используйте генератор мета-тегов.
Также ищут как: og теги, twitter card валидатор, превью ссылки, проверка og:image, facebook debugger, og мета-теги онлайн, предпросмотр ссылки в соцсети.
Инструменты, которые хорошо сочетаются с Проверка Open Graph
- Проверка мета-тегов — Узнайте, как Google, скорее всего, отобразит вашу страницу: длина title и description в пикселях, превью для ПК и мобильных устройств и все мета-теги в <head>.
- SEO-чекер и аудит сайта — Вставьте URL, и мы выполним до 70 проверок SEO на странице и полный аудит сайта: скорость по Lighthouse, заголовки безопасности и SSL, структурированные данные, битые ссылки, robots.txt и AI-краулеры, базовую доступность, трекинг и согласие, SPF/DKIM/DMARC и срок действия домена.
- Валидатор Schema-разметки — Проверьте структурированные данные на любой странице или вставьте свой JSON-LD, чтобы найти синтаксические ошибки, отсутствующие обязательные свойства и рекомендуемые поля для богатых результатов Google.
- Расшифровка robots.txt — Правила в robots.txt короткие, но их легко понять неправильно.
Часто задаваемые вопросы
Какой размер og:image лучше всего?
Нужны ли теги Twitter Card, если есть теги Open Graph?
twitter:card: X берёт данные из og:title, og:description и og:image. Добавьте twitter:card со значением summary_large_image, чтобы получить макет с большим изображением.