Open Graph: що це таке та як з ним працювати у 2026 році

Q: Яким має бути розмір og:image у 2026 році?

Рекомендований стандарт — 1200×630 пікселів (співвідношення 1.91:1). Це оптимальний розмір для Facebook, LinkedIn, Telegram і більшості інших платформ. Мінімум для Facebook — 600×315. Для Twitter/X з типом картки summary_large_image — також 1200×630 або близькі пропорції. Формат — JPEG або PNG, вага до 1 МБ.

Q: Чи можна задати різні OG-теги для Facebook і Twitter?

Так. Open Graph використовує атрибут property="og:...", Twitter Cards — name="twitter:...". Це два незалежних набори тегів. Ви можете вказати різні заголовки, описи і навіть зображення для кожної платформи. Якщо Twitter Card-теги відсутні, Twitter автоматично використовує OG-дані як запасний варіант.

Q: Чи потрібні OG-теги для мультимовного сайту?

Так, і для кожної мовної версії — окремий набір OG-тегів. og:locale повинен відповідати мові сторінки (uk_UA, en_GB, pl_PL). Для вказівки альтернативних мов використовується og:locale:alternate. Yoast SEO з Polylang автоматично генерує правильні локалі для кожної мовної версії — переконайтеся, що ці плагіни коректно інтегровані між собою.

Q: Як перевірити OG-теги без публікації у соцмережі?

Використовуйте безкоштовні онлайн-інструменти: opengraph.xyz (показує превʼю для кількох платформ одразу), metatags.io, socialsharepreview.com. Вони симулюють, як виглядатиме картка посилання, без необхідності публікувати пост. Facebook Sharing Debugger також дозволяє перевірити будь-який публічно доступний URL без публікації.

Автор Валерій | 08 Чер 2026 | 8 хв читання 0 переглядів

Open Graph — це протокол розмітки HTML-сторінок, який визначає, як виглядає посилання на вашу статтю або сторінку при шерингу у Facebook, LinkedIn, Telegram та інших соцмережах. Правильно налаштовані OG-теги перетворюють «сірий рядок URL» на привабливу картку з зображенням, заголовком і описом — і напряму впливають на CTR і охоплення публікацій.

Що таке Open Graph і навіщо він потрібен

Open Graph (OG) — відкритий протокол, розроблений командою Facebook (Meta) у 2010 році. Він дозволяє веб-сторінкам «розповідати» соціальним мережам, як саме відображати посилання на них: який заголовок показати, який опис підтягнути, яку картинку використати як обкладинку прев’ю.

Технічно Open Graph — це набір meta-тегів у секції <head> HTML-сторінки з префіксом og:. Коли користувач копіює URL у Facebook, LinkedIn, Telegram або Viber, платформа зчитує ці теги та формує красиву карту посилання — link preview.

Без OG-розмітки соцмережа намагається «вгадати» контент сторінки самостійно: підтягує випадкове зображення, бере перший абзац тексту, обрізає заголовок. Результат — непривабливий, такий, що не викликає довіри. З правильно налаштованими OG-тегами посилання виглядає так, як ви хочете, щоб його бачила ваша аудиторія.

Для бізнесу це означає конкретні цифри: дослідження Buffer показують, що публікації з якісним зображенням отримують на 150% більше репостів порівняно з текстовими посиланнями. Крім того, AI-асистенти на кшталт ChatGPT та Perplexity при обробці контенту з соцмереж також орієнтуються на структуровані метадані — правильна OG-розмітка покращує видимість вашого бренду і в цьому каналі.

Як працює механізм link preview у соцмережах

Коли ви вставляєте URL у пост або повідомлення, соціальна мережа запускає власний скрапер — бот, який завантажує сторінку і читає її <head>. Цей процес відбувається у кілька кроків:

Запит до URL: бот платформи надсилає HTTP GET-запит до вашої сторінки з власним User-Agent (наприклад, facebookexternalhit/1.1).
Парсинг HTML: бот зчитує <head> сторінки та шукає OG-теги, Twitter Card-теги і стандартні <meta>-теги.
Кешування: результати зберігаються в кеші платформи. Facebook кешує дані на кілька годин або до примусового оновлення через Sharing Debugger. LinkedIn зберігає кеш до 7 днів.
Рендеринг картки: платформа формує link preview на основі зчитаних даних і відображає його у стрічці.

