Генератор Open Graph
тегов
Что такое 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-код.
Выберите тип контента
Укажите тип страницы: сайт, статья, товар, профиль, видео или музыка. Для статей откроются дополнительные поля.
Заполните поля
Введите заголовок, описание, URL страницы и ссылку на изображение. Заполните Telegram Card и VK-теги при необходимости.
Проверьте превью
Переключайтесь между вкладками VK, Telegram и VK, чтобы увидеть, как будет выглядеть ваша карточка в каждой соцсети.
Скопируйте код
Нажмите «Копировать HTML» и вставьте сгенерированные мета-теги в секцию <head> вашего HTML-документа.
Часто задаваемые вопросы
Был ли этот калькулятор полезен?
Инструмент справочный — не заменяет эксперта
Только для информационных целей. Все расчёты, результаты и данные, предоставляемые инструментом, носят исключительно ознакомительный и справочный характер. Они не являются профессиональной консультацией — медицинской, юридической, финансовой, инженерной или иной.
Точность результатов. Калькулятор основан на общепринятых формулах и методиках, однако фактические результаты могут отличаться в зависимости от индивидуальных условий, исходных данных и применяемых стандартов. Мы не гарантируем полноту, точность или актуальность приведённых расчётов.
Профессиональные решения — медицинские, финансовые, инженерные — должны приниматься только после консультации с квалифицированным специалистом. Не используйте автоматический расчёт как единственное основание для важных решений.
Ограничение ответственности. Авторы и разработчики сервиса не несут ответственности за прямой или косвенный ущерб, возникший из-за использования данных расчётов. Пользователь принимает на себя всю ответственность за интерпретацию результатов.
Похожие калькуляторы
Генератор .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Объединить PDF онлайн — без загрузки на сервер
Склейка PDF в браузере через pdf-lib. До 20 файлов, до 50 МБ каждый. Локально, без отправки на сервер (152-ФЗ).
/obyedinit-pdf-onlajn-besplatnoСжать PDF онлайн — уменьшить размер локально
Сжатие PDF в браузере без потери качества. 3 уровня (object streams, удаление метаданных). До 50 МБ. Через pdf-lib, локально.
/szhat-pdf-onlajn-umenshit-razmerРазделить PDF на страницы — извлечь нужные онлайн
Разделение PDF на страницы локально: каждая страница отдельным файлом, диапазон или группами. Через pdf-lib, без отправки на сервер.
/razdelit-pdf-na-stranicy-onlajnJPG в PDF — конвертер с объединением
Конвертация JPG/PNG в PDF в браузере: до 30 картинок в один документ. Форматы A4/A3/Letter или подгонка под изображение.
/jpg-v-pdf-konverterПовернуть страницы PDF онлайн
Поворот всех или указанных страниц PDF на 90/180/270° за миллисекунды. Lossless. Через pdf-lib, без отправки на сервер.
/povernut-pdf-stranitsy-onlajnВодяной знак на PDF онлайн (кириллица)
Нанесение текстового знака («КОНФИДЕНЦИАЛЬНО», «ЧЕРНОВИК») на все страницы PDF. Поддержка русского текста через Canvas. 4 положения, регулировка прозрачности.
/dobavit-vodyanoj-znak-na-pdfНумерация страниц PDF онлайн
Проставьте номера страниц PDF в браузере: 4 формата, 6 положений, пропуск титульной, кастомный старт. Поддержка кириллицы. Через pdf-lib + Canvas.
/numerovat-stranitsy-pdf-onlajnPDF в JPG / PNG — конвертер страниц
Рендеринг каждой страницы PDF в картинку через pdfjs-dist (Mozilla). 4 уровня качества: 96 / 150 / 300 DPI и lossless PNG. До 50 МБ.
/pdf-v-jpg-konverter-onlajnИзвлечь текст из PDF онлайн
Извлечение текста из PDF в браузере через pdfjs-dist (Mozilla). Plain text, с разделителями страниц или JSON. Файлы не уходят на сервер.
/extract-text-iz-pdf-onlajnСжать JPG до 100 КБ для документов
Сжатие JPG до точного размера в КБ (50, 100, 200, 500, 1000) через бинарный поиск quality. Госуслуги, ЕГЭ, банки. Через browser-image-compression.
/szhat-jpg-onlajn-do-100kbУдалить EXIF из фото — GPS и метаданные
Удаление EXIF (геолокация, модель камеры, дата) из JPEG. Сначала показывает что внутри, потом удаляет. 152-ФЗ. В браузере, без отправки.
/udalit-exif-iz-foto-online