Генератор мета-тегів Open Graph

Теги Open Graph — це невеликі фрагменти HTML, які визначають, як виглядає ваша сторінка, коли хтось ділиться нею у Facebook, LinkedIn, Slack, Discord або X (Twitter). Заповніть нижче заголовок, опис, URL, зображення та кілька параметрів, спостерігайте, як попередній перегляд картки для поширення оновлюється миттєво, і скопіюйте згенеровані теги <meta> прямо в <head> вашої сторінки. Усе відбувається у вашому браузері — нічого не надсилається на сервер.

Що це за інструмент?

Open Graph — це протокол, спочатку створений Facebook, який дозволяє будь-якій веб-сторінці описати саму себе за допомогою невеликого набору тегів <meta property="og:...">, розміщених у <head> HTML-документа. Коли хтось вставляє ваше посилання в соціальний застосунок, чат-клієнт чи месенджер, той застосунок читає ці теги, щоб побудувати картку попереднього перегляду — заголовок, опис і мініатюру зображення, — замість того щоб вгадувати на основі вмісту сторінки.

Twitter (X) використовує споріднений, але окремий набір тегів, <meta name="twitter:...">, щоб окремо керувати тим, як виглядає попередній перегляд посилання саме на цій платформі. Більшість сайтів встановлюють обидва набори: теги Open Graph — для широкої сумісності, теги Twitter Card — для точнішого налаштування перегляду в X (наприклад, вибору картки з великим зображенням замість невеликої підсумкової картки).

Без цих тегів поширене посилання або взагалі не показує попередній перегляд, або платформа намагається вгадати заголовок і зображення з необробленого вмісту сторінки — часто обираючи неправильний заголовок, випадкове вбудоване зображення або нічого. Явне встановлення og:title, og:description і og:image дає вам повний контроль над тим, як ваш контент подається, ще до того, як хтось на нього натисне.

Навіщо його використовувати?

Живий попередній перегляд — бачите точно, як виглядатиме картка для поширення прямо під час введення даних, ще до публікації.
Генерує одразу і теги Open Graph (og:title, og:description, og:image, og:url, og:type, og:site_name), і теги Twitter Card.
Охоплює поля, які платформи справді зчитують: заголовок, опис, канонічний URL, зображення, назву сайту, тип контенту та стиль картки Twitter.
Працює повністю на стороні браузера — ваш заголовок, опис і посилання ніколи не залишають ваш браузер.
Безкоштовно, без реєстрації, без обмежень — скопіюйте результат і вставте в свій HTML.

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