Важливий нюанс: скрапер завантажує сторінку з серверного боку, тому контент, що рендериться виключно через JavaScript (SPA, React без SSR), може бути невидимим для ботів. Для таких сайтів потрібен серверний рендеринг (SSR) або попереднє генерування статичних метаданих.

Ще один важливий аспект — кеш. Якщо ви оновили OG-теги після першої публікації посилання, соцмережа ще певний час показуватиме стару версію. Для Facebook використовуйте Sharing Debugger, для LinkedIn — Post Inspector, щоб примусово скинути кеш.

7 основних OG-тегів: синтаксис і приклади

Специфікація Open Graph визначає базовий набір тегів, без яких коректне відображення link preview неможливе. Розглянемо кожен з них детально.

1. og:title — заголовок сторінки

Визначає заголовок, який відображається у картці посилання. Може відрізнятися від SEO Title та H1 — для соцмереж часто краще працюють більш емоційні або цікавіші формулювання. Рекомендована довжина — до 60–70 символів.

<meta property="og:title" content="Open Graph: що це таке та як налаштувати у 2026 році" />

2. og:description — опис сторінки

Короткий опис контенту, який відображається під заголовком у preview. Оптимальна довжина — 150–160 символів. Тег не впливає безпосередньо на SEO, але впливає на клікабельність у соцмережах.

<meta property="og:description" content="Дізнайтеся, як налаштувати OG-теги для Facebook, LinkedIn та Telegram. Практичний гайд з кодом та інструментами перевірки." />

3. og:image — зображення для прев’ю

