Open Graph (OG) — це протокол розмітки, який задає, як посилання на вашу сторінку виглядатиме при поширенні в соцмережах і месенджерах: заголовок, опис, зображення й тип контенту. OG-теги додають у секцію <head> сторінки, і саме їх зчитують Facebook, LinkedIn, Telegram, Viber, коли формують превʼю-картку.
Простими словами: це «інструкція для соцмереж», якою картинкою і яким підписом показати ваше посилання. Не задасте — платформа вгадає сама, і часто невдало.
Що таке Open Graph і навіщо він потрібен
Протокол Open Graph запровадив Facebook ще у 2010 році, і відтоді його підтримують майже всі великі платформи. Без OG-розмітки соцмережа підтягне випадкову картинку і шматок тексту зі сторінки — привабливість посту падає, а з нею й клікабельність. З правильними OG-тегами ви контролюєте картку: показуєте потрібне зображення, чіткий заголовок і опис. Це не фактор ранжування в Google, але прямо впливає на трафік із соцмереж.
Синтаксис і приклад коду
Базовий набір OG-тегів у <head>:
<meta property="og:title" content="Назва сторінки">
<meta property="og:description" content="Короткий опис">
<meta property="og:image" content="https://pro-fits.com.ua/img/preview.jpg">
<meta property="og:url" content="https://pro-fits.com.ua/seo/">
<meta property="og:type" content="website">
Рекомендований розмір og:image — 1200×630 пікселів: так картинка не обріжеться на більшості платформ.
Типові помилки
- Немає
og:imageабо картинка замала — превʼю виходить без зображення. - Зображення не 1200×630 — платформа обрізає його як їй зручно.
- Не вказано абсолютний URL картинки (потрібен повний, з доменом).
- Змінили OG, а картка стара — треба скинути кеш у відладчику соцмережі.
Приклад
Стаття блогу без OG поширювалась у Facebook з логотипом сайту замість обкладинки і назвою рубрики замість заголовка. Додали og:title, og:description і og:image 1200×630 — і той самий лінк почав виглядати як повноцінна картка з обкладинкою. Клікабельність постів помітно зросла.
Часто плутають з…
- Мета-теги — OG це їхній підвид для соцмереж; звичайні meta (title, description) працюють у пошуку, OG — у превʼю поширень.
- Structured data (Schema.org) — розмітка для пошукових систем і rich-результатів, а не для карток у соцмережах.
- Twitter Cards — окремий, схожий формат для X (Twitter); часто задають разом з OG.
Питання та відповіді
Open Graph впливає на SEO?
Прямо на ранжування в Google — ні. Але OG підвищує клікабельність у соцмережах, а це трафік і поведінкові сигнали. Тому теги ставлять на всіх важливих сторінках.
Який розмір картинки для og:image?
Оптимально 1200×630 пікселів (співвідношення 1.91:1). Замалі зображення платформи можуть не показати взагалі.
Чому в соцмережі стара картинка після зміни OG?
Платформа закешувала попереднє превʼю. Треба оновити кеш через офіційний відладчик (наприклад, Sharing Debugger у Facebook).
Посилання виглядають «як попало» при поширенні? Налаштуємо OG-розмітку в межах SEO-аудиту та виправлення помилок на сайті.
Схожі терміни: Мета-теги, Structured data, Schema.org, Title, HTML.
