Генератор Тегів Open Graph — Безкоштовно онлайн

Генеруйте мета-теги Open Graph для якісного попереднього перегляду в соцмережах - Facebook, LinkedIn та інших.

Результати надаються виключно в інформаційних цілях і можуть містити помилки. Перевіряйте важливу інформацію самостійно. Використання цього інструмента здійснюється на ваш власний ризик.

Що робить цей інструмент

Генератор тегів Open Graph пише мета-теги og:, які визначають, як виглядає посилання, коли ним діляться у Facebook, LinkedIn, WhatsApp, Slack, Discord, Telegram та багатьох інших застосунках. Введіть заголовок, опис, канонічний URL і URL зображення, виберіть тип (website, article, product або profile) і скопіюйте теги в <head> сторінки.

Виводяться лише заповнені поля, а спецсимволи екрануються. Без тегів Open Graph застосунки вгадують заголовок і беруть випадкове зображення зі сторінки або взагалі не показують прев’ю. Найважливіший тег — og:image: чітке зображення 1200 × 630 пікселів помітно підвищує шанс, що на поширене посилання клікнуть.

Коли використовувати

  • Підготовка допису в блозі, сторінки товару чи лендингу до поширення в соцмережах.
  • Виправлення прев’ю посилання, яке показує не те зображення чи старий заголовок.
  • Додавання прев’ю для поширення в односторінковий застосунок, що рендерить вміст через JavaScript.
  • Налаштування карток посилань для сайту документації, яким діляться в Slack чи Discord.

Приклад

Введення

Заголовок: Free JSON Formatter
Опис: Format and validate JSON in your browser.
URL: https://4dev.net/json-formatter
URL зображення: https://4dev.net/og/json-formatter.png
Тип: website

Виведення

<meta property="og:title" content="Free JSON Formatter"/>
<meta property="og:description" content="Format and validate JSON in your browser."/>
<meta property="og:url" content="https://4dev.net/json-formatter"/>
<meta property="og:image" content="https://4dev.net/og/json-formatter.png"/>
<meta property="og:type" content="website"/>

Запитання про цей інструмент

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

Платформи кешують прев’ю. Скористайтеся Facebook Sharing Debugger або LinkedIn Post Inspector, щоб завантажити сторінку повторно. Slack і WhatsApp оновлюються самі через деякий час.

Чи потрібні ще й теги Twitter Card?

X (Twitter) за відсутності власних тегів бере теги Open Graph, але додайте <meta name="twitter:card" content="summary_large_image"/>, щоб отримати макет із великим зображенням.

Чи мусить URL зображення бути абсолютним?

Так. Використовуйте повну адресу з https://. Більшість краулерів не розв’язують відносні шляхи, а зображення має бути публічно доступним без входу в обліковий запис.

Чи допомагають теги Open Graph у SEO?

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

Цей інструмент безкоштовний?

Так, він безкоштовний. Без реєстрації та електронної пошти. Результат на цій сторінці.

Як отримати результат?

Скористайтеся інструментом на цій сторінці. Результат з’явиться тут, без надсилання електронною поштою.