Найважливіший OG-тег з точки зору візуального впливу. Визначає картинку, яка відображається у карті посилання. Зображення повинно бути абсолютним URL (з https://), а не відносним шляхом.

<meta property="og:image" content="https://spilnoagency.com.ua/wp-content/uploads/2026/06/open-graph-cover.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Open Graph теги — візуальний гайд 2026" />

4. og:url — канонічний URL сторінки

Визначає «офіційну» URL-адресу сторінки. Важливо, щоб цей тег збігався з канонічним URL — це запобігає дублюванню статистики шерингів між різними URL однієї сторінки (з www і без, з HTTPS і HTTP тощо).

<meta property="og:url" content="https://spilnoagency.com.ua/open-graph-shcho-tse-take-ta-yak-z-nym-pratsyuvaty-u-2026-rotsi/" />

5. og:type — тип контенту

Визначає тип сторінки за специфікацією OG. Найпоширеніші значення: website (для головної сторінки і розділів), article (для статей і новин), product (для товарів інтернет-магазину), video.movie (для відео-контенту).

<!-- Для статей блогу -->
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-06-08T10:00:00+03:00" />
<meta property="article:author" content="https://spilnoagency.com.ua/author/anastasiya-zakharina/" />

<!-- Для головної сторінки -->
<meta property="og:type" content="website" />

6. og:site_name — назва сайту

Відображає назву сайту у картці посилання — наприклад, під заголовком або в окремому рядку. Допомагає брендингу при шерингу: аудиторія одразу бачить, з якого джерела матеріал.

<meta property="og:site_name" content="Spilno Agency — Digital Marketing" />

7. og:locale — мова і регіон

Вказує мову контенту у форматі мова_КРАЇНА. Для мультимовних сайтів також використовується og:locale:alternate — для вказівки альтернативних мов. Це особливо важливо для сайтів з Polylang або WPML.

<meta property="og:locale" content="uk_UA" />
<meta property="og:locale:alternate" content="en_GB" />
<meta property="og:locale:alternate" content="pl_PL" />
<meta property="og:locale:alternate" content="ru_UA" />

Вимоги до og:image: розміри, формати, безпечні зони

OG-зображення — це перше, що бачить людина при шерингу посилання. Неправильний розмір або погана якість картинки можуть знецінити будь-який якісний контент. Ось актуальні вимоги на 2026 рік:

Формати файлів

JPEG/JPG — найкращий вибір для фото і складних ілюстрацій. Оптимальна якість стиснення: 80–85%.
PNG — підходить для графіки з текстом, логотипів, зображень з прозорим фоном. Розмір файлу більший.
WebP — підтримується більшістю платформ у 2026 році, менший розмір файлу. Перевіряйте підтримку перед використанням.
GIF — підтримує Twitter/X, не підтримує Facebook для OG.

Безпечні зони

Різні платформи обрізають OG-зображення по-різному. Щоб ключові елементи (логотип, текст, головний об’єкт) не потрапили під обрізку, дотримуйтесь правила безпечної зони: розміщуйте важливий контент у центральній зоні зображення з відступом мінімум 10–15% від кожного краю.

Особливо обережно з текстом на зображенні: Facebook рекомендує, щоб текст займав не більше 20% площі картинки (хоча це правило офіційно скасовано для реклами, для органічних постів воно досі актуальне з точки зору читабельності).

Поведінка OG-тегів на різних платформах

Facebook / Meta

Facebook є «батьківською» платформою Open Graph, тому підтримує протокол найповніше. Картка посилання відображає og:image, og:title, og:description і og:site_name. Зображення розміром 1200×630 відображається у повну ширину поста. Якщо og:image менше 600px по ширині, показується маленька картинка зліва від тексту.

Важливо: у 2023 році Facebook прибрав опис (og:description) з органічних постів у стрічці, залишивши лише заголовок і назву сайту. Опис все ще відображається при шерингу в Messenger та в деяких інших контекстах.

LinkedIn повністю підтримує Open Graph. Відображає заголовок, опис та зображення. Рекомендований розмір картинки — 1200×627 пікселів. LinkedIn кешує preview агресивно (до 7 днів), тому оновлення через Post Inspector є обов’язковим кроком після зміни OG-тегів.

Twitter / X

Twitter/X використовує власний стандарт Twitter Cards, але якщо Twitter Card-теги відсутні, платформа підтягує дані з OG-тегів. Детальніше про взаємодію цих стандартів — у наступному розділі.

Telegram чудово зчитує OG-теги і відображає картку посилання в чатах і каналах. Підтримує og:title, og:description, og:image. Оптимальне зображення — 1200×630. Telegram не показує картку для посилань без валідного og:image або якщо зображення недоступне.

Viber і WhatsApp

Обидва месенджери зчитують OG-теги для формування превʼю. Viber підтримує стандартний набір. WhatsApp використовує og:title, og:description і og:image, але може відображати зображення в інших пропорціях — рекомендується квадратна або горизонтальна картинка 1:1 або 1.91:1.

Twitter Cards і Open Graph: різниця та спільна робота

Twitter Cards — це власна система метаданих Twitter/X, яка працює паралельно з Open Graph. Якщо на сторінці є Twitter Card-теги, Twitter використовує їх; якщо немає — підтягує дані з OG-тегів як fallback.

Основні Twitter Card-теги та їх OG-аналоги:

<!-- Twitter Cards -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@spilnoagency" />
<meta name="twitter:title" content="Open Graph: повний гайд 2026" />
<meta name="twitter:description" content="Як налаштувати OG-теги для максимального CTR у соцмережах" />
<meta name="twitter:image" content="https://spilnoagency.com.ua/wp-content/uploads/2026/06/open-graph-cover.jpg" />

<!-- Open Graph (паралельно) -->
<meta property="og:title" content="Open Graph: повний гайд 2026" />
<meta property="og:description" content="Як налаштувати OG-теги для максимального CTR у соцмережах" />
<meta property="og:image" content="https://spilnoagency.com.ua/wp-content/uploads/2026/06/open-graph-cover.jpg" />

Значення twitter:card визначає тип картки. Найважливіші:

summary — маленьке квадратне зображення зліва від тексту.
summary_large_image — велике горизонтальне зображення над текстом. Рекомендується для статей і блог-постів.
app — для мобільних додатків.
player — для відео і аудіо-контенту.

Практична рекомендація: завжди прописуйте обидва набори тегів. OG-теги покривають Facebook, LinkedIn, Telegram, Viber; Twitter Cards — Twitter/X. Спільні поля (заголовок, опис, зображення) можуть мати однакові значення.

Як налаштувати Open Graph у WordPress

WordPress сам по собі не генерує OG-теги. Для їх налаштування використовуються SEO-плагіни. Розглянемо два найпопулярніших.

Yoast SEO

Yoast SEO — найпоширеніший SEO-плагін для WordPress, повністю підтримує Open Graph і Twitter Cards. Налаштування виконується у два рівні:

Відкрийте Yoast SEO → Соціальні мережі в адмін-панелі WordPress.
На вкладці Facebook увімкніть «Додавати метадані Open Graph» і вкажіть стандартне зображення для сайту (використовується, якщо на сторінці немає featured image).
На вкладці Twitter увімкніть Twitter Cards і виберіть тип картки за замовчуванням (summary_large_image для блогу).
Для кожного окремого поста/сторінки прокрутіть вниз до блоку Yoast SEO у редакторі, перейдіть на вкладку Соціальні мережі і вкажіть індивідуальні og:title, og:description та og:image — саме ті, що ви хочете бачити у соцмережах (можуть відрізнятися від SEO Title і Meta Description).

Yoast автоматично використовує Featured Image поста як og:image, якщо окреме зображення для соцмереж не вказано. Також плагін автоматично підставляє og:locale відповідно до налаштувань мови WordPress.

Rank Math SEO

Rank Math — сучасна альтернатива Yoast з більш зручним інтерфейсом для налаштування соціальних метаданих. Кроки налаштування:

Перейдіть у Rank Math → Загальні налаштування → Соціальні мережі.
Завантажте стандартне OG-зображення для сайту (1200×630 або 1200×627).
Увімкніть підтримку Open Graph і Twitter Cards.
В редакторі кожного поста знайдіть панель Rank Math → вкладка Social — тут можна задати індивідуальні OG-поля для Facebook і Twitter окремо.

Rank Math також підтримує автоматичне підтягування зображення зі статті, якщо Featured Image не задано — зручний fallback для великих блогів з великою кількістю публікацій.

Ручна реалізація Open Graph: повний приклад коду

Якщо ви не використовуєте WordPress або хочете повний контроль над OG-тегами — ось еталонний приклад розмітки для статті блогу:

<!-- Open Graph / Facebook -->
<meta property="og:type" content="article" />
<meta property="og:url" content="https://spilnoagency.com.ua/open-graph-guide/" />
<meta property="og:title" content="Open Graph: що це таке та як налаштувати у 2026 році" />
<meta property="og:description" content="Повний гайд з OG-тегів для WordPress, ручної реалізації та інструментів перевірки." />
<meta property="og:image" content="https://spilnoagency.com.ua/wp-content/uploads/2026/06/og-cover.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Open Graph теги — Spilno Agency" />
<meta property="og:site_name" content="Spilno Agency" />
<meta property="og:locale" content="uk_UA" />
<meta property="article:published_time" content="2026-06-08T10:00:00+03:00" />
<meta property="article:author" content="https://spilnoagency.com.ua/author/anastasiya-zakharina/" />

<!-- Twitter Cards -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@spilnoagency" />
<meta name="twitter:title" content="Open Graph: що це таке та як налаштувати у 2026 році" />
<meta name="twitter:description" content="Повний гайд з OG-тегів для WordPress, ручної реалізації та інструментів перевірки." />
<meta name="twitter:image" content="https://spilnoagency.com.ua/wp-content/uploads/2026/06/og-cover.jpg" />

Цей код розміщується всередині тегу <head> HTML-документу. Для WordPress-тем — у файл header.php або через хук wp_head у functions.php:

// functions.php
add_action('wp_head', 'my_custom_og_tags');
function my_custom_og_tags() {
    if (is_single()) {
        global $post;
        $og_image = get_the_post_thumbnail_url($post->ID, 'large');
        $og_title = get_the_title($post->ID);
        $og_desc  = get_the_excerpt($post->ID);
        echo '<meta property="og:title" content="' . esc_attr($og_title) . '" />' . "\n";
        echo '<meta property="og:description" content="' . esc_attr($og_desc) . '" />' . "\n";
        if ($og_image) {
            echo '<meta property="og:image" content="' . esc_url($og_image) . '" />' . "\n";
        }
    }
}

Інструменти для перевірки та дебагінгу OG-тегів

Після налаштування OG-тегів обов’язково перевірте їх коректність за допомогою спеціальних інструментів. Ось найважливіші:

1. Facebook Sharing Debugger

Офіційний інструмент Meta за адресою developers.facebook.com/tools/debug. Показує, як Facebook бачить вашу сторінку: які OG-теги зчитано, яке зображення буде відображено, чи є помилки. Кнопка «Scrape Again» примусово скидає кеш і підтягує актуальні дані.

2. LinkedIn Post Inspector

Доступний на linkedin.com/post-inspector. Показує, як LinkedIn рендерить картку посилання. Дозволяє скинути кеш (повторний скрапінг займає до 10 хвилин). Особливо важливий після оновлення OG-зображення або заголовку.

3. Twitter Card Validator

Раніше доступний на cards-dev.twitter.com/validator, у 2024–2025 роках Twitter/X обмежив доступ до цього інструменту. Як альтернатива — просто опублікуйте тестовий твіт з посиланням і перевірте відображення вручну, або використовуйте сторонні інструменти.

4. OpenGraph.xyz

Безкоштовний онлайн-інструмент на opengraph.xyz. Відображає превʼю вашого URL одразу для кількох платформ (Facebook, Twitter, LinkedIn, Telegram) на одному екрані. Зручний для швидкої перевірки без необхідності авторизуватися у кожній соцмережі.

5. Metatags.io і Socialsharepreview.com

Альтернативні інструменти перевірки OG-тегів та симуляції відображення у різних платформах. Metatags.io також дозволяє генерувати OG-теги в режимі конструктора — корисно для тих, хто вперше налаштовує розмітку.

Типові помилки при роботі з Open Graph та як їх уникнути

Відносний URL у og:image. Значення /wp-content/uploads/image.jpg без домену не спрацює — потрібен абсолютний https://yourdomain.com/wp-content/uploads/image.jpg.
Зображення занадто мале. Якщо og:image менше 600×315, Facebook показує маленьку картинку збоку, а не велике прев’ю. Завжди використовуйте мінімум 1200×630.
Кеш після оновлення. Ви змінили OG-теги, але соцмережа показує старе прев’ю? Це кеш. Використовуйте Sharing Debugger (Facebook) або Post Inspector (LinkedIn) для примусового оновлення.
OG-теги дублюються. Якщо у WordPress активний і Yoast SEO, і тема сама генерує OG-теги (деякі теми мають вбудовану підтримку) — у <head> з’являться дублікати. Це призводить до непередбачуваної поведінки. Вимкніть OG-генерацію у темі, якщо використовуєте Yoast або Rank Math.
Відсутній og:title або og:description. Без цих тегів платформа підтягне довільний контент зі сторінки. Навіть базова розмітка краща за відсутність будь-якої.
Неправильний og:type для статей. Використання website замість article позбавляє вас можливості передати дату публікації та автора через article:published_time і article:author.
OG-зображення заблоковане для ботів. Якщо зображення захищене robots.txt або недоступне без авторизації, скрапер платформи не зможе його завантажити — картка відображатиметься без зображення.

Open Graph у 2026 році: нові тренди і виклики

Протокол Open Graph існує вже 16 років, але залишається актуальним і в 2026 році. Більше того, з’являються нові виклики і можливості:

AI-асистенти і структуровані метадані

ChatGPT, Perplexity, Google AI Overviews та інші AI-системи все активніше «читають» контент із соцмереж і месенджерів. Коли ваша стаття шериться у Facebook або Telegram, AI-боти індексують не лише URL, але й метадані картки посилання — включаючи og:title і og:description. Чіткий, структурований опис у OG-тегах покращує шанси на правильну інтерпретацію контенту AI-системами.

Динамічні OG-зображення

Тренд 2025–2026 — автоматична генерація OG-зображень на льоту. Сервіси як Bannerbear, Placid або кастомні рішення на базі Puppeteer дозволяють генерувати унікальну картинку для кожної статті автоматично: з заголовком, аватаром автора і брендовим фоном. Це особливо актуально для великих блогів і медіа.

OG-теги і GEO (Generative Engine Optimization)

Generative Engine Optimization — це оптимізація контенту для відображення у відповідях AI-пошуковиків. OG-теги є частиною загальної картини структурованих даних, яку AI зчитує для розуміння контексту сторінки. Правильно заповнені og:type, og:site_name і article:author посилюють E-E-A-T сигнали і допомагають AI правильно атрибутувати авторство та тематику матеріалу.

Соціальні сигнали і SEO

Хоча Google офіційно не вважає лайки і репости у соцмережах прямим сигналом ранжування, якісна OG-розмітка опосередковано впливає на SEO через поведінкові чинники: більше репостів → більше органічного трафіку → більше зовнішніх посилань → покращення позицій у Google Search. Тобто інвестиція у OG-теги повертається через збільшення органічного охоплення.

Часті запитання про Open Graph

Чи впливають OG-теги на SEO?

Прямого впливу на ранжування у Google немає — OG-теги не враховуються алгоритмом Google Search безпосередньо. Однак непрямий вплив є: якісна картка посилання збільшує CTR у соцмережах, що генерує більше трафіку і потенційно більше зовнішніх посилань — а це вже прямі SEO-сигнали. Також OG-теги підвищують впізнаваність бренду і довіру до публікацій.

Чому соцмережа показує старий заголовок або зображення після оновлення?

Причина — кешування. Соціальні мережі зберігають дані про URL у своєму кеші від кількох годин до кількох днів. Для Facebook використовуйте Sharing Debugger (кнопка «Scrape Again»). Для LinkedIn — Post Inspector з функцією повторного скрапінгу. Telegram скидає кеш автоматично через певний час, але можна надіслати посилання в особисте повідомлення і одразу побачити актуальні дані.

Яким має бути розмір og:image у 2026 році?

Рекомендований стандарт — 1200×630 пікселів (співвідношення 1.91:1). Це оптимальний розмір для Facebook, LinkedIn, Telegram і більшості інших платформ. Мінімум для Facebook — 600×315. Для Twitter/X з типом картки summary_large_image — також 1200×630 або близькі пропорції. Формат — JPEG або PNG, вага до 1 МБ.

Чи можна задати різні OG-теги для Facebook і Twitter?

Так. Open Graph використовує атрибут property="og:...", Twitter Cards — name="twitter:...". Це два незалежних набори тегів. Ви можете вказати різні заголовки, описи і навіть зображення для кожної платформи. Наприклад: більш формальний тон для LinkedIn і більш провокаційний заголовок для Twitter. Якщо Twitter Card-теги відсутні, Twitter автоматично використовує OG-дані як запасний варіант.

Що робити, якщо og:image не відображається?

Перевірте за чеклістом: 1) URL зображення абсолютний (починається з https://)? 2) Зображення публічно доступне (не закрите robots.txt, авторизацією або геоблоком)? 3) Розмір файлу не перевищує 8 МБ? 4) Розширення — JPEG, PNG або WebP? 5) Дізнайтеся через Facebook Sharing Debugger, чи є специфічна помилка — він показує точну причину проблеми.

Чи потрібні OG-теги для мультимовного сайту?

Так, і для кожної мовної версії — окремий набір OG-тегів. og:locale повинен відповідати мові сторінки (uk_UA, en_GB, pl_PL). Для вказівки альтернативних мов використовується og:locale:alternate. Yoast SEO з Polylang автоматично генерує правильні локалі для кожної мовної версії — переконайтеся, що ці плагіни коректно інтегровані між собою. Детальніше про мультимовне SEO читайте в нашому гайді.

Як перевірити OG-теги без публікації у соцмережі?

Використовуйте безкоштовні онлайн-інструменти: opengraph.xyz (показує превʼю для кількох платформ одразу), metatags.io, socialsharepreview.com. Вони симулюють, як виглядатиме картка посилання, без необхідності публікувати пост. Facebook Sharing Debugger також дозволяє перевірити будь-який публічно доступний URL без публікації.

Валерій Spilno Agency Всі статті автора →

Залишились питання?

Розкажіть про задачу — відповімо по темі статті

← Повернутися до блогу