calcal.ru
Инструмент для SMM и веб-разработки

Генератор Open Graph тегов

Создавайте OG-теги для красивого отображения ваших ссылок при шаринге в VK, Telegram и VK. Предпросмотр карточки, Telegram Card и готовый HTML-код для копирования.

6
Типов контента
website, article, product, profile, video, music
3
Соцсети с превью
VK, Telegram, VK
15+
Мета-тегов
OG, Telegram Card и VK теги
1200x630
Размер изображения
Рекомендуемый размер OG-картинки

Что такое Open Graph Protocol

Open Graph Protocol (OGP) — это стандарт разметки веб-страниц мета-тегами, позволяющий контролировать, как ваш контент отображается при публикации ссылок в социальных сетях и мессенджерах. Когда пользователь делится ссылкой в VK, Telegram или VK, платформа считывает OG-теги и формирует красивую карточку с заголовком, описанием и картинкой.

Происхождение

Протокол Open Graph опубликован в 2010 году для управления тем, как ссылки отображаются в ленте новостей соцсетей. С тех пор он стал стандартом де-факто: его поддерживают VK, Telegram, HeadHunter, Pinterest и все крупные платформы.

Как работает

OG-теги размещаются в секции <head> HTML-документа в виде мета-тегов с атрибутом property. Когда краулер соцсети обращается к URL, он парсит эти теги и использует их данные для формирования карточки вместо автоматического извлечения контента со страницы.

Зачем нужен

Без OG-тегов соцсети берут случайный текст и картинку со страницы, что приводит к некрасивым превью. Правильная OG-разметка увеличивает CTR ссылок на 20-50%, улучшает узнаваемость бренда и создает профессиональное впечатление при каждом шаринге.

Где используются OG-теги

Open Graph теги необходимы для любого сайта, который продвигается через социальные сети и мессенджеры.

💬

ВКонтакте

VK полностью поддерживает Open Graph. Карточка ссылки показывается в ленте, личных сообщениях и комментариях. Поддерживается дополнительный тег vk:image для отдельного изображения при шаринге в VK.

✈️

Telegram

Telegram Instant View использует OG-теги для генерации превью ссылок в чатах и каналах. Красивая карточка с изображением увеличивает вовлеченность подписчиков и количество переходов по ссылке.

📱

VK и VK

VK — создатель Open Graph. Платформа использует теги для формирования карточек в ленте, Stories и Messenger. Для проверки разметки есть официальный инструмент Sharing Debugger.

🐦

Telegram (X) Card

Telegram использует собственные мета-теги (telegram:card, telegram:title), но фоллбэчит на OG-теги при их отсутствии. Два основных типа карточек: summary (маленькая) и summary_large_image (большая).

📈

SEO и поисковики

Яндекс и Google учитывают OG-теги для формирования сниппетов в поисковой выдаче. Корректная разметка улучшает CTR из поиска и помогает поисковым роботам лучше понимать содержание страницы.

💼

Мессенджеры и сервисы

Telegram, Viber, Slack, Discord, HeadHunter, Pinterest — все эти платформы используют OG-теги для генерации превью ссылок. Одна разметка работает на десятках платформ одновременно.

Справочник OG-тегов/ полное руководство

Основные Open Graph мета-теги, которые необходимо указывать на каждой странице вашего сайта. Четыре обязательных тега выделены отдельно.

Обязательные теги

