Генератор Open Graph

Всі інструменти

Створюйте теги Open Graph і Twitter Card, щоб ваші сторінки чудово виглядали під час поширення, із живим попереднім переглядом соціальної картки. Безкоштовно й працює у вашому браузері.

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

Теги
Рекомендований розмір: 1200 × 630 px.
Twitter / X
Попередній перегляд Facebook / LinkedIn
Поки що немає зображення
Попередній перегляд Twitter / X
Згенеровані мета-теги

Про Генератор Open Graph

Генератор Open Graph створює мета-теги og: та twitter:, які визначають, як розгортається посилання під час поширення у Facebook, LinkedIn, X та на інших платформах. Задайте тип вмісту (сайт, стаття, товар чи профіль), заголовок, опис, канонічний URL, зображення, назву сайту та локаль, а також опції Twitter Card, включно з типом картки та обліковими записами сайту/автора.

Два живі попередні перегляди — один у стилі картки поширення Facebook/LinkedIn, інший у стилі картки X — оновлюються під час введення, тож ви можете точно побачити, як виглядатимуть заголовок, опис, домен та зображення 1200 × 630 пікселів ще до публікації сторінки.

Усе працює у вашому браузері; нічого з введеного вами не завантажується. Скопіюйте згенеровані теги Open Graph і Twitter Card у буфер обміну або завантажте їх як HTML-сніпет, готовий для вставки в <head> вашої сторінки.

Як використовувати Генератор Open Graph

  1. Оберіть og:type — сайт, стаття, товар або профіль — або натисніть "Заповнити зразком", щоб почати з прикладу.
  2. Введіть заголовок, опис, канонічний URL та URL зображення (рекомендовано 1200 × 630 пікселів), а також назву сайту та локаль.
  3. Задайте тип Twitter Card (Summary або Summary з великим зображенням) та за бажанням облікові записи @site і @creator.
  4. Перегляньте обидва попередні перегляди соціальних карток, що оновлюються в реальному часі.
  5. Скопіюйте згенеровані мета-теги або завантажте файл .html і додайте його на вашу сторінку.

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

Використовуйте 1200 × 630 пікселів. Це співвідношення сторін виглядає чітко як велика картка у Facebook, LinkedIn та X без неочікуваного обрізання.

X здебільшого використовує Open Graph для більшості полів, але twitter:card потрібен для вибору макета картки, а twitter:site / twitter:creator додають авторство — генератор виводить усі ці теги разом.

Соціальні платформи кешують попередні перегляди посилань. Після впровадження нових тегів повторно скануйте URL за допомогою дебагера поширення чи валідатора карток відповідної платформи, щоб оновити кеш.

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

Так, повністю безкоштовний і без обмежень.
Поділитися
Пов'язані інструменти
Генератор мета-тегів Створіть повний набір SEO HTML мета-тегів — title, description, robots, canonical, viewport тощо — з живим попереднім переглядом у Google. Безкоштовно, у вашому браузері. Безкоштовно
Генератор Schema.org / JSON-LD Створюйте коректні структуровані дані Schema.org (JSON-LD) для статей, організацій, товарів, FAQ тощо — для розширених результатів. Безкоштовно, у вашому браузері. Безкоштовно
Генератор XML-карти сайту Перетворіть список URL-адрес на коректну XML-карту сайту з lastmod, changefreq і priority, готову до подання в пошукові системи. Безкоштовно, у вашому браузері. Безкоштовно
Коди стану HTTP Шукайте будь-який код стану відповіді HTTP (1xx–5xx) у каталозі з пошуком та фільтрами — потім відкрийте будь-який код, щоб дізнатися, що він означає, коли його використовувати, чи кешується він і який RFC його визначає. У браузері, безкоштовно. Безкоштовно
Методи HTTP Зручний для перегляду довідник усіх методів запитів HTTP — GET, POST, PUT, PATCH, DELETE та інші, плюс WebDAV — який з першого погляду показує, чи є кожен із них безпечним, ідемпотентним та кешованим, чи приймає тіло, а також типовий приклад. У браузері, безкоштовно. Безкоштовно
Довідник заголовків HTTP Шукайте поширені заголовки запитів і відповідей HTTP у каталозі з пошуком — фільтруйте за напрямком і категорією, читайте однорядковий опис та реалістичний приклад і копіюйте будь-яку назву заголовка одним клацанням. У браузері, безкоштовно. Безкоштовно
Потрібна допомога?
Виникла проблема з цим інструментом? Повідомте нас.
Повідомити про проблему

Додайте цей безкоштовний інструмент на власний вебсайт — скопіюйте та вставте код нижче.