ГлавнаяИнструментыSEOГенератор Open Graph
Генератор Open Graph с превью ссылки
Заполните заголовок, описание, адрес и картинку — инструмент соберёт мета-теги Open Graph и Twitter Cards, покажет, как ссылка будет выглядеть в ленте и в мессенджере, и найдёт типичные ошибки: относительный og:image, SVG, маленькую картинку, неверный og:locale.
—
Большая карточка в ленте
Компактная карточка
Превью в мессенджере
Макеты приблизительные: каждая соцсеть и мессенджер обрезают текст и картинку по-своему и кешируют карточку после первого показа ссылки.
Теги для <head>
Расчёт идёт в вашем браузере — введённые данные никуда не отправляются.
Как пользоваться
- Заполните поляЗаголовок и описание пишите для человека в ленте, а не для поисковика: они могут отличаться от title и description страницы.
- Проверьте картинкуУкажите полный адрес og:image и нажмите «Проверить картинку» или выберите файл — инструмент покажет размер и пропорции.
- Посмотрите превьюБольшая карточка, компактная и превью в мессенджере показывают, где обрежется текст и как ляжет картинка.
- Скопируйте тегиВставьте блок в <head>. Если ссылкой уже делились, обновите кеш в отладчике соцсети — иначе она покажет старую карточку.
Что такое Open Graph и какие теги обязательны
Open Graph — протокол разметки, который придумал Facebook: мета-теги в <head> говорят, какой заголовок, описание и картинку показать, когда ссылкой делятся. Сегодня его читают почти все: соцсети, мессенджеры, корпоративные чаты, поисковики.
Спецификация ogp.me называет обязательными четыре свойства: og:title, og:type, og:image и og:url. На практике к ним добавляют og:description, og:site_name, og:locale и og:image:alt.
X (Twitter) использует собственные теги twitter:*, но если их нет, берёт значения из Open Graph. Поэтому достаточно указать twitter:card — тип карточки — и при желании twitter:site с аккаунтом.
Размер og:image: 1200 × 630 и пропорции 1,91:1
Для большой карточки используйте картинку 1200 × 630 px — это рекомендация Meta для ссылок, и такие пропорции (1,91:1) без обрезки подходят большинству сервисов. Правила, которые проверяет инструмент:
- Полный адрес.
og:imageдолжен начинаться с https:// и домена — относительные пути вроде/og.pngсоцсети не разрешают. - Растровый формат. PNG, JPEG, WebP или GIF. SVG не поддерживается.
- Не меньше 200 × 200 px, иначе большой карточки не будет; X принимает картинки до 4096 px по стороне и до 5 МБ.
- Компактная карточка (
summary) показывает картинку квадратом — для неё нужна квадратная картинка от 144 × 144 px. - Важное — в центре. Ленты и мессенджеры по-разному обрезают края; не ставьте текст вплотную к краю картинки.
Если указать og:image:width и og:image:height, карточка может отрисоваться сразу, до скачивания картинки. Инструмент добавляет их, когда размер проверен.
Частые ошибки и кеш превью
- og:locale через дефис. Формат — язык и страна через подчёркивание:
ru_RU,en_US. Это отличается от hreflang, где нужен дефис (подробнее — в генераторе hreflang). - Одна картинка на весь сайт. Карточки разных страниц в ленте становятся неотличимы. Делайте отдельную картинку хотя бы для ключевых страниц.
- Теги добавляются JavaScript-ом. Большинство роботов соцсетей не выполняют скрипты: теги должны быть в HTML, который отдаёт сервер.
- Старая карточка после правки. Соцсети кешируют превью. После изменения тегов обновите данные в отладчике соцсети или добавьте к адресу картинки параметр версии (
og.png?v=2). - Картинка за авторизацией или с блокировкой роботов. Проверьте, что файл открывается без cookies и не закрыт в robots.txt — это можно сделать в проверке robots.txt.
Источники
- The Open Graph protocol — ogp.me.
- X Developer Platform. Cards markup reference; Summary Card with Large Image — developer.x.com.
- Meta for Developers. Sharing best practices for websites — developers.facebook.com.
Частые вопросы
Какие теги Open Graph обязательны?
По спецификации ogp.me — og:title, og:type, og:image и og:url. На практике добавляют og:description, og:site_name, og:locale и og:image:alt, а для X — twitter:card.
Какой размер картинки нужен для og:image?
1200 × 630 px, пропорции 1,91:1. Меньше 200 px по стороне — большой карточки не будет. Для компактной карточки summary нужна квадратная картинка.
Нужно ли дублировать теги для Twitter (X)?
Нет. X читает og:title, og:description и og:image, если нет twitter:title, twitter:description и twitter:image. Достаточно добавить twitter:card.
Почему соцсеть показывает старую картинку?
Превью кешируются. После изменения тегов обновите карточку в отладчике соцсети или поменяйте адрес картинки, например добавив ?v=2.
Можно ли использовать SVG в og:image?
Нет, SVG не поддерживается. Используйте PNG, JPEG или WebP.
Как правильно указать og:locale?
Язык и страна через подчёркивание: ru_RU, en_US, pt_BR. Дефис (ru-RU) — это формат hreflang и атрибута lang, а не Open Graph.
Отправляются ли мои данные на сервер?
Нет. Теги собираются в браузере. Картинку по адресу загружает ваш браузер напрямую с вашего сайта и только по нажатию кнопки; выбранный файл остаётся на компьютере.
Ещё в разделе «SEO»
- Проверка сниппета
Как заголовок и описание будут выглядеть в поиске и не обрежутся ли они?
- Проверка читаемости текста
Насколько текст сложен для чтения и какие предложения слишком длинные?
- Счётчик символов и знаков
Сколько в тексте символов, слов и абзацев — и помещается ли он в title, тему письма или пуш?
- Транслитерация и генератор ЧПУ
Как превратить заголовок на кириллице в чистый адрес страницы?
- Генератор и проверка robots.txt
Какое правило robots.txt разрешает или запрещает этот URL для нужного робота?
- Генератор hreflang
Какими тегами hreflang связать языковые версии страницы?
- Генератор UTM-меток
Как собрать единообразные UTM-ссылки для каждой кампании и канала?
- UTM-метки для Яндекс Метрики
Как эта ссылка ляжет в отчёт «Метки UTM» и что в ней ломает склейку источников?
- QR-коды с UTM-метками
Какое место на выставке или какая листовка привели посетителей — и как пометить каждый QR-код?