Skip to content

Генератор Open Graph и мета-тегов

Создавайте мета-теги Open Graph, Twitter Card и SEO с живым предпросмотром в Google, Facebook и X. 100% бесплатно, в браузере, без регистрации — просто скопируйте код.

Без отслеживания Работает в браузере Бесплатно
Всё работает в вашем браузере. Ваш контент и URL изображения никогда не покидают эту страницу — без загрузки, без регистрации.
Базовое SEO
Open Graph (Facebook, LinkedIn…)
X (Twitter) Card
Дополнительно и иконки
Проверки
    Сгенерированные теги <head> 
     
      
     Импорт из существующего <head> (разбирается локально, ничего не загружается) 
       
     
      
     Проверьте после деплоя: Facebook LinkedIn Google Rich Results 
     
     
      
      
       Вывод тегов и спецификации платформ сверены с протоколом Open Graph (ogp.me), Google Search Central и актуальной документацией по шерингу Facebook, X, LinkedIn и Discord. — Go Tools Team · Jul 15, 2026  
          
     
    Что такое мета-теги и Open Graph?
     
     
    Мета-теги — это фрагменты HTML в <head> вашей страницы, которые описывают её браузерам, поисковым системам и социальным платформам. Классические SEO-теги — это <title>, meta description и канонический link. Теги Open Graph (og:title, og:type, og:image, og:url и другие) — это протокол, изначально созданный Facebook, который определяет заголовок, описание и изображение, показываемые при публикации ссылки, и их читает почти каждая платформа, включая LinkedIn, Slack, Discord, WhatsApp, Pinterest и Telegram.
    Twitter/X использует собственные теги twitter:card, но при их отсутствии переходит к вашим тегам Open Graph, поэтому хороший набор OG-тегов плюс одно значение twitter:card покрывает любую сеть. Этот генератор записывает все эти теги, добавляет опциональные структурированные данные JSON-LD и показывает результат в живом предпросмотре — так что вам никогда не придётся писать их вручную или гадать, как будет выглядеть публикация.
     
      
      
     
    Спецификации изображений и тегов по платформам
     
     
     
    Open Graph (Facebook и LinkedIn)
     
    Обе платформы читают og:title, og:description, og:image и og:url. Рекомендуемое изображение — 1200×630 (1.91:1). Facebook кэширует ~30 дней, LinkedIn ~7 дней — повторно просканируйте их отладчиками после деплоя.
     
     
    X (Twitter) Card
     
    twitter:card обязателен (summary_large_image или summary). Для остального X берёт og:*. Одно изображение 1200×630 подходит и для OG, и для X; изображения меньше 300×157 понижают крупную карточку до маленькой.
     
     
    Slack и Discord
     
    Slack читает сначала Twitter Card, затем Open Graph, и может показать два дополнительных поля через twitter:label/data. Discord читает Open Graph и уникально использует theme-color для акцентной полосы встраивания.
     
     
    WhatsApp и Telegram
     
    WhatsApp требует og:title и og:image с метаданными ближе к началу HTML; Telegram читает Open Graph и надёжно отрисовывает только изображения JPEG или PNG.
     
     
    Pinterest Rich Pins
     
    Pinterest читает Open Graph или Schema.org. Для Article Rich Pin нужны og:type=article, а также article:published_time и article:author — всё это генерируется здесь при выборе типа article.
     
     
    Сниппет в поиске Google
     
    Живой предпросмотр выдачи (SERP) для десктопа и мобильных измеряет ваш заголовок и описание в пикселях, а не только в символах, — так вы видите риск обрезки раньше Google.
     
     
     
          
     
    Примеры мета-тегов
     
     
     
    Главная страница сайта
     
     
    Title: Acme — Ship faster
Description: The all-in-one platform for modern teams.
URL: https://acme.com
Image: https://acme.com/og/home.png (1200×630)
     
    <title>Acme — Ship faster</title>
<meta name="description" content="The all-in-one platform for modern teams.">
<link rel="canonical" href="https://acme.com">

<meta property="og:title" content="Acme — Ship faster">
<meta property="og:type" content="website">
<meta property="og:image" content="https://acme.com/og/home.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://acme.com">

<meta name="twitter:card" content="summary_large_image">
     
     
    Главной странице нужны только четыре обязательных тега Open Graph плюс заголовок, описание и canonical. Поскольку изображение имеет размер 1200×630, ширина и высота подставляются автоматически, поэтому самая первая публикация в Facebook отрисовывается сразу, а не пустой.
     
     
    Статья блога (с article:* + JSON-LD)
     
     
    og:type: article