og:titleЗаголовок страницы. Отображается крупным шрифтом в карточке. Рекомендуемая длина: 60-90 символов.
og:typeТип контента: website, article, product, profile, video.other, music.song и другие.
og:imageURL изображения для карточки. Абсолютный путь (https://...). Минимум 200x200 px, рекомендуется 1200x630 px.
og:urlКанонический URL страницы. Используется для дедупликации лайков и шеров с разных вариантов URL.

Рекомендуемые теги

og:descriptionОписание страницы. Отображается под заголовком. Рекомендуется 150-200 символов.
og:site_nameНазвание сайта. Отображается мелким шрифтом над или под заголовком карточки.
og:localeЛокаль контента в формате language_TERRITORY: ru_RU, en_US, uk_UA. По умолчанию en_US.

Теги для статей (article)

article:authorURL профиля автора или его имя. Поддерживается массив для нескольких авторов.
article:published_timeДата публикации в ISO 8601: 2025-01-15T10:00:00+03:00.
article:sectionРаздел или рубрика статьи: «Технологии», «Маркетинг» и т.п.
article:tagТеги статьи. Можно указать несколько тегов через отдельные мета-теги.

Совет: всегда указывайте абсолютные URL для og:image и og:url. Относительные пути не поддерживаются большинством платформ.

Проверка: после добавления тегов очистите кэш VK через API, а VK — через Sharing Debugger.

Размеры OG-изображений

Каждая платформа имеет свои рекомендации по размеру изображений. Для универсальной совместимости используйте формат 1200x630 пикселей (соотношение 1.91:1).

ВКонтакте

vk.com

Рекомендуемый размер: 537x240 px (соотношение 16:9) или 1200x630 px (1.91:1). Минимальный размер: 160x160 px. VK обрезает изображения сверху и снизу. Поддерживается отдельный тег vk:image для отдельной картинки.

Формат: JPG, PNG, GIF (статичные). Максимальный размер файла: 5 МБ.

Telegram

t.me

Рекомендуемый размер: 1200x630 px (1.91:1). Telegram отображает горизонтальные превью ссылок в чатах. Если изображение слишком маленькое или квадратное, превью может выглядеть некорректно. Telegram кэширует превью агрессивно.

Очистка кэша: отправьте ссылку боту @WebPageBot для принудительного обновления.

VK

vk.com

Рекомендуемый размер: 1200x630 px (1.91:1). Минимальный: 200x200 px. При изображении менее 600x315 px VK показывает маленькую карточку с картинкой слева. Для полноразмерной карточки изображение должно быть не менее 600 px по ширине.

Проверка: VK OG-превью — внутри редактора поста при вставке ссылки

Telegram

t.me

Для summary_large_image: 1200x628 px (1.91:1). Для summary: 144x144 px (1:1). Telegram обрезает изображения по центру. Важно размещать ключевую информацию в центре картинки. Поддерживается отдельный набор telegram:-тегов.

Проверка: отправьте ссылку боту @WebPageBot в Telegram

Советы по настройке OG-тегов

Практические рекомендации, которые помогут сделать ваши ссылки максимально привлекательными в социальных сетях.

1Уникальные теги для каждой страницы

Не используйте одинаковые OG-теги на всех страницах. Каждая страница должна иметь уникальный заголовок, описание и изображение. Это критически важно для аналитики шаринга и CTR в социальных сетях.

2Текст на изображении

Добавляйте ключевой текст на OG-изображение — это резко увеличивает кликабельность. Но не перегружайте: заголовок из 3-5 слов и логотип. VK рекомендует, чтобы текст занимал не более 20% площади картинки.

3Используйте HTTPS для изображений

Все URL в OG-тегах должны начинаться с https://. Многие платформы (включая VK и Telegram) не загружают изображения по HTTP. Также убедитесь, что сервер отдает правильные CORS-заголовки.

4Заголовок и описание — разный текст

og:title и og:description должны дополнять друг друга, а не повторяться. Заголовок привлекает внимание (до 70 символов), описание раскрывает суть (до 200 символов). Вместе они должны мотивировать кликнуть по ссылке.

5Проверяйте после деплоя

После размещения тегов обязательно проверьте их через валидаторы: VK Sharing Debugger, Telegram Card Validator, бот @WebPageBot в Telegram. Соцсети кэшируют превью, и без очистки кэша старые данные могут отображаться неделями.

6Оптимизируйте размер файла картинки

OG-изображение должно загружаться быстро — краулеры соцсетей имеют таймаут. Оптимальный размер файла: 100-300 КБ. Используйте формат JPG для фотографий и PNG для графики с текстом. WebP поддерживается не всеми платформами.

Как пользоваться генератором

Создайте полный набор OG-тегов за несколько шагов и скопируйте готовый HTML-код.

1

Выберите тип контента

Укажите тип страницы: сайт, статья, товар, профиль, видео или музыка. Для статей откроются дополнительные поля.

2

Заполните поля

Введите заголовок, описание, URL страницы и ссылку на изображение. Заполните Telegram Card и VK-теги при необходимости.

3

Проверьте превью

Переключайтесь между вкладками VK, Telegram и VK, чтобы увидеть, как будет выглядеть ваша карточка в каждой соцсети.

4

Скопируйте код

Нажмите «Копировать HTML» и вставьте сгенерированные мета-теги в секцию <head> вашего HTML-документа.

Связанные инструменты

Генератор schema.org

Структурированная разметка JSON-LD для Яндекса и Google

Генератор robots.txt

Конструктор robots.txt для управления индексацией

Генератор .htaccess

Редиректы, HTTPS, кэширование для Apache

ЧАСТЫЕ ВОПРОСЫ

Часто задаваемые вопросы

Open Graph теги — это мета-теги в секции <head> HTML-документа, которые управляют отображением ссылки при шаринге в социальных сетях. Без них платформы (VK, Telegram, VK) берут случайный текст и картинку со страницы, что приводит к некрасивым превью. С правильными OG-тегами вы контролируете заголовок, описание и изображение карточки.
По спецификации обязательны четыре тега: og:title (заголовок), og:type (тип контента), og:image (изображение) и og:url (канонический URL). На практике настоятельно рекомендуется также указывать og:description (описание) и og:site_name (название сайта), так как без них карточка выглядит неполной.
Универсальный рекомендуемый размер — 1200x630 пикселей (соотношение 1.91:1). Этот формат корректно отображается в VK, VK, Telegram и Telegram. Минимальный размер для VK — 200x200 px, но при такой маленькой картинке карточка будет выглядеть плохо. Размер файла — до 5 МБ, оптимально 100-300 КБ.
Telegram (X) использует собственные мета-теги (telegram:card, telegram:title, telegram:description, telegram:image), но при их отсутствии автоматически фоллбэчит на соответствующие OG-теги. Рекомендуется указывать оба набора: OG для VK, VK и мессенджеров, а telegram:-теги — для X, если нужно показать другой контент.
Для VK — просто вставьте ссылку в новый пост и посмотрите превью в редакторе. Для Telegram — отправьте ссылку боту @WebPageBot. Все платформы кэшируют превью, поэтому после изменений нужно очищать кэш.
vk:image — проприетарный мета-тег VK, позволяющий указать отдельное изображение для шаринга именно в ВКонтакте. Если этот тег не указан, VK использует og:image. Это полезно, когда нужно показать разные картинки в VK и VK — например, с разными логотипами или текстом на изображении.
В VK для очистки кэша нужно использовать API-метод pages.clearCache, передав URL страницы. Также можно просто подождать — VK обновляет кэш автоматически, но это может занять несколько часов. В Telegram — отправьте ссылку боту @WebPageBot. В VK — используйте кнопку Scrape Again в Sharing Debugger.
Да, Яндекс частично поддерживает Open Graph. Поисковик использует og:title и og:description для формирования сниппетов, а og:image — для картинки в Яндекс.Картинках и Дзене. Кроме того, Яндекс Мессенджер и Яндекс.Дзен полностью поддерживают OG-теги для превью ссылок.
Да. В Next.js 14+ используйте функцию generateMetadata() в файле page.jsx или layout.jsx. Для og:image Next.js поддерживает динамическую генерацию через opengraph-image.jsx. В других React-фреймворках используйте библиотеку react-helmet или вставляйте мета-теги через серверный рендеринг (SSR).
Без OG-тегов социальные сети попытаются автоматически извлечь информацию со страницы: заголовок из тега <title>, описание из meta description, а изображение — первое подходящее на странице. Результат обычно непредсказуем: может подтянуться логотип, баннер или даже иконка. Карточка будет выглядеть непрофессионально.
Лиана Арифметова
АВТОРverifiedред. calcal.ru

Лиана Арифметова

Создатель и главный редактор

Миссия: демократизировать сложные расчёты. Превратить страх перед числами в ясность и контроль. Девиз: «Любая повторяющаяся задача заслуживает своего калькулятора».

Mathematical Engineering · МФТИ · редактирует каталог с 2012 года

Был ли этот калькулятор полезен?

ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ

Инструмент справочный — не заменяет эксперта

Только для информационных целей. Все расчёты, результаты и данные, предоставляемые инструментом, носят исключительно ознакомительный и справочный характер. Они не являются профессиональной консультацией — медицинской, юридической, финансовой, инженерной или иной.

Точность результатов. Калькулятор основан на общепринятых формулах и методиках, однако фактические результаты могут отличаться в зависимости от индивидуальных условий, исходных данных и применяемых стандартов. Мы не гарантируем полноту, точность или актуальность приведённых расчётов.

Профессиональные решения — медицинские, финансовые, инженерные — должны приниматься только после консультации с квалифицированным специалистом. Не используйте автоматический расчёт как единственное основание для важных решений.

Ограничение ответственности. Авторы и разработчики сервиса не несут ответственности за прямой или косвенный ущерб, возникший из-за использования данных расчётов. Пользователь принимает на себя всю ответственность за интерпретацию результатов.

СМЕЖНЫЕ ИНСТРУМЕНТЫ

Похожие калькуляторы

15

Генератор .htaccess редиректов

Визуальный конструктор .htaccess для Apache. Создание редиректов 301/302, принудительный HTTPS, www, блокировка IP, кэширование и сжатие.

/generator-htaccess

Генератор schema.org разметки (JSON-LD)

Визуальный конструктор структурированных данных schema.org в формате JSON-LD. Поддержка Article, Product, FAQ, Organization и других типов.

/generator-schema-org

Генератор robots.txt

Визуальный конструктор robots.txt с поддержкой Яндекс-директив (Host, Clean-param). Создайте файл robots.txt для вашего сайта онлайн.

/generator-robots-txt

Калькулятор стоимости SEO продвижения сайта

Рассчитайте бюджет на SEO продвижение сайта в Яндексе и Google. Учёт региона, конкуренции, тематики и объёма работ. Актуальные цены 2024–2025.

/seo-cost-calculator

Калькулятор ER (Engagement Rate)

Расчёт вовлечённости (ER) для Telegram, VK, YouTube. Формулы ERR, ER by followers, бенчмарки и интерпретация результатов.

/kalkulyator-engagement-rate

Калькулятор размера баннера

Размеры баннеров для VK, Telegram, YouTube, Яндекс Директ, Google Ads. Все форматы с рекомендациями по файлу.

/razmer-bannera

SEO-калькулятор: плотность ключевых слов, мета-теги, контент, бэклинки, трафик

Комплексный SEO-калькулятор: анализ плотности ключевых слов, проверка мета-тегов (Title, Description, H1), оценка качества контента и читабельности, ценность бэклинков (DA/DR, анкоры), прогноз трафика по позициям (CTR) и влияние скорости загрузки (Core Web Vitals) на конверсии.

/seo-calculator

Генератор Cubic Bezier (CSS transition)

Интерактивный генератор кривых Безье для CSS анимаций. Визуальная настройка плавности переходов, пресеты (ease, linear) и копирование кода.

/cubic-bezier

Калькулятор код-ревью: время, размер PR, дефекты, нагрузка

Комплексный калькулятор код-ревью: оценка времени проверки кода, анализ размера PR (XS/S/M/L/XL), покрытие ревью и bus factor, плотность дефектов и escape rate, нагрузка команды ревьюеров, метрики качества (churn, rework, first-pass yield).

/code-review-calculator

Калькулятор теории цвета: гармония, конвертер, палитры, смешивание, дальтонизм

Комплексный инструмент для работы с цветом: цветовые гармонии (комплементарная, аналогичная, триадная, тетрадная), конвертер HEX/RGB/HSL/HSV/CMYK, генератор палитр (монохроматическая, shades, tints, tones), смешивание цветов (аддитивное/субтрактивное), симулятор дальтонизма и анализ цветовой температуры.

/color-theory-calculator

Счётчик символов и слов

Подсчёт символов, слов, предложений, абзацев. Время чтения, частота слов, проверка длины SEO-тегов.

/schyotchik-simvolov-slov

Калькулятор градиентов и интерполяции цветов

Генератор плавных переходов между цветами. Создайте CSS градиент онлайн, получите коды цветов (HEX/RGB) и настройте количество шагов.

/color-gradient

Калькулятор контрастности (WCAG), шрифтов и сетки

Инструменты UI/UX дизайнера. Проверка контрастности цветов (WCAG AA/AAA), расчет модульной сетки и подбор типографической шкалы.

/contrast-grid

Калькулятор Responsive Margin/Padding (Clamp generator)

Генератор CSS функции clamp() для адаптивных отступов и шрифтов. Создайте отзывчивый дизайн (fluid spacing) от мобильных до десктопа онлайн.

/responsive-helper

Генератор паролей (безопасный)

Создать надежный пароль онлайн. Настройка длины, символов. Оценка сложности и энтропии.

/password-generator
ТЕГИ:#IT и разработка#SEO#IT#программирование#разработка#технологии#Open Graph#OG-теги#мета-теги#VK#Telegram#Telegram Card#социальные сети#шаринг#калькулятор#бесплатно#онлайн#расчёт