Инструменты - Генератор Open Graph и X (Twitter) Card
Создайте Open Graph и X (Twitter) Card meta-теги онлайн: og:title, og:description, og:image, article:* и Twitter Card. Генерация HTML meta-тегов и Next.js Metadata для SEO, соцсетей и красивого превью ссылок.
Версия · обновлено 23 мая 2026 г.
Параметры
Заполните поля Open Graph и X (Twitter) Card — разметка обновится автоматически.
Open Graph
Рекомендуемый размер превью — 1200×630 px. Можно добавить несколько og:image.
X (Twitter) Card
Результат
Готовая разметка для вставки в <head> или в generateMetadata().
<meta property="og:title" content="Заголовок страницы" /><meta property="og:description" content="Краткое описание для превью в соцсетях и мессенджерах" /><meta property="og:url" content="https://example.com/page" /><meta property="og:type" content="website" /><meta property="og:locale" content="ru_RU" /><meta property="og:site_name" content="Example" /><meta property="og:image" content="https://example.com/assets/og.webp" /><meta property="og:image:width" content="1200" /><meta property="og:image:height" content="630" /><meta property="og:image:alt" content="Превью страницы" /><meta property="og:image:type" content="image/webp" /><meta name="twitter:card" content="summary_large_image" /><meta name="twitter:site" content="@example" /><meta name="twitter:title" content="Заголовок страницы" /><meta name="twitter:description" content="Краткое описание для превью в соцсетях и мессенджерах" /><meta name="twitter:image" content="https://example.com/assets/og.webp" />ВКонтакте, Telegram, LinkedIn и другие площадки с og:*.
Краткое описание для превью в соцсетях и мессенджерах
Карточка summary_large_image.
Краткое описание для превью в соцсетях и мессенджерах
Расскажите о вашем проекте
Связаться иначе
- Почта
- hello@baranov.guru
- Telegram
- @baranov_guru
- Чат на сайте
- Написать
Часто задаваемые вопросы
Open Graph — это набор meta-тегов (og:*), которые помогают соцсетям и мессенджерам формировать карточку ссылки: заголовок, описание, изображение и URL. Такие теги используют Telegram, LinkedIn, Facebook, Discord, Slack и другие платформы.
Open Graph использует meta property="og:", а X (Twitter) Card — meta name="twitter:". Многие платформы могут использовать og:* как резервные значения, но для корректного отображения в X лучше задавать twitter:* отдельно.
Поддерживаются og:title, og:description, og:url, og:type, og:locale, og:site_name, og:image и дополнительные параметры изображения (width, height, alt, type). Также доступны article:* поля, fb:app_id и Twitter Card: twitter:card, twitter:title, twitter:description, twitter:image, twitter:site и twitter:creator.
Генератор создаёт HTML meta-теги для вставки в <head>, а также объект openGraph и twitter для export const metadata или generateMetadata() в Next.js App Router.
Да. Можно получить готовый фрагмент metadata для Next.js App Router с openGraph и twitter полями.
Данные не отправляются на сервер. Генерация meta-тегов происходит полностью в браузере.
Рекомендуемый размер — 1200×630 px с соотношением сторон 1.91:1. Лучше использовать абсолютный HTTPS URL, чтобы соцсети и мессенджеры могли корректно загрузить изображение.
Да. После публикации страницы рекомендуется проверить превью ссылки через валидаторы Open Graph и Twitter Card, потому что соцсети могут кэшировать данные.
Open Graph и Twitter Card используются Telegram, X (Twitter), Facebook, LinkedIn, Discord, Slack, WhatsApp, VK и другими платформами для формирования карточек ссылок.
Можно адаптировать генератор под ваш проект, CMS или внутренние шаблоны страниц.
Вам может быть интересно
Валидатор Open Graph и X (Twitter) Card
Проверка Open Graph и X (Twitter) Card по URL: анализ meta-тегов, замечания по SEO и превью карточек для соцсетей.
Добавляем JSON-LD разметку к блогу на Next.js
Инструкция по добавлению JSON-LD разметки к блогу на Next.js...
Добавляем рекомендации постов и блок "Поделиться в соц. сетях"
Изучали различные блоги, аналогичные нашему и решили добавить блок "Поделиться в соц. сетях", а так же простейший механизм рекомендаций статей. Вот что из этого вышло...
Автопостинг в VK через RSS feed
Заметили в настройках сообщества в VK интересную настройку, связанную с фидами. И понеслось...
Генератор JSON-LD
Соберите JSON-LD для страницы: выберите тип schema.org, заполните поля — получите JSON и готовый тег script для вставки в разметку.
UTM-генератор
Соберите UTM-метки для ссылки за минуту: пресеты, сохранение существующих параметров и кнопка копирования.
Генератор sitemap.xml
Соберите валидный sitemap.xml из списка URL: обычная карта, индекс или расширения Google (image, video, news) — прямо в браузере.
Техническая SEO-оптимизация
Устраняем технические проблемы сайта, которые мешают росту позиций, индексации и органическому трафику.
Frontend разработка
Разрабатываем интерфейсы, которые быстро работают, удобно используются и масштабируются вместе с продуктом.
Разработка вебсайтов
Сайт под ваш бизнес: от структуры и дизайна до запуска и масштабирования. Быстро, продуманно и с фокусом на результат.