Title: The Complete Guide to Open Graph Tags
Author: Ada Lovelace
Published: 2026-07-15
     
    <meta property="og:title" content="The Complete Guide to Open Graph Tags">
<meta property="og:type" content="article">
<meta property="og:image" content="https://blog.example.com/og/guide.png">
<meta property="og:url" content="https://blog.example.com/open-graph-guide">
<meta property="article:published_time" content="2026-07-15T00:00:00Z">
<meta property="article:author" content="Ada Lovelace">

<meta name="twitter:card" content="summary_large_image">

<script type="application/ld+json">{ "@type": "Article", "headline": "The Complete Guide to Open Graph Tags", "datePublished": "2026-07-15T00:00:00Z" }</script>
     
     
    Выбор типа article открывает свойства article:published_time и article:author и генерирует соответствующий Article JSON-LD, так что поисковые системы и Pinterest Rich Pins бесплатно получают структурированные данные.
     
     
    Twitter/X наследует Open Graph
     
     
    twitter:card: summary_large_image
Inherit title/description/image from OG: on
     
    <meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@acme">
     
     
    X читает ваши теги Open Graph, когда соответствующий тег twitter:* отсутствует, поэтому вам нужен только twitter:card. Генератор никогда не выводит пустой twitter:image, который сломал бы этот запасной механизм.
     
     
     
          
     
    Как добавить теги Open Graph на сайт
     
       
    1.  1 
       
      Введите заголовок, описание и URL
       
      Введите заголовок страницы, meta description и канонический URL. Измеритель в пикселях покажет, помещаются ли они в поисковый сниппет Google.
       
       
    2.  2 
       
      Добавьте og:image и выберите тип
       
      Вставьте URL изображения 1200×630 и выберите website, article, product или profile — соответствующие поля Open Graph и JSON-LD появятся автоматически.
       
       
    3.  3 
       
      Проверьте живой предпросмотр
       
      Переключайтесь между вкладками Google, Facebook, X, LinkedIn, Slack и Discord, чтобы точно увидеть, как будет выглядеть ваша ссылка перед публикацией.
       
       
    4.  4 
       
      Скопируйте в свой 
       
      Скопируйте полный блок тегов (или одну секцию) и вставьте его внутрь  вашего HTML. После деплоя проверьте результат отладчиками Facebook и LinkedIn.
       
       
      5.  
     
      
     
    Частые ошибки Open Graph
     
     
     
    Относительный путь og:image
     
    Путь вроде /cover.png работает в редакторе, но пуст при публикации, потому что краулерам нужен абсолютный URL.
     
     
     ✗ Неверно 
    <meta property="og:image" content="/cover.png">
     
     
     ✓ Верно 
    <meta property="og:image" content="https://example.com/cover.png">
     
     
     
     
    Отсутствует og:url
     
    Без канонического og:url счётчики публикаций дробятся между вариантами URL, и платформы могут выбрать неправильный адрес.
     
     
     ✗ Неверно 
    <!-- no og:url -->
     
     
     ✓ Верно 
    <meta property="og:url" content="https://example.com/page">
     
     
     
     
    Слишком маленькое изображение или неверное соотношение
     
    Facebook игнорирует изображения меньше 200×200 и обрезает всё, что сильно отличается от 1.91:1.
     
     
     ✗ Неверно 
    600×600 og:image
     
     
     ✓ Верно 
    1200×630 og:image (1.91:1)
     
     
     
     
    Забытый twitter:card
     
    Даже при полном наборе тегов Open Graph X не отрисует карточку, пока не задан twitter:card.
     
     
     ✗ Неверно 
    <!-- OG only, no twitter:card -->
     
     
     ✓ Верно 
    <meta name="twitter:card" content="summary_large_image">
     
     
     
     
    Пустой twitter:image ломает запасной вариант
     
    Пустой twitter:image мешает X перейти к og:image — лучше опустить тег, чем оставлять его пустым.
     
     
     ✗ Неверно 
    <meta name="twitter:image" content="">
     
     
     ✓ Верно 
    <!-- omit it; X uses og:image -->
     
     
     
     
    Charset указан слишком поздно
     
    Объявление charset должно появиться в первых 1024 байтах документа, иначе оно игнорируется.
     
     
     ✗ Неверно 
    <meta charset> after many tags
     
     
     ✓ Верно 
    <meta charset="utf-8"> first in <head>
     
     
     
     
     
      
     
    Частые сценарии использования
     
     
     
    Запуск лендинга
     
    Сгенерируйте полный блок head для новой маркетинговой страницы, чтобы она выглядела аккуратно в момент, когда кто-то делится ссылкой в X, LinkedIn или Slack.
     
     
    Превью блога и статей
     
    Добавьте article:published_time, article:author и Article JSON-LD, чтобы посты подходили для Pinterest Rich Pins и насыщенных социальных карточек.
     
     
    Исправление сломанной карточки ссылки
     
    Импортируйте текущие теги, найдите отсутствующий og:image или неверный размер в панели проверок, исправьте и повторно просканируйте по ссылкам на отладчики.
     
     
    Сниппеты head для фреймворков
     
    Скопируйте чистый, корректный набор тегов, чтобы вставить его в статический сайт, шаблон CMS или серверный частичный шаблон head.
     
     
     
      
     
    Как работает генератор
     
     
     
    Живой предпросмотр в браузере
     
    Каждая карточка отрисовывается из введённых вами значений, а не путём запроса вашего URL. Это делает предпросмотр мгновенным и приватным и является единственным честным способом посмотреть результат до деплоя страницы.
     
     
    Точный до пикселя измеритель SERP
     
    Google обрезает заголовки и описания по ширине в пикселях, а не по числу символов. Canvas измеряет ваш текст тем же шрифтом, поэтому измеритель становится жёлтым ровно тогда, когда сниппет был бы обрезан.
     
     
    Проверка изображения на стороне клиента
     
    URL вашего og:image загружается в объект Image в вашем браузере, чтобы считать его реальную ширину и высоту, а затем проверяется на соответствие 1200×630 и соотношению сторон карточки. Изображения с других доменов (cross-origin) всё равно сообщают свой размер, поэтому проверка работает без какой-либо загрузки.
     
     
    Полный современный набор тегов
     
    Базовое SEO, Open Graph, Twitter Card и JSON-LD в одном блоке, причём charset выводится первым, чтобы попасть в первые 1024 байта. Устаревшие теги вроде meta keywords по умолчанию отключены.
     
     
     
      
     
    Лучшие практики для мета-тегов
     
     
     
    Используйте абсолютные HTTPS-URL
     
    og:image и og:url должны быть полными URL вида https://… Относительные пути работают локально, но отрисовываются пустыми, когда краулер запрашивает живую страницу.
     
     
    Всегда задавайте og:image:width и height
     
    Указание размеров позволяет платформам сразу построить карточку, поэтому первая публикация не будет пустой, пока они асинхронно загружают изображение.
     
     
    Держите canonical и og:url одинаковыми
     
    Указывайте оба на один канонический URL, чтобы счётчики публикаций и поисковые сигналы не дробились между вариантами URL.
     
     
    Пишите с учётом бюджета в пикселях
     
    Стремитесь к заголовку около 50–60 символов и описанию около 155 — но доверяйте измерителю в пикселях, поскольку Google измеряет ширину, а не число символов.
     
     
    Рендерите теги на стороне сервера
     
    Краулеры Facebook, LinkedIn, WhatsApp, Telegram и Discord не выполняют JavaScript, поэтому теги Open Graph должны быть в статическом или серверном HTML.
     
     
     
      
     
    Часто задаваемые вопросы
     
     
     Что такое генератор мета-тегов? 
     Генератор мета-тегов создаёт HTML-теги, которые размещаются в <head> вашей страницы: <title>, meta description, канонический link, теги Open Graph для Facebook и LinkedIn и теги Twitter/X Card. Этот инструмент генерирует их все сразу, показывает живой предпросмотр того, как будет выглядеть ваша ссылка в Google, Facebook, X, LinkedIn, Slack и Discord, и позволяет скопировать код одним кликом. Всё работает в вашем браузере. 
     
     Как добавить теги Open Graph на сайт? 
     Заполните заголовок, описание, канонический URL и URL для og:image, выберите тип Open Graph, затем скопируйте сгенерированные теги и вставьте их внутрь <head> вашего HTML. Поскольку краулеры Facebook, LinkedIn, WhatsApp и Telegram не выполняют JavaScript, теги должны присутствовать в серверном или статическом HTML, а не добавляться клиентскими скриптами. 
     
     Какого размера должно быть изображение Open Graph? 
     Рекомендуемый размер og:image — 1200×630 пикселей с соотношением сторон 1.91:1, что также подходит для карточки summary_large_image в X. Facebook игнорирует изображения меньше 200×200 и показывает маленький квадрат для всего, что меньше 600×315. Всегда указывайте og:image:width и og:image:height, чтобы карточка отрисовывалась мгновенно при первой публикации ссылки, и отдавайте изображение по HTTPS с публичного URL, не заблокированного в robots.txt. 
     
     Обязателен ли тег twitter:card? 
     Да — twitter:card это единственный тег Twitter/X, который необходимо указать, иначе X не отрисует карточку, даже если ваши теги Open Graph присутствуют. Установите значение summary_large_image для крупного изображения или summary для маленькой квадратной миниатюры. Для всего остального (заголовок, описание, изображение) X берёт ваши теги og:*, поэтому инструмент по умолчанию их не добавляет, чтобы разметка оставалась чистой. 
     
     Помогают ли мета-теги в SEO? 
     Теги <title> и canonical важны для SEO; meta description не является прямым фактором ранжирования, но влияет на кликабельность, формируя сниппет в поиске. Теги Open Graph и Twitter Card не влияют на ранжирование в Google, но определяют, как выглядят ваши ссылки при публикации, что приносит трафик из соцсетей. Google может переписать ваш заголовок в результатах, поэтому пишите понятный и уникальный заголовок и ставьте важные слова в начало. 
     
     Загружает ли инструмент мой контент или изображения? 
     Нет. Всё генерируется локально в вашем браузере с помощью JavaScript. Ваш заголовок, описание и URL изображения никогда не покидают страницу — нет сервера, нет загрузки и нет аккаунта. Изображение og:image загружается только в вашем браузере, чтобы показать предпросмотр и считать его размеры. 
     
     Можно ли импортировать уже готовые мета-теги? 
     Да. Откройте панель импорта, вставьте свои существующие теги <meta>, и инструмент разберёт их локально встроенным HTML-парсером браузера, чтобы заполнить форму — без сетевых запросов, ничего не загружается. Это ориентированная на приватность альтернатива инструментам, которые запрашивают живой URL со своего сервера. 
     
     Почему обновлённый предпросмотр всё ещё показывает старое изображение в Facebook или LinkedIn? 
     Платформы кэшируют данные Open Graph: Facebook — около 30 дней, LinkedIn — около 7 дней. После деплоя повторно просканируйте страницу через Facebook Sharing Debugger или LinkedIn Post Inspector, чтобы обновить кэшированные заголовок, описание и изображение. Ссылки на отладчики приведены под сгенерированным кодом. 
     
     
     
     
       
      
     
     
    Похожие инструменты
      Все инструменты →
 
     
      
     
      
      
      
     
     
    Генератор и конструктор curl-команд
     
     
    Веб и API
     
    Создавайте curl-команды прямо в браузере: метод, заголовки, авторизация, тело — готовая команда мгновенно. Пресеты для Bearer, POST JSON, загрузки файлов. Бесплатно, приватно, без регистрации.
     
     
       
          
     
      
      
      
     
     
    htpasswd Генератор — bcrypt, Apache MD5 (apr1) и Basic Auth
     
     
    Веб и API
     
    Генерируйте записи htpasswd с bcrypt, Apache MD5 (apr1), SHA-1 и другими алгоритмами. Получайте готовые конфиги для Apache, nginx и Docker. 100% в браузере — без загрузки данных.
     
     
       
          
     
      
      
      
     
     
    Конвертер систем счисления — bin, hex, dec, oct
     
     
    Конвертеры
     
    Конвертация между системами счисления — двоичной, hex, десятичной, восьмеричной и любой базой 2-36 мгновенно. Бесплатно, приватно — вся обработка в браузере.
     
     
       
          
     
      
      
      
     
     
    Base64 декодер и кодировщик
     
     
    Кодирование и форматирование
     
    Декодирование и кодирование Base64 онлайн бесплатно. Преобразование в реальном времени с полной поддержкой UTF-8 и эмодзи. Полная приватность — работает в браузере. Без регистрации.
     
     
       
          
     
      
      
      
     
     
    Конвертер Base64 в изображение
     
     
    Кодирование и форматирование
     
    Декодируйте строку Base64 или data URI обратно в изображение прямо в браузере. Предпросмотр, размеры и MIME, затем скачивание как PNG, JPG, GIF, SVG. Без загрузки.
     
     
       
          
     
      
      
      
     
     
    Генератор и проверка bcrypt-хешей
     
     
    Безопасность
     
    Создавайте и проверяйте bcrypt-хеши паролей онлайн — настраиваемый фактор стоимости, префиксы $2b$/$2a$/$2y$. 100% в браузере; пароль никуда не отправляется.