Перевірка Open Graph — превʼю посилання в соцмережах

Open Graph Debugger — перевірка OG-тегів

Перевірте Open Graph та Twitter Card теги вашого сайту. Побачте, як контент виглядає при шерінгу у Facebook, Twitter та LinkedIn. Оцінка повноти OG-розмітки та рекомендації.

Перевірка всіх OG-тегів

Валідація Twitter Card

Передперегляд для Facebook, Twitter, LinkedIn

Оцінка повноти розмітки

Перевірка розмірів OG-зображення

Рекомендації щодо покращення

Як користуватися

Введіть URL для перевірки OG-тегів
Вивчіть прев'ю для кожної соцмережі
Виправте теги, що не вистачає, за рекомендаціями

FAQ

Мінімальний набір: og:title, og:description, og:image, og:url, og:type. Для Twitter додайте twitter:card. Рекомендується також og:locale та og:site_name.

Для Facebook — 1200×630px. Для Twitter — 1200×600px (summary_large_image). Мінімальний розмір — 200×200px. Файл не більше 8 МБ.

Соцмережі кешують картку. У Facebook відкрийте Sharing Debugger і натисніть «Scrape Again», у LinkedIn перевірте адресу в Post Inspector, у Telegram надішліть посилання боту @WebpageBot. У X ручного скидання немає: допоможе адреса з параметром, наприклад ?v=2.

Найчастіше теги додає JavaScript (роботи соцмереж скриптів не виконують), робота заблоковано в robots.txt чи файрволом, або og:image вказано відносним шляхом. Наш інструмент теж не виконує JavaScript, тому показує те, що бачить робот.

Перевірка Open Graph: що показує звіт

Коли посилання вставляють у Facebook, LinkedIn, X, Telegram, Slack чи месенджер, робот платформи завантажує сторінку й читає теги Open Graph у <head>. З них складається картка: заголовок, опис, зображення. Інструмент завантажує сторінку так само — з нашого сервера й без виконання JavaScript — і показує три речі:

Превʼю карток Facebook, X і LinkedIn зі знайдених тегів. Верстка повторює кожну соцмережу, але це наближення: справжня картка залежить від поточного дизайну платформи та її кешу.
Список тегів: сім тегів Open Graph (og:title, og:description, og:image, og:url, og:type, og:site_name, og:locale) і чотири теги X (twitter:card, twitter:title, twitter:description, twitter:image) з позначкою «є / немає».
Оцінку від 0 до 100. Кожен тег має свою вагу (найбільшу — заголовок і зображення, найменшу — локаль), оцінка — частка знайденої ваги. Вона вимірює повноту, а не якість: погано написаний заголовок теж зараховується.

Під превʼю видно справжній розмір og:image (його вимірює ваш браузер), розмір, оголошений в og:image:width і og:image:height, текст og:image:alt і попередження, якщо адресу зображення вказано відносним шляхом.

Які теги Open Graph обовʼязкові

Протокол Open Graph (ogp.me) називає чотири обовʼязкові властивості. З описом і типом картки X виходить набір, що працює всюди:

Тег	Статус	Що писати
`og:title`	Обовʼязковий	Заголовок картки. Може відрізнятися від `<title>`: без назви сайту в кінці, під стрічку.
`og:type`	Обовʼязковий	`website` для головної й розділів, `article` для статей.
`og:image`	Обовʼязковий	Повна адреса зображення з `https://`.
`og:url`	Обовʼязковий	Канонічна адреса цієї сторінки, а не головної.
`og:description`	Бажаний	Одне-два речення. Facebook показує мало, інші застосунки — більше.
`og:site_name`, `og:locale`	За бажанням	Назва бренду й мова, наприклад `uk_UA`.
`twitter:card`	Потрібен для X	`summary_large_image` — велике зображення, `summary` — мініатюра.

Мінімальний набір у <head>:

<meta property="og:title" content="Весняний розпродаж: −30% на бігові кросівки">
<meta property="og:description" content="Лише два тижні, безкоштовне повернення.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/sale">
<meta property="og:image" content="https://example.com/img/sale-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Три пари кросівок на біговій доріжці">
<meta name="twitter:card" content="summary_large_image">

Розмір зображення для Open Graph

