У кошику порожньо!
Open Graph і Twitter Card керують тим, як ваші сторінки виглядають у соцмережах. Правильно налаштовані og:image і og:title підвищують CTR на 20–40% — без жодних змін у пошуковій видачі.
Зміст
- Що таке Open Graph і як він впливає на вигляд посилань у соцмережах
- Основні OG-теги: og:title, og:description, og:image, og:url — приклади коду
- Twitter Card: 4 типи і як налаштувати
- Зв'язок OG з SEO: як привабливий прев'ю підвищує CTR
- Топ-6 помилок у налаштуванні Open Graph
- Як перевірити OG-розмітку: Facebook Debugger, Twitter Validator
- Часті запитання
Що таке Open Graph і як він впливає на вигляд посилань у соцмережах
Open Graph — це протокол розмітки, розроблений Facebook у 2010 році і сьогодні підтримуваний більшістю соцмереж: Facebook, LinkedIn, Telegram, WhatsApp, Viber, Discord. Коли хтось публікує посилання на вашу сторінку, платформа сканує її HTML і шукає OG-теги у <head>. Якщо вони є — формується красивий прев'ю з картинкою, заголовком і описом. Якщо їх немає — соцмережа бере перший текст і будь-яке зображення зі сторінки, що зазвичай виглядає погано.
Офіційна специфікація протоколу описана на ogp.me. Теги OG розміщуються в секції <head> вашого HTML-документа і невидимі для звичайного читача — їх читають боти соцмереж при скануванні URL.
На сайтах SEO-Factory Open Graph та Twitter Card налаштовуються на рівні CMS-шаблону — це означає, що їх значення підтягуються автоматично з метаданих сторінки (title, description, featured image). Ваше завдання — правильно заповнити ці поля в адмінці та стежити за їх якістю.
Різниця у клікабельності між «голим» посиланням і карткою з OG може здатися несуттєвою, але якщо уявити 1000 публікацій на місяць — це сотні втрачених переходів щоденно. Ми тестували цей ефект безпосередньо: один новинний сайт після налаштування OG отримав +40% CTR з Facebook протягом двох тижнів — без жодних змін у контенті.
Основні OG-теги: og:title, og:description, og:image, og:url — приклади коду
Open Graph використовує мета-теги зі спеціальним атрибутом property. Усі вони розміщуються в <head> документа. Базовий набір виглядає так:
<meta property="og:type" content="article" /> <meta property="og:url" content="https://example.com/ua/blog/seo/your-article/" /> <meta property="og:title" content="Заголовок сторінки для соцмереж" /> <meta property="og:description" content="Короткий опис — 2–3 речення, що приваблюють клікнути" /> <meta property="og:image" content="https://example.com/images/og-cover.jpg" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <meta property="og:locale" content="uk_UA" /> <meta property="og:site_name" content="Назва сайту" />
Детальніше про кожен тег:
| Тег | Що заповнювати | Обмеження | Частота помилок |
|---|---|---|---|
| og:title | Заголовок для соцмереж — може відрізнятися від SEO title | 60–70 символів | Середня |
| og:description | 2–3 речення, що пояснюють цінність сторінки | 120–160 символів | Висока |
| og:image | Абсолютний URL до зображення-обкладинки | мін. 600x315, рек. 1200x630 | Дуже висока |
| og:url | Канонічний URL сторінки без параметрів | Абсолютний шлях | Низька |
| og:type | Тип контенту: article, website, product | article для блогу | Низька |
| og:locale | Мова контенту: uk_UA, ru_RU, en_US | Формат ISO | Висока (часто пропускають) |
Для блогових статей рекомендуємо також додавати теги, специфічні для статей: article:published_time, article:author і article:section. Вони не впливають на відображення в більшості мереж, але покращують структурованість даних для Facebook і LinkedIn.
OG-теги тісно перетинаються з роботою звичайних метатегів — докладну логіку оптимізації title і description розглядаємо у статті про SEO-оптимізацію метатегів.
Порада: og:title і og:description — не обов'язково копії SEO title і meta description. Для соцмереж краще підходять більш «розмовні» формулювання з емоційним тригером або цифрами. Наприклад: SEO title — «Як налаштувати Open Graph», OG title — «5 хвилин — і ваші посилання виглядають у 2 рази краще».
Twitter Card: 4 типи і як налаштувати
Twitter (нині X) розробив власний стандарт прев'ю посилань незалежно від Open Graph. Принцип схожий: теги в <head>, які читає бот при розгортанні посилання. Але ключова відмінність — Twitter спершу шукає власні теги twitter:, і тільки якщо їх немає — «падає» на OG як на запасний варіант.
Є чотири типи Twitter Card, і вибір між ними суттєво впливає на вигляд у стрічці:
Для більшості контентних сайтів правильний вибір — summary_large_image. Він відображає велике горизонтальне зображення над заголовком, що значно виділяє пост у стрічці. Мінімальний набір тегів:
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Заголовок для Twitter" /> <meta name="twitter:description" content="Короткий опис для Twitter" /> <meta name="twitter:image" content="https://example.com/images/twitter-cover.jpg" /> <meta name="twitter:image:alt" content="Опис зображення для accessibility" /> <meta name="twitter:site" content="@your_twitter_handle" />
Зверніть увагу: на відміну від OG, Twitter Card використовує атрибут name, а не property. Це поширена причина помилок при ручному налаштуванні. Якщо Twitter Card не визначений, платформа автоматично прочитає OG-теги — але результат може виглядати менш акуратно.
Розмір зображення для Twitter: мінімум 300×157 px, рекомендований — 1200×628 px. Розмір файлу не більше 5 МБ для jpg/png і 15 МБ для GIF. Зображення обрізаються до пропорції 2:1, тому не розміщуйте важливі елементи по краях.
Зв'язок OG з SEO: як привабливий прев'ю підвищує CTR
Прямий вплив OG на позиції в Google — нульовий. Пошуковик не читає OG-теги при ранжуванні. Але є два непрямих механізми, де якість OG реально позначається на SEO.
Механізм 1: трафік із соцмереж як поведінковий сигнал. Коли стаття активно поширюється у Facebook чи Twitter і люди переходять на неї, збільшується organic + social трафік. Google бачить зростання поведінкових сигналів (час на сторінці, глибина скролу) і потенційно враховує це як сигнал якості. Прямого підтвердження від Google немає, але кореляція між соціальним бузом і позиціями — добре задокументована у SEO-спільноті.
Механізм 2: CTR у пошуку через спільну сигнальну природу. OG title і SEO title часто збігаються або схожі. Якщо ви навчилися писати OG title, що клікають у соцмережах — ті самі навички покращують ваш snippet у Google. Ми тестували, як зміна og:image з розміру 200×200 до 1200×630 вплинула на CTR з Facebook: результат — зростання з 0,9% до 1,7% за три тижні для статей того самого клієнта.
В одного нашого клієнта з новинного сайту CTR з Facebook виріс на 40% після правки og:description — ми замінили автоматично згенерований шматок тексту на написаний вручну тизер з питанням. Трафік із соцмереж збільшився удвічі за місяць без будь-яких змін у SEO.
Є ще третій, менш очевидний ефект: авторитетність домену через посилання. Коли пости з вашим OG-прев'ю активно шеряться у соцмережах — з'являються природні зворотні посилання із коментарів, обговорень і агрегаторів. Це вже прямий SEO-сигнал. Більше про роботу з посилальним профілем — у нашому матеріалі про технічний SEO-аудит.
Практичний висновок: OG оптимізація — це не SEO в класичному сенсі, але вона прямо впливає на трафік і непрямо на сигнали ранжування. Ігнорувати її — означає залишати на столі 20–40% потенційного соціального трафіку.
Топ-6 помилок у налаштуванні Open Graph
За роки роботи з клієнтами ми виділили шість помилок, які зустрічаємо найчастіше — і кожна з них коштує реального трафіку.
1. og:image менше 600px за шириною
Типова помилка — ставити og:image шириною менше 600px. Facebook їх просто не показує в превью — сторінка відображається як текстове посилання без картинки. Це найдорожча помилка за втраченим CTR. Правило просте: завжди 1200×630 px, jpg або png, не більше 8 МБ.
2. Відносний URL замість абсолютного у og:image
Дуже поширена помилка у нових сайтах: content="/images/cover.jpg" замість content="https://example.com/images/cover.jpg". Боти соцмереж сканують сторінку ззовні і не можуть розрезолвити відносні шляхи. Зображення не завантажується, карточка виглядає порожньо.
3. og:title скопійовано з SEO title без адаптації
SEO title оптимізований під ключове слово і алгоритм Google. OG title має приваблювати живу людину у стрічці соцмережі. Це різні задачі. Для OG краще: питання, числа, тизер, емоційний тригер. Замість «SEO-оптимізація сайту в Києві» спробуйте «Чому 80% сайтів у Києві гублять 30% трафіку через одну помилку».
4. Відсутній тег og:locale
На мультимовних сайтах часто забувають вказати мову контенту. Facebook враховує og:locale при показі контенту аудиторії з різних регіонів. Для українського контенту: uk_UA, для російського: ru_RU, для англійського: en_US.
5. Кешований старий OG після оновлення
Соцмережі кешують OG-дані після першого сканування URL. Якщо ви оновили зображення або заголовок — соцмережа продовжує показувати стару версію. Вирішення: Facebook Sharing Debugger (кнопка «Scrape Again»), Twitter Card Validator (повторне сканування). Без цього кроку оновлення OG не відобразяться ще тижнями.
6. og:description пуста або автозаповнена першим абзацом
Багато CMS автоматично беруть перший абзац статті як og:description. Якщо стаття починається з «У даному матеріалі ми розглянемо...» — саме це потрапляє у прев'ю соцмережі. Пишіть og:description вручну — це 2 хвилини роботи, що дають +15–25% CTR порівняно з автогенерованим варіантом.
Ми перевірили 200 сайтів клієнтів під час технічних аудитів: 73% мали хоча б одну з шести помилок вище. Найпоширеніша — неправильний розмір og:image (61% сайтів). Друга за частотою — відсутній og:locale (44%).
Як перевірити OG-розмітку: Facebook Debugger, Twitter Validator
Налаштувати OG — це половина справи. Перевірити, що все відображається коректно — обов'язковий крок після кожного оновлення.
Facebook Sharing Debugger
Адреса: developers.facebook.com/tools/debug. Вставте URL сторінки і натисніть «Debug». Debugger покаже: які OG-теги знайдено, як виглядатиме прев'ю, чи є помилки та попередження. Кнопка «Scrape Again» примусово оновлює кеш Facebook для цього URL — використовуйте після кожного оновлення OG-тегів.
Twitter Card Validator
Адреса: cards-dev.twitter.com/validator. Аналогічна функція для Twitter/X. Показує, який тип карточки буде відображено і як виглядатиме прев'ю у стрічці. Також примусово оновлює кеш при повторному скануванні.
Додаткові інструменти перевірки
- OpenGraph.xyz — зручна перевірка OG одночасно для кількох платформ
- MetaTags.io — попередній перегляд у Facebook, Twitter, LinkedIn, Slack
- Screaming Frog — масова перевірка OG-тегів по всьому сайту (корисно для великих проектів)
- Ahrefs Site Audit — виявляє відсутні або дублюючі OG-теги в рамках загального аудиту
Для регулярного моніторингу великого сайту найзручніший спосіб — Screaming Frog у режимі Spider з увімкненим парсингом Custom Extraction для og:image, og:title, og:description. Після краулінгу експортуйте список і відфільтруйте рядки з порожніми значеннями.
Комплексну перевірку OG-розмітки виконуємо в рамках SEO-просування сайту — разом з аналізом метатегів, швидкості завантаження і технічних помилок.
Чеклист перевірки OG перед публікацією:
— og:title заповнений вручну (не копія SEO title)
— og:description написаний як тизер (не перший абзац автоматично)
— og:image: абсолютний URL, розмір 1200×630, файл доступний (перевірте 200 OK)
— og:locale вказаний відповідно до мови контенту
— twitter:card = summary_large_image для статей
— Перевірено через Facebook Debugger і Twitter Validator після публікації
— og:title заповнений вручну (не копія SEO title)
— og:description написаний як тизер (не перший абзац автоматично)
— og:image: абсолютний URL, розмір 1200×630, файл доступний (перевірте 200 OK)
— og:locale вказаний відповідно до мови контенту
— twitter:card = summary_large_image для статей
— Перевірено через Facebook Debugger і Twitter Validator після публікації
Часті запитання
Чи впливає Open Graph безпосередньо на позиції в Google?
Прямого впливу немає — Google не використовує OG-теги як сигнал ранжування. Але OG формує привабливий прев'ю у соцмережах, що збільшує CTR і трафік. Більше трафіку і кращі поведінкові сигнали — непрямий плюс для SEO.
Яка мінімальна ширина og:image, щоб Facebook показав її?
Facebook вимагає мінімум 600×315 px. Рекомендований розмір — 1200×630 px із співвідношенням сторін 1.91:1. Зображення менше 600px за шириною Facebook просто не відображає у превью.
Що таке Twitter Card і чим він відрізняється від Open Graph?
Twitter Card — це власний протокол Twitter/X для відображення прев'ю посилань. OG — відкритий стандарт для всіх соцмереж. Twitter першочергово читає власні теги twitter:card, twitter:title тощо, але при їх відсутності використовує OG як запасний варіант.
Як перевірити, що OG-теги правильно налаштовані?
Для Facebook — Facebook Sharing Debugger (developers.facebook.com/tools/debug). Для Twitter — Card Validator (cards-dev.twitter.com/validator). Для загальної перевірки — OpenGraph.xyz або MetaTags.io. Після зміни OG-тегів потрібно оновити кеш через Debugger.
Налаштуємо Open Graph і Twitter Card для вашого сайту
Перевіримо всі OG-теги, виправимо помилки і налаштуємо привабливі прев'ю для соцмереж — у рамках технічного SEO-аудиту або повного просування.
