Перевірка Open Graph Meta

Перевірте Open Graph та Twitter Card мета-теги для будь-якої HTML-сторінки. Витягніть og:title/og:description/og:image та Twitter-теги, виявте відсутні чи невалідні значення та створіть звіти у форматі JSON/PDF для обміну. Розроблено для SEO та налагодження соціальних прев'ю з підтримкою редіректів та виводом сирого тексту.

Loading…

Про інструмент Перевірка Open Graph Мета-Тегів

Вставте URL, щоб перевірити, які дані соціальні платформи зчитують з вашої сторінки: Open Graph (og:*) теги та метадані Twitter Card. Цей інструмент допомагає виявити відсутні заголовки/описи, зламані чи непублічні URL og:image, проблеми з редіректами та типові помилки прев'ю — щоб ваші посилання коректно відображалися в X/Twitter, Facebook, LinkedIn, Slack, Discord тощо.

Можливості

  • Витягнення Open Graph мета-тегів: og:title, og:description, og:image та інших властивостей OG, якщо вони присутні.
  • Витягнення Twitter Card тегів (twitter:card, twitter:title, twitter:description, twitter:image), якщо вони присутні.
  • Слідування за редіректами для перевірки фінального канонічного призначення (поширено для HTTP→HTTPS, www, локальних маршрутів).
  • Режим валідації лише HTML для фокусу на мета-тегах (не на інших ресурсах).
  • Результати + оцінка та фільтр "лише проблеми" для швидкого виправлення.
  • Вихід сирого тексту, який легко копіювати, порівнювати та ділитися.
  • Копіювання результатів для завдань та документації.
  • Експорт JSON для автоматизації та аудиту.
  • Експорт звітів PDF для клієнтів та SEO-аудиту.

🧭 Як використовувати for open-graph-meta-checker

1

Вставте URL сторінки

Введіть URL сторінки, прев'ю якої ви хочете перевірити (наприклад, цільової сторінки, посту в блозі, сторінки товару). Інструмент призначений для HTML-сторінок, не для зображень чи API.

2

Слідуйте за редіректами, якщо ваш сайт перенаправляє

Залиште опцію "Слідувати за редіректами" увімкненою, щоб інструмент перевіряв фінальне призначення, до якого, ймовірно, потраплять соціальні краулери.

3

Перегляньте значення OG та Twitter

Перевірте поля заголовка, опису та зображення. Шукайте порожні значення, заповнювачі, дублікати чи невідповідності між OG та Twitter тегами.

4

Виправте типові проблеми прев'ю

Переконайтеся, що og:image є абсолютною URL-адресою, публічно доступною та вказує на правильний ресурс. Підтвердьте, що заголовки/описи є лаконічними та унікальними для кожної сторінки.

5

Експортуйте та поділіться звітом

Завантажте JSON для автоматизації або PDF для звітів SEO/клієнтам. Використовуйте перегляд сирого тексту, щоб швидко вставити значення в завдання.

Технічні характеристики

Модель запиту та парсингу

Цей інструмент отримує цільову сторінку (HTML) та витягує Open Graph та Twitter Card мета-теги з meta-елементів документа. Він підтримує слідування за редіректами для перевірки фактичного призначення.

