Генератор Open Graph
Соберите полный набор мета-тегов og: и twitter: и наблюдайте, как карточка предпросмотра обновляется вживую, ещё до вставки куда-либо.
HTML snippet
Share card preview
example.com
Page title
Инструмент полностью работает в вашем браузере. Данные не покидают устройство и не загружаются ни на один сервер.
Как пользоваться
- 1Введите заголовок страницы, описание и canonical-URL.
- 2Добавьте URL картинки для шаринга (1200 × 630 px работает везде) и выберите тип карточки.
- 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 — для карточек интернет-магазина. Тип влияет на то, как некоторые платформы классифицируют ссылку.
Похожие инструменты
Генератор мета-тегов
Сгенерируйте мета-теги title, description, keywords, robots и viewport с живым HTML-выводом, который вставляется прямо в <head>.
Все инструменты →
Предпросмотр SERP
Посмотрите сниппет Google для десктопа и мобильных с обрезкой по пикселям и шкалами длины для заголовка и описания.
Все инструменты →
Генератор schema-разметки
Сгенерируйте валидные структурированные данные JSON-LD для Organization, LocalBusiness, Product, Article, FAQPage и HowTo — с экранированием, готовые к вставке.
Все инструменты →
Конструктор UTM-ссылок
Добавьте utm_source, medium, campaign, term и content к любому URL и получите правильно закодированную трекинговую ссылку для копирования или отправки.
Все инструменты →
Встроить этот инструмент
Одна строка — и инструмент на вашем сайте. Он работает в браузере посетителя.
<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>