ПаветтаГенератор Open Graph разметки
Open Graph управляет тем, как ссылка выглядит в мессенджере, соцсети и почтовом клиенте: без этих тегов площадка тащит первую попавшуюся картинку и обрезок текста со страницы. Инструмент собирает готовый набор: обязательные четыре тега, Twitter Card, размеры и альт картинки, локаль, имя сайта.
Страница
Картинка
Дополнительно
Предпросмотр
Готовая разметка
Что задаёт разметка карточки
Генератор собирает разметку Open Graph — набор служебных тегов, по которым социальные сети и мессенджеры строят карточку ссылки: заголовок, описание, картинку и тип содержимого.
Без разметки площадка берёт что придётся: заголовок из тега title, описание из первого абзаца, картинку — первую попавшуюся на странице. Результат непредсказуем, и ссылка выглядит неаккуратно.
Картинка — главный элемент карточки. Рекомендованный размер 1200 на 630 точек, соотношение около 1,91 к 1; меньший размер площадки показывают маленькой иконкой сбоку вместо крупного изображения.
Отдельно генератор добавляет теги для Twitter, которые часть площадок читает в приоритетном порядке. Дублирование выглядит избыточным, но обходится дешевле, чем разбираться, какая площадка что предпочитает.
| Тег | Что задаёт |
|---|---|
| og:title | Заголовок карточки |
| og:description | Описание, 2–4 строки |
| og:image | Картинка 1200 × 630 |
| og:url | Канонический адрес |
| og:type | Тип: статья, товар, сайт |
Социальный граф, RDFa и кэш площадок
Протокол Open Graph представлен в 2010 году и предназначался для того, чтобы страница могла описать себя как объект социального графа. Идея графа объектов не прижилась. Разметка карточек осталась и стала стандартом де-факто.
В основе лежит формат RDFa — способ размечать данные прямо в HTML. Из него взяты атрибуты property и content, отчего теги Open Graph отличаются по виду от обычных мета-тегов с атрибутом name.
Другие площадки завели свои наборы тегов, но большинство читает Open Graph как запасной вариант. На практике достаточно основного набора из пяти тегов, чтобы карточка выглядела правильно почти везде.
Кэширование карточек стало отдельной проблемой. Площадка запоминает разметку при первом обращении и держит её долго, поэтому исправленный заголовок появляется не сразу, и для сброса кэша у каждой площадки свой инструмент.
Как собрать карточку, которая выглядит везде
Пишите отдельный заголовок для карточки. Заголовок страницы оптимизирован под поиск и часто длинный, а в карточке видно около семидесяти знаков.
Ставьте абсолютный адрес картинки. Относительный путь площадки не разбирают, и карточка выходит без изображения.
Проверьте, как карточка выглядит в тёмной теме. Картинка с прозрачным фоном и тёмным логотипом на тёмном фоне мессенджера превращается в пустой прямоугольник.
Проверяйте вес картинки. Файлы тяжелее пяти мегабайт часть площадок не загружает вовсе, и вместо карточки показывается голая ссылка.
Задавайте канонический адрес в разметке. Без него ссылки с метками кампаний считаются разными страницами, и счётчики репостов дробятся между ними.
После правки разметки сбрасывайте кэш площадки. Иначе вы будете видеть старую карточку и править то, что уже исправлено.
Обновляйте картинку при существенной правке материала. Карточка живёт своей жизнью в переписке и лентах, и старая обложка встречается спустя месяцы.
Проверяйте карточку на всех площадках, где планируете публиковать. Обрезка описания и картинки различается, и то, что хорошо выглядит в одном мессенджере, в другом теряет половину текста.
Готовьте отдельную картинку для карточки. Обложка статьи в ленте сайта и картинка для мессенджера редко совпадают по композиции: во второй важен центр, потому что края обрезаются.
Ставьте описание короче двухсот знаков. Длинное обрезается посередине фразы, и карточка выглядит неопрятно.
Проверить структуру сайта поможет дерево сайта, а перевести домен в понятный вид — конвертер Punycode.
| Основных тегов | пять |
| Размер картинки | 1200 × 630 |
| Соотношение | ≈ 1,91 : 1 |
| Видно в заголовке | ≈ 70 знаков |
| Адрес картинки | абсолютный |
| Протокол представлен | 2010 |
| Основа | формат RDFa |
| Кэш площадки | сбрасывается вручную |
Как пользоваться
Рядом идёт предпросмотр карточки и проверка длин — заголовок и описание режутся на разной длине в разных мессенджерах, и лучше увидеть обрезку здесь, чем в чате с клиентом. Готовую разметку можно скопировать одной кнопкой.
- Это минимум, без которого карточка соберётся неправильно.
- Абсолютный адрес и размеры. Рекомендуемое соотношение — 1,91:1, обычно 1200×630.
- Он показывает, как карточка будет выглядеть и где текст обрежется.
- Готовый блок вставляется в head страницы.
Частые вопросы
Какие теги обязательны
Четыре: og:title, og:type, og:image и og:url. Без них площадка формально не обязана строить карточку и начинает угадывать. На практике добавляют ещё og:description — без него под заголовком окажется случайный кусок текста со страницы.
Какого размера должна быть картинка
Ходовой ориентир — 1200×630, это соотношение 1,91:1. Минимум для крупной карточки — 600×315, ниже площадки показывают маленькую иконку сбоку вместо большого изображения. Вес лучше держать в пределах пяти мегабайт: тяжёлые файлы часть площадок просто не забирает.
Почему в мессенджере показывается старая картинка
Из-за кеша на стороне площадки. Превью забирается один раз и хранится днями. У большинства крупных сервисов есть отладчик ссылок, который умеет обновлять кеш принудительно. Обходной путь — поменять адрес картинки, добавив к нему версию в параметре.
Нужен ли Twitter Card, если аудитории там нет
Теги twitter:card читает не только сам сервис. Часть мессенджеров и агрегаторов ориентируется на них как на запасной вариант, если Open Graph неполон. Стоят они три строки, поэтому проще поставить, чем разбираться, кто именно их читает.
На какой длине обрезается заголовок
Единого лимита нет, у каждой площадки свой. Практичный ориентир: 60–70 знаков для заголовка и 150–200 для описания. Инструмент подсвечивает превышение этих порогов, но обрезка зависит ещё и от ширины экрана, поэтому главное — уместить смысл в первые сорок знаков.
Обязателен ли абсолютный адрес картинки
Да. Относительный путь вида /img/cover.png площадка не разрешит: она забирает картинку со своей стороны и не знает вашего домена. Адрес должен начинаться с http или https и открываться без авторизации.
Куда уходит вставленный текст?
Нет, разметка собирается в браузере.
Спросите нейросети об инструменте
Похожие инструменты
Структура из списка адресов или sitemap.xml: разделы с числом страниц, глубина вложенности и разделы без собственной страницы.
ОткрытьPunycode конвертерКириллический домен в запись xn-- и обратно. Полные адреса и списки, проверка предела в 63 знака на метку.
ОткрытьГенератор robots.txtСобирает robots.txt: Disallow/Allow, Sitemap, Host, Crawl-delay. Пресеты «открыть/закрыть сайт» и «закрыть служебное CMS».
ОткрытьКонструктор поискового запросаСобирает запрос с операторами site, title, filetype и минус-словами. Отдельный синтаксис для Яндекса и Google плюс шпаргалка.
ОткрытьWHOIS доменаРегистратор, дата регистрации и возраст домена, дата окончания, NS-серверы и статус. Для .ru, .com и других зон. Возраст — сигнал доверия.
ОткрытьВнутренние ссылки страницыВсе ссылки со страницы по URL: внутренние и внешние отдельно, с анкорами, повторами и nofollow. Плюс коды ответа и выгрузка в CSV.
ОткрытьЕщё инструменты для SEO и семантики
Кластеризация запросов и лемматизация, чистка по стоп-словам, генераторы sitemap.xml, robots.txt и редиректов, разметка Schema.org — в разделе 17 инструментов.