Softonic

Проверка тегов Open Graph

Шаг 1 / 3
Далее

Вставьте HTML своей страницы (достаточно одного <head>), и этот инструмент разберёт каждый метатег og: и twitter:, который найдёт, а затем покажет, какие из шести основных тегов есть, каких не хватает и какое точное значение у каждого. Поскольку он читает разметку, которую вы вставляете, а не загружает страницу по URL, он работает и на тестовых серверах, и на localhost, и на страницах за авторизацией, куда ни один онлайн-скрейпер не доберётся.

Как инструмент читает ваши теги

  1. 1

    Откройте исходный код страницы

    Нажмите Ctrl+U (Cmd+Option+U на macOS), чтобы увидеть сырой HTML, который на самом деле получают социальные скрейперы.

  2. 2

    Скопируйте секцию head

    Выделите фрагмент от `<head>` до `</head>`. Тело `<body>` не нужно, хотя вставка всей страницы ничему не вредит.

  3. 3

    Вставьте в инструмент

    Каждый тег `<meta>` разбирается по мере ввода. Никакой URL не загружается: анализируется только та разметка, которую вы вставили.

  4. 4

    Прочитайте контрольный список

    Шесть проверок становятся зелёными или красными: og:title, og:description, og:type, og:url, og:image и twitter:card.

  5. 5

    Просмотрите найденные значения

    Каждый тег og: и twitter: выводится со своим содержимым, поэтому опечатки, пустые значения и относительные пути к изображениям сразу бросаются в глаза.

Теги Open Graph, которые ищет инструмент

Тег Назначение В контрольном списке?
og:title Заголовок карточки Да, обязательный
og:description Подзаголовок карточки Да, обязательный
og:type website, article, video и т. д. Да, обязательный
og:url Канонический URL Да, обязательный
og:image URL изображения предпросмотра Да, обязательный
og:site_name Название бренда над заголовком Показывается, если есть
og:locale en_US, es_ES и т. д. Показывается, если есть

Любой другой тег og: в вашей разметке тоже выводится, даже если он не входит в контрольный список.

Теги Twitter Card

X (Twitter) при отсутствии собственных тегов использует Open Graph, поэтому в контрольном списке есть только twitter:card. Остальные выводятся всегда, когда инструмент их находит.

Тег Назначение
twitter:card summary, summary_large_image и т. д.
twitter:site @аккаунт публикующей учётной записи
twitter:creator @аккаунт автора
twitter:title Переопределяет og:title
twitter:description Переопределяет og:description
twitter:image Переопределяет og:image

Параметры изображения, которые работают везде

Инструмент подтверждает, что og:image объявлен, но никогда не скачивает сам файл, поэтому проверьте эти пункты вручную:

  • Размеры: 1200 x 630 px (Facebook, LinkedIn, большие карточки Twitter).
  • Соотношение сторон: 1.91:1 для summary_large_image.
  • Размер файла: менее 5 МБ, в идеале менее 1 МБ, чтобы скрейпер не отвалился по тайм-ауту.
  • Формат: JPG или PNG. WebP и AVIF до сих пор поддерживаются нестабильно.
  • Абсолютный URL: всегда полный адрес https://..., никогда не путь, относительный к протоколу или к корню.

Распространённые проблемы, которые выявляет отчёт

  • Нет og:image. Самая частая ошибка. Без изображения карточка вырождается в неоформленную синюю ссылку.
  • Тег есть, но пустой. Инструмент выводит каждое значение, поэтому og:title, за которым ничего нет, легко заметить.
  • Относительный путь к изображению. og:image должен быть абсолютным URL; путь вроде /img/card.jpg ломает скрейпинг.
  • Несоответствие og:url. Когда og:url отличается от настоящего канонического, платформы могут отказаться скрейпить страницу.
  • Теги, вставленные через JavaScript. Их нет во view-source, значит нет и здесь, а большинство скрейперов их не увидят.
  • Устаревшая карточка в Facebook. Это не проблема разметки: Facebook кэширует свои скрейпы. Принудительно обновите её через Sharing Debugger.

Часто задаваемые вопросы

Потому что вставка разметки показывает ровно то, что видит социальный скрейпер в сыром ответе, и это работает на страницах, до которых скрейпер не доберётся: тестовые серверы, localhost, интранет и всё, что за авторизацией. Откройте страницу, нажмите Ctrl+U, скопируйте исходный код, вставьте сюда.

Строго говоря, нет. X при отсутствии тегов twitter: использует теги Open Graph, поэтому в контрольном списке есть только twitter:card. Добавляйте остальные лишь тогда, когда хотите другой заголовок, описание или изображение в X, чем на всех прочих платформах.

Инспектор показывает DOM после выполнения JavaScript, тогда как социальные скрейперы читают сырой HTML-ответ. Используйте view-source (Ctrl+U), а не инспектор, и вставляйте именно его. Если тег существует только в DOM, добавьте серверный рендеринг или сервис пререндера, чтобы скрейперы могли его увидеть.

1200 x 630 px, JPG или PNG. Это рекомендуемый размер для больших карточек Facebook и LinkedIn, он принимается X и аккуратно масштабируется в Slack, Discord и других приложениях, разворачивающих ссылки. Инструмент подтверждает, что og:image объявлен, но сам файл не открывает, так что проверьте размеры самостоятельно.

Facebook кэширует результаты скрейпинга до 30 дней. Вставьте URL в Sharing Debugger по адресу developers.facebook.com/tools/debug и запустите повторный скрейп, чтобы сбросить кэш.

Сопутствующие инструменты

Проверка смешанного контента

Просканируйте любую страницу на HTTPS в поисках небезопасных HTTP-ресурсов, которые вызывают предупреждения о смешанном контенте и ломают значок замка в браузере.

Парсер UTM

Вставьте URL кампании и прочитайте пять стандартных UTM-меток (source, medium, campaign, term и content) с каждым декодированным значением. Быстрый способ проверить ссылку отслеживания перед отправкой.

Генератор карты сайта

Вставьте список URL и создайте корректную карту сайта XML с changefreq, priority и необязательным lastmod, готовую к сохранению и отправке в Search Console.

Инструмент для извлечения метаданных

Извлеките метаданные страницы из любого URL: название, метаописание, Open Graph, карточки в Twitter, канонический URL и структурированные данные в формате JSON-LD.

Конструктор UTM-ссылок

Создавайте URL для отслеживания кампаний с параметрами UTM source, medium, campaign, term и content. Чистые ссылки с URL-кодированием, готовые для рекламы и рассылок.

Анализатор заголовков безопасности

Вставьте свои заголовки HTTP-ответа и получите приоритизированные советы по заголовкам безопасности, которые важны: Content-Security-Policy, Strict-Transport-Security, X-Frame-Options, Referrer-Policy и другим.

Инструмент доступен на других языках