Одне зображення 1200×630 пікселів (співвідношення 1.91:1) підходить для Facebook, LinkedIn і великих карток X. Текст і логотип тримайте ближче до центру: деякі застосунки обрізають краї або показують квадратну мініатюру.

Платформа	Що вказано в документації
Facebook	Для великої картки — від 1200×630; зображення менші за 600×315 показуються в малому форматі; мінімум 200×200; файл до 8 МБ.
LinkedIn	1.91:1, рекомендовано 1200×627.
X, `summary_large_image`	2:1, мінімум 300×157, файл до 5 МБ; JPG, PNG, WebP або GIF (лише перший кадр).
X, `summary`	1:1, мінімум 144×144.

Теги og:image:width і og:image:height дозволяють Facebook показати картку вже під час першого поширення, не чекаючи на завантаження зображення. Стискайте файл: банер на 3 МБ гальмує робота, а частина месенджерів важкі зображення пропускає.

Чому превʼю не оновилося і як його скинути

Кожна платформа кешує те, що колись завантажила. Після виправлення тегів наш інструмент одразу покаже нову версію, а соцмережа — стару, доки не перечитає сторінку. Скинути кеш можна офіційними інструментами:

Facebook, посилання в Instagram і Messenger: Sharing Debugger на developers.facebook.com — вставте адресу й натисніть «Scrape Again». Сам Facebook оновлює дані приблизно раз на 30 днів.
LinkedIn: Post Inspector на linkedin.com/post-inspector. Перевірка адреси наново завантажує сторінку; без неї LinkedIn тримає кеш близько семи днів.
Telegram: надішліть посилання офіційному боту @WebpageBot — він оновить превʼю, яке Telegram зберігає для цієї адреси.
X: старий Card Validator превʼю більше не показує, ручного скидання немає. Картку видно у вікні нового допису після вставлення посилання. Якщо X уперто тримає стару, публікуйте адресу з нешкідливим параметром на кшталт ?v=2 — для X це нова URL-адреса.

Зображення теж кешуються за адресою. Якщо замінити файл під тим самим імʼям, частина застосунків і далі показуватиме старий. Завантажте нове зображення під новим імʼям і виправте og:image.

Картки X: що береться з Open Graph

X спочатку читає власні теги twitter:*. Якщо немає twitter:title, twitter:description чи twitter:image, X візьме og:title, og:description і og:image. Тож дублювати все не треба: на сторінці з повним Open Graph досить додати twitter:card. Наше превʼю X працює за тією ж схемою. Теги X зазвичай пишуть через атрибут name; інструмент читає їх лише з name.

Поширені помилки Open Graph

Відносний шлях до зображення. /img/cover.jpg працює в браузері, але не в робота соцмережі. Потрібна повна адреса з https://; звіт попереджає про відносний шлях.
Теги ставить JavaScript. Роботи соцмереж скриптів не виконують. Якщо фреймворк заповнює мета-теги на клієнті, робот бачить порожній шаблон. Виводьте теги на сервері або використовуйте пререндер. Наш інструмент JavaScript теж не виконує, тож тег, якого немає тут, найімовірніше не побачить і Facebook.
Робота заблоковано. Disallow у robots.txt, захист від ботів у файрволі, геоблокування чи стіна авторизації — і соцмережа бачить сторінку помилки. Перевірте robots.txt і відповідь сервера в HTTP-заголовках.
Один шаблон на всі сторінки. Однакові заголовок і зображення на всіх URL — і кожен репост виглядає як головна. Генеруйте og:title, og:description і og:image для кожної сторінки.
Неправильний og:url. Facebook вважає og:url канонічною адресою й будує картку за тією сторінкою. Якщо всюди стоїть головна, будь-який репост покаже головну.
Кілька og:image помилково. Буває, що тег виводять і тема, і SEO-плагін. Зазвичай береться перший — і не завжди потрібний.
Ланцюжки редиректів. Роботи йдуть за редиректами, але довгий ланцюжок або редирект на сторінку входу ламають превʼю. Перевірте редиректи.

Open Graph і SEO

Google не ранжує сторінки за тегами Open Graph і будує сніпет із <title> та meta description, а не з og:*. Open Graph впливає на переходи із соцмереж і месенджерів: картку з зрозумілим зображенням помічають. Пошукову частину перевіряйте окремо: перевірка мета-тегів покаже title, description і canonical, а SERP Preview — як сторінка виглядає в Google.