Этот генератор open graph создаёт мета-теги Open Graph и Twitter Card, которые нужны вашим страницам для красивых превью ссылок в соцсетях. Заполните заголовок, описание, канонический URL, og:image, тип, имя сайта и стиль Twitter-карточки, а затем наблюдайте, как живое превью соцкарточки обновляется по мере ввода, прежде чем скопировать готовый HTML. Это удобно для разработчиков, маркетологов и контент-команд, которым нужны корректные социальные мета-теги без ручного написания каждого свойства. Как генератор мета-тегов og и генератор twitter card он покрывает распространённые теги og:image и социальные мета-теги, чтобы ссылки в Facebook, LinkedIn, Slack и X выглядели аккуратно. Всё работает локально в браузере, поэтому ваш ввод обрабатывается на вашем устройстве, и ничего не загружается на сервер.
Возможности
Генерирует теги Open Graph (og:title, og:description, og:type, og:url, og:image, og:site_name)
Добавляет соответствующие теги Twitter Card (twitter:card, title, description, image)
Живое превью соцкарточки, обновляющееся по мере ввода
Выдаёт чистый, готовый к копированию HTML-блок мета-тегов
Корректно экранирует специальные символы в заголовках, описаниях и URL
Позволяет выбрать og:type и стиль twitter:card (например, summary_large_image)
Копирование в буфер обмена или скачивание тегов как meta-tags.html
Пропускает пустые поля, чтобы сгенерированная разметка оставалась аккуратной
Как использовать Генератор Open Graph
Введите заголовок страницы, описание, URL и URL изображения в поля ввода.
Задайте og:type и стиль Twitter-карточки, затем добавьте имя сайта.
Проверьте живое превью соцкарточки, чтобы убедиться, как будет выглядеть ссылка.
Нажмите «Копировать», чтобы взять HTML, или «Скачать», чтобы сохранить meta-tags.html.
Вставьте сгенерированные теги в раздел <head> вашей страницы.
Пример
Ввод
title: День запуска
url: https://acme.dev/launch
image: https://acme.dev/og.png
Пустые поля опускаются, а og:type по умолчанию равен website.
Частые ошибки и устранение неполадок
og:image не отображается в превью на Facebook или LinkedIn. — Используйте полный абсолютный URL (https://...) для изображения, а не относительный путь, и убедитесь, что изображение публично доступно.
Twitter показывает маленькое изображение вместо большой карточки. — Задайте значение twitter:card равным summary_large_image, чтобы платформы отображали макет с изображением во всю ширину.
Заголовок или описание выглядит обрезанным в превью. — Держите заголовки около 60 символов, а описания около 110–160 символов, чтобы платформы их не обрезали.
Специальные символы вроде & или < ломают разметку. — Вводите символы как есть; генератор автоматически экранирует их в корректные HTML-сущности в выводе.
Платформы по-прежнему показывают старые данные превью после обновления тегов. — Пересканируйте URL отладчиком платформы (например, Facebook Sharing Debugger), чтобы очистить кешированное превью.
Часто задаваемые вопросы
Что такое генератор 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?
Да. Теги создаются локально в браузере, ваши данные никогда не покидают ваше устройство, и ничего из введённого не загружается на сервер.
Связанные инструменты
Форматировщик HTML — Форматируйте или минифицируйте HTML, форматируйте встроенный CSS/JS и просматривайте результат.
Разбор URL — Разбейте URL на части и просмотрите список параметров запроса.