Генератор Open Graph

Генерируйте мета-теги Open Graph и Twitter с предпросмотром социальной карточки.

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

Нужно разобрать части ссылки? Попробуйте парсер URL.

Об инструменте Генератор Open Graph

Этот генератор open graph создаёт мета-теги Open Graph и Twitter Card, которые нужны вашим страницам для красивых превью ссылок в соцсетях. Заполните заголовок, описание, канонический URL, og:image, тип, имя сайта и стиль Twitter-карточки, а затем наблюдайте, как живое превью соцкарточки обновляется по мере ввода, прежде чем скопировать готовый HTML. Это удобно для разработчиков, маркетологов и контент-команд, которым нужны корректные социальные мета-теги без ручного написания каждого свойства. Как генератор мета-тегов og и генератор twitter card он покрывает распространённые теги og:image и социальные мета-теги, чтобы ссылки в Facebook, LinkedIn, Slack и X выглядели аккуратно. Всё работает локально в браузере, поэтому ваш ввод обрабатывается на вашем устройстве, и ничего не загружается на сервер.

Возможности

Как использовать Генератор Open Graph

  1. Введите заголовок страницы, описание, URL и URL изображения в поля ввода.
  2. Задайте og:type и стиль Twitter-карточки, затем добавьте имя сайта.
  3. Проверьте живое превью соцкарточки, чтобы убедиться, как будет выглядеть ссылка.
  4. Нажмите «Копировать», чтобы взять HTML, или «Скачать», чтобы сохранить meta-tags.html.
  5. Вставьте сгенерированные теги в раздел <head> вашей страницы.

Пример

Ввод

title: День запуска
url: https://acme.dev/launch
image: https://acme.dev/og.png

Результат

<title>День запуска</title>
<!-- Open Graph -->
<meta property="og:title" content="День запуска" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://acme.dev/launch" />
<meta property="og:image" content="https://acme.dev/og.png" />
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="День запуска" />
<meta name="twitter:image" content="https://acme.dev/og.png" />

Пустые поля опускаются, а og:type по умолчанию равен website.

Частые ошибки и устранение неполадок

Часто задаваемые вопросы

Что такое генератор Open Graph?
Генератор Open Graph — это инструмент, который создаёт готовый к вставке HTML-блок мета-тегов Open Graph и Twitter Card на основе вашего заголовка, описания, URL, изображения, типа и имени сайта.
Как использовать генератор Open Graph для создания мета-тегов?
Заполните заголовок страницы, описание, канонический URL, og:image, тип и имя сайта, посмотрите, как обновляется живое превью, затем нажмите «Копировать» или «Скачать» и вставьте теги в раздел <head> страницы.
В чём разница между тегами Open Graph и Twitter Card?
Теги Open Graph (og:) читаются Facebook, LinkedIn, Slack и многими другими, а теги twitter: специфичны для X/Twitter. Этот инструмент выдаёт оба набора, чтобы превью работали везде.
Какой размер og:image работает лучше всего?
Изображение 1200x630 пикселей с абсолютным URL — безопасный выбор для карточек summary_large_image на большинстве платформ.
Почему мои изменения не появляются при публикации ссылки?
Соцсети кешируют превью, поэтому вставьте свой URL в их отладчик публикаций, чтобы принудительно пересканировать после обновления мета-тегов.
Остаётся ли мой ввод приватным в генераторе Open Graph?
Да. Теги создаются локально в браузере, ваши данные никогда не покидают ваше устройство, и ничего из введённого не загружается на сервер.

Связанные инструменты

Все инструменты ArrayKit