Введіть заголовок сторінки та короткий опис (заголовок бажано менше ~60 символів, опис — близько ~155–160 символів).
Введіть канонічний URL сторінки та абсолютний URL зображення для попереднього перегляду (URL зображень мають бути повними, наприклад https://example.com/image.jpg, а не відносним шляхом).
За бажанням вкажіть назву сайту, оберіть og:type (website, article, product, profile, video, music) і тип картки Twitter (summary або summary_large_image).
Перевірте картку живого попереднього перегляду, щоб переконатися, що заголовок, опис і зображення добре поєднуються.
Натисніть «Копіювати» та вставте згенеровані теги <meta> в <head> вашої сторінки, перед закривальним тегом </head>.

Приклад

Введення

Заголовок: «10 безкоштовних інструментів для розробників, якими ви справді будете користуватися»
Опис: «Дібраний список браузерних інструментів для JSON, регулярних виразів, UUID та іншого — без встановлення.»
URL: https://example.com/blog/dev-tools
Зображення: https://example.com/images/dev-tools-cover.jpg

Результат

<meta property="og:title" content="10 Free Developer Tools You'll Actually Use" />
<meta property="og:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta property="og:url" content="https://example.com/blog/dev-tools" />
<meta property="og:image" content="https://example.com/images/dev-tools-cover.jpg" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="10 Free Developer Tools You'll Actually Use" />
<meta name="twitter:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta name="twitter:image" content="https://example.com/images/dev-tools-cover.jpg" />

У результат потрапляють лише заповнені поля, тому якщо залишити назву сайту порожньою, og:site_name просто буде відсутній у виводі.

Поширені помилки, яких варто уникати

Повна відсутність og:image — без нього більшість платформ або не показують зображення попереднього перегляду взагалі, або використовують випадкове зображення, взяте зі сторінки, що зазвичай виглядає неохайно й непрофесійно.
Використання відносного шляху до зображення, наприклад /images/cover.jpg, замість повного URL, наприклад https://example.com/images/cover.jpg — соціальні краулери, як правило, не можуть розпізнати відносні шляхи.
Неправильне співвідношення сторін зображення — квадратне або вертикальне зображення незграбно обрізається, коли платформи примусово вписують його в горизонтальну рамку 1,91:1; завжди проєктуйте зображення для поширення близько до 1200×630.
Заголовки чи описи, що обрізаються — тримайте og:title менше ~60 символів, а og:description менше ~155–160 символів, щоб вони не обрізалися трьома крапками на більшості платформ.
Забування оновити кешовані попередні перегляди — після зміни тегів og на опублікованій сторінці старий попередній перегляд може залишатися в кеші Facebook чи LinkedIn, доки ви вручну не примусите повторне сканування за допомогою їхніх інструментів налагодження.

Де використовується кожен тег

og:title, og:description і og:image — три теги, які читає майже кожна платформа для побудови попереднього перегляду. og:url повідомляє краулерам, з яким канонічним посиланням пов'язати попередній перегляд, що важливо, якщо той самий контент доступний через кілька URL. og:site_name показує невелику мітку (наприклад, назву видання або бренду) над заголовком на деяких платформах, таких як Facebook.

og:type змінює, який тип об'єкта представляє сторінка для краулерів, що підтримують багатшу об'єктну модель Open Graph — наприклад, article відкриває og:article:published_time і og:article:author на платформах, які їх читають, хоча більшість соціальних попередніх переглядів ігнорують ці додаткові поля та використовують лише основну трійку заголовок/опис/зображення.

twitter:card керує макетом саме в X: summary показує невелику квадратну мініатюру поруч із текстом, тоді як summary_large_image показує зображення на всю ширину над текстом — другий варіант майже завжди є кращим вибором для контенту зі змістовним обкладинковим зображенням.

Часті запитання

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

1200×630px — рекомендований розмір: достатньо великий для дисплеїв з високою щільністю пікселів і відповідає співвідношенню сторін приблизно 1,91:1, до якого Facebook, LinkedIn і X обрізають зображення. Тримайте файл менше 5–8 МБ, використовуйте JPG або PNG і переконайтеся, що URL зображення — це повна абсолютна адреса, а не відносний шлях: більшість краулерів не можуть коректно розпізнати відносні шляхи до зображень.

Чому мій попередній перегляд не з'являється, коли я ділюся посиланням?

Найпоширеніші причини: відсутній og:image, відносний, а не абсолютний URL зображення, краулер заблокований через robots.txt, або платформа показує кешовану версію старого попереднього перегляду. Facebook і LinkedIn обидва агресивно кешують проскановані попередні перегляди — використовуйте Sharing Debugger від Facebook або Post Inspector від LinkedIn, щоб примусово запустити повторне сканування після оновлення тегів.

У чому різниця між тегами og: і twitter:?

Теги og: (og:title, og:description, og:image тощо) належать до стандарту Open Graph, який читають Facebook, LinkedIn, Slack, Discord, WhatsApp та більшість інших платформ. Теги twitter: — це власний формат Twitter/X. Якщо twitter:title або twitter:image відсутні, X автоматично використовує відповідний тег og: — але явне встановлення обох дає вам більше контролю, включно з можливістю вибрати summary_large_image для великого зображення попереднього перегляду.

Який og:type мені варто використовувати?

«website» — безпечне значення за замовчуванням для більшості сторінок, включно з головними сторінками та загальним контентом. Використовуйте «article» для дописів у блозі та новинних статей (це відкриває додаткові теги, специфічні для статей, наприклад час публікації), «product» — для сторінок електронної комерції, а «profile» — для особистих сторінок або сторінок профілю користувача. Тип переважно впливає на те, які додаткові властивості Open Graph є дійсними, а не на те, як виглядає базова картка попереднього перегляду.

Чи зберігає або надсилає цей інструмент мої дані кудись?

Ні. Уся генерація відбувається локально у вашому браузері за допомогою звичайного JavaScript. Ніщо з того, що ви вводите, не передається, не реєструється і не зберігається — закриття вкладки очищає все.