Skip to content
Zoyku

Генератор Open Graph

Соберите полный набор мета-тегов og: и twitter: и наблюдайте, как карточка предпросмотра обновляется вживую, ещё до вставки куда-либо.

HTML snippet

Share card preview

image URL (1200 × 630)

example.com

Page title

Инструмент полностью работает в вашем браузере. Данные не покидают устройство и не загружаются ни на один сервер.

Как пользоваться

  1. 1Введите заголовок страницы, описание и canonical-URL.
  2. 2Добавьте URL картинки для шаринга (1200 × 630 px работает везде) и выберите тип карточки.
  3. 3Скопируйте теги в <head> и проверьте карточку предпросмотра.

Генератор Open Graph

Когда вашу ссылку шарят в X, Facebook, LinkedIn, Slack или iMessage, карточка предпросмотра собирается почти целиком из тегов Open Graph, а теги Twitter Card закрывают пробелы. Генератор выводит оба пространства имён: og:title, og:type, og:url, og:image, og:image:alt, og:site_name, og:description и og:locale, плюс twitter:card, twitter:site и twitter:creator.

Большинство платформ откатываются к og:-тегам, когда twitter:-тега нет, поэтому дополнительные нужны лишь там, где значения различаются. Живой предпросмотр приближённо показывает, как отрисуется карточка с большой картинкой или сводкой.

Частые вопросы

Какой размер картинки брать для og:image?

1200 × 630 пикселей (1.91:1) — безопасное значение по умолчанию для Facebook, X и LinkedIn. Держите файл до 8 МБ, используйте абсолютный URL и всегда добавляйте og:image:alt ради доступности.

Нужны ли одновременно og: и twitter: теги?

twitter:title, twitter:description и twitter:image откатываются к og:-эквивалентам. Поверх набора og: вам нужны только twitter:card (summary или summary_large_image), twitter:site и, при желании, twitter:creator.

Какой og:type выбрать?

website — для главных и обычных страниц, article — для новостей и постов блога (добавьте article:published_time, если можно), product — для карточек интернет-магазина. Тип влияет на то, как некоторые платформы классифицируют ссылку.

Встроить этот инструмент

Одна строка — и инструмент на вашем сайте. Он работает в браузере посетителя.

<iframe src="https://zoyku.com/ru/tools/open-graph-generator?embed=1" width="100%" height="640" style="border:0;border-radius:16px" title="Zoyku — open-graph-generator" loading="lazy"></iframe>
100% local processing