Генератор мета-тегов 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 даёт вам полный контроль над тем, как ваш контент выглядит ещё до клика.

Зачем его использовать?

Live-превью — видите, как будет выглядеть карточка шеринга, прямо во время ввода данных, ещё до публикации.
Генерирует сразу и теги 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 изображения для превью (ссылка на изображение должна быть полной, например https://example.com/image.jpg, а не относительным путём).
При желании укажите название сайта, выберите og:type (website, article, product, profile, video, music) и тип карточки Twitter (summary или summary_large_image).
Проверьте карточку live-превью, чтобы убедиться, что заголовок, описание и изображение хорошо сочетаются.
Нажмите «Копировать» и вставьте сгенерированные теги <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, ссылка на изображение относительная, а не абсолютная, краулер заблокирован через 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. Ничто из введённого не передаётся, не логируется и не сохраняется — при закрытии вкладки всё исчезает.