НалаштуванняПоведінкаЗа замовчуванням
Лише HTMLФокусується на HTML-сторінках та вилученні метаданихУвімкнено (за можливостями інструменту)
Слідувати за перенаправленнямиСлідує за перенаправленнями для перевірки кінцевої URL-адресиУвімкнено
Макс. перенаправленьОбмеження перенаправлень для запобігання зацикленням10
ТаймаутОбмеження часу очікування запиту15000 мс
User-AgentІдентифікує user agent запитуEncode64Bot/1.0 (+https://encode64.com)
Приватні мережіБлокує доступ до діапазонів приватних мереж для безпекиВимкнено (приватні мережі не дозволені)

Рекомендований набір метатегів (базовий)

Надійна база включає поля як Open Graph, так і Twitter Card, щоб попередній перегляд коректно відображався на всіх платформах.

ПлатформаМінімальні тегиПримітки
Open Graphog:title, og:description, og:imageДодайте og:url та og:type, де це застосовно
Twitter Cardtwitter:card, twitter:title, twitter:description, twitter:imagetwitter:card зазвичай має значення summary або summary_large_image
Навіть якщо ваша сторінка виглядає добре в браузері, краулери бачать лише те, що є в HTML-відповіді, яку вони отримують. Ін'єкція метаданих лише на стороні клієнта може не бути надійно виявлена.

Підводні камені og:image, на які варто звернути увагу

Найпоширеніші невдачі попереднього перегляду пов'язані з URL-адресою зображення: вона має бути доступною, абсолютною та сумісною з правилами отримання краулерів.

ПроблемаСимптомВирішення
Відносна URL-адреса зображенняПопередній перегляд не показує зображенняВикористовуйте абсолютну URL-адресу для og:image та twitter:image
Заблоковано авторизацією / robots / фаєрволомПопередній перегляд відсутній або невідповіднийЗабезпечте публічний доступ для краулерів; дозвольте агенти соціальних мереж, якщо ви фільтруєте
Перенаправлення URL зображенняДеякі платформи не можуть його отриматиВіддавайте перевагу прямій, стабільній URL зображення (без перенаправлень)
Неправильний тип контентуЗображення не розпізнаноНадавайте правильний Content-Type (наприклад, image/png, image/jpeg)

Командний рядок

Ви можете перевіряти OG/Twitter теги з терміналу, отримуючи HTML та шукаючи мета-теги. Корисно для CI перевірок та налагодження проблем SSR.

macOS / Linux

Отримати HTML та вивести список OG/Twitter мета-тегів

curl -Ls https://example.com/page | grep -i -E "<meta[^>]+(property=\"og:|name=\"twitter:)"

Показує мета-теги, що впливають на соціальні попередні перегляди. Використовуйте -L для слідування за перенаправленнями.

Перевірити кінцеву URL після перенаправлень

curl -ILs https://example.com/page | awk '/^HTTP\//{print} /^location:/I{print}'

Виводить рядки статусу ланцюжка перенаправлень та заголовки Location.

Windows (PowerShell)

Завантажити HTML та знайти OG/Twitter теги

$html = (Invoke-WebRequest https://example.com/page).Content; $html -split "`n" | Select-String -Pattern "<meta" | Select-String -Pattern "og:|twitter:"

Швидкий спосіб підтвердити наявність тегів у доставленому HTML.

Якщо ваш додаток сильно залежить від SPA, переконайтеся, що OG/Twitter теги відображаються на стороні сервера (SSR/SSG) для надійності. Краулери можуть не виконувати ваш клієнтський JavaScript так, як це роблять браузери.

Випадки використання

Виправити зламані соціальні попередні перегляди

Коли посилання ділиться з неправильною назвою, без зображення або застарілим текстом, цей інструмент допомагає швидко знайти відсутні або неправильні мета-поля.

  • Перевірити og:title та twitter:title
  • Підтвердити, що og:image доступне та абсолютне
  • Виявити порожні описи або заповнювачі

QA для динамічних сторінок та SSR

Переконайтеся, що ваш фреймворк виводить OG/Twitter теги у відповіді HTML для кожного маршруту (особливо з Next.js, Nuxt, SvelteKit тощо).

  • Підтвердити наявність мета-даних для кожної сторінки в HTML
  • Виявити генерацію мета-даних лише на клієнті
  • Перевірити перенаправлення на канонічні локалі

SEO та робочі процеси публікації контенту

Стандартизуйте попередні перегляди на всьому сайті: узгоджені назви/описи, правильний OG тип та стабільні зображення покращують CTR, коли посиланнями діляться.

  • Аудит шаблонів на наявність відсутніх полей OG
  • Експорт PDF/JSON для редакційних контрольних списків
  • Виявлення дубльованих метаданих на кількох сторінках

Звітність для клієнтів та аудит

Створюйте чіткий, експортований звіт для документування статусу соціальних прев'ю та рекомендованих виправлень.

  • PDF-звіт для стейкхолдерів
  • JSON-звіт для відстеження змін у часі

❓ Frequently Asked Questions

❓У чому різниця між Open Graph та Twitter Cards?

Open Graph (og:*) використовується багатьма платформами (Facebook, LinkedIn, Slack/Discord тощо). Twitter Cards (twitter:*) використовує X/Twitter. Багато сайтів публікують обидва для найкращого покриття.

❓Чому моє прев'ю показує старе зображення чи заголовок?

Платформи кешують прев'ю. Після виправлення тегів часто потрібно повторно зібрати дані за допомогою інструментів налагодження платформи, і можливо доведеться чекати на оновлення кешу.

❓Чому моє зображення og:image не відображається?

Поширені причини: URL є відносним, заблокований (авторизація/WAF/robots), забагато редіректів, неправильний тип контенту або недоступний публічно. Використовуйте цей інструмент для перевірки витягнутого значення, а потім протестуйте URL зображення безпосередньо.

❓Чи потрібні мені і og:title, і twitter:title?

Рекомендується. Деякі платформи покладаються на OG, інші — на теги Twitter. Наявність обох зменшує невідповідності.

❓Чи можу я протестувати сторінку, захищену логіном?

Соціальні краулери зазвичай не мають доступу до автентифікованого контенту, тому прев'ю не працюватимуть надійно. Віддавайте перевагу публічним сторінкам прев'ю або публічним OG-ендпоінтам для контенту, яким можна ділитися.

❓Безпечно вставляти сюди URL?

Інструмент робить серверні запити до наданого URL і блокує цілі в приватних мережах. Уникайте розміщення секретів (токенів) у рядках запиту.

Pro Tips

Best Practice

Використовуйте абсолютні URL для og:image та twitter:image і зберігайте їх стабільними (уникайте редіректів), щоб зменшити збої краулерів.

Best Practice

Генеруйте OG-зображення детерміновано (шаблон + параметри), щоб ви могли оновлювати брендинг, зберігаючи URL стабільними для кожної сторінки.

Best Practice

Для додатків Next.js/SSR перевіряйте теги у початковій HTML-відповіді (Перегляд коду), а не лише в DOM після гідратації.

Best Practice

Зберігайте заголовки лаконічними та унікальними для кожної сторінки; надто довгі заголовки можуть бути обрізані в прев'ю та знизити CTR.

CI Tip

Експортуйте JSON-звіти та додавайте їх до свого контрольного списку релізу, щоб виявляти регресії в мета-шаблонах.

Additional Resources

Протокол Open Graph
Documentation
Документація Twitter Cards (X)
Documentation
Метатеги для соціальних прев'ю (MDN: <meta>)
Documentation
Google Search Central: керування сніпетами (метатеги)
Documentation

Other Tools