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 и запустите повторный скрейп, чтобы сбросить кэш.

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

Валидатор XML-карты сайта

Проверьте XML-карту сайта в браузере: ошибки разбора, отсутствующие адреса, повторы URL и распространённые значения полей.

Инструмент проверки заголовков безопасности HTTP

Вставьте HTTP-заголовки ответа и локально проверьте HSTS, CSP, clickjacking, MIME, referrer и политики cross-origin.

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

Вставьте сырой HTML-код, при желании укажите базовый URL и получите чистый список без дубликатов всех внешних ссылок http/https в коде для проверки ссылок и анализа SEO.

Проверка длины мета-описания

Измерьте мета-описание в символах и расчётных пикселях, сравните редакционные ориентиры и макеты для компьютера и телефона.

Канонический генератор тегов

Создайте действительный тег ссылки rel=canonical для любого URL. Включает проверку URL и типичные ошибки, которых следует избегать.

Симулятор выдачи Google

Посмотрите приблизительный сниппет в стиле Google с лимитами символов для телефона и компьютера. Черновик остаётся в текущем сеансе браузера.

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