Генератор Open Graph
Посмотрите, как ваша ссылка будет выглядеть в Telegram или X, и заберите готовые теги og: и twitter:. Ничего из введённого никуда не отправляется; изображение открывается в вашем браузере только для замера.
Данные
Должен быть абсолютным и начинаться с https://. Относительный путь (/og.png) работать не будет.
Карточка ссылки
нет URL
Заголовка пока нет
Описания пока нет
Telegram показывает примерно 90 символов заголовка и 200 символов описания — остальное обрезается.
Проверки
- Нет заголовка. Без него платформы берут первый попавшийся текст со страницы, и это редко тот текст, который вы хотели.
- Нет описания. Строка под заголовком в карточке будет пустой.
- Нет изображения. Карточка без него отрисуется вдвое меньше и соберёт заметно меньше переходов.
- Нет URL страницы. og:url — это ссылка, на которую ведёт карточка, и одновременно канонический адрес.
- Выбран тип карточки «большое изображение», но изображения нет. X откатится к маленькой карточке, и ваш выбор ничего не изменит.
Результат
<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:locale" content="uz_UZ" />
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />Что показывает каждая платформа
Open Graph — это способ решить, как ваша страница выглядит при отправке ссылки. Без тегов платформа сама выберет какой-то текст и какое-то изображение со страницы. Числа ниже — примерные точки, где текст обрезается: не жёсткие правила, но заголовок стоит писать с оглядкой на них.
| Платформа | Заголовок | Описание | Примечание |
|---|---|---|---|
| Telegram | ~90 симв. | ~200 симв. | Читает теги og:, а не twitter:. Самая важная для узбекской аудитории. |
| X (Twitter) | ~70 симв. | ~125 симв. | При отсутствии twitter: откатывается к og:. Для summary_large_image нужно изображение. |
| ~88 симв. | ~110 симв. | Читает только теги og:. Кеш сбрасывается через Sharing Debugger. | |
| ~120 симв. | ~130 симв. | Читает теги og: и кеширует их надолго — сбрасывайте через Post Inspector. | |
| ~65 симв. | ~120 симв. | Читает только теги og: и показывает изображение маленьким. Может отбросить картинки тяжелее примерно 300 КБ. | |
| Slack | ~120 симв. | ~200 симв. | Читает теги og:. Чаще всего именно туда попадает ваша ссылка по работе. |
| Discord | ~90 симв. | ~180 симв. | Читает теги og: и показывает более длинное описание, чем остальные. |
Размер изображения
1200 × 630 — все большие карточки построены вокруг соотношения 1.91:1. Изображение со стороной меньше 200 пикселей не показывается вовсе. И URL должен быть абсолютным: относительный путь — самая частая причина, по которой у карточки нет картинки.
Почему изменения не видны
Платформы кешируют теги, которые прочитали в первый раз — Facebook и LinkedIn надолго. Если после исправления тегов всё ещё появляется старая карточка, это обычно не ошибка: перечитайте URL в Facebook Sharing Debugger или LinkedIn Post Inspector.
Часто задаваемые вопросы
Что такое Open Graph и нужен ли он мне?
Open Graph — это набор мета-тегов, которые определяют, какие заголовок, описание и изображение появятся при отправке вашей страницы в социальные сети. Без них платформа выберет текст и картинку сама, и именно так в карточке оказывается меню навигации или случайное изображение. Если вашими ссылками делятся в Telegram или где-то ещё — теги нужны.
Я обновил теги, но карточка прежняя. Почему?
Почти всегда дело в кешировании. Платформы сохраняют то, что прочитали при первом обращении к странице: Facebook и LinkedIn держат это надолго, а Telegram кеширует на своих серверах. Решение — перечитать URL в Facebook Sharing Debugger или LinkedIn Post Inspector. Для Telegram обычный обходной путь — проверка с изменённым параметром запроса, например ?v=2.
На какое изображение должен указывать og:image?
1200 × 630 пикселей, соотношение 1.91:1 — все большие карточки рассчитаны на него. Изображения со стороной меньше 200 пикселей платформы отбрасывают полностью. И самое важное: URL должен быть абсолютным. Относительный путь вроде /og.png не работает, потому что краулер разрешает его относительно своего домена, — это причина номер один, по которой у карточки нет картинки. Этот инструмент загружает ваше изображение в браузере и измеряет реальные размеры.
Если у меня есть теги og:, нужны ли ещё и twitter:?
В основном нет. X откатывается к тегам og: для заголовка, описания и изображения, поэтому их повторение лишь создаёт вторую копию, которую надо поддерживать. По-настоящему что-то делают два тега: twitter:card, определяющий размер карточки, и twitter:site, который привязывает её к вашему аккаунту, — именно их и пишет этот инструмент.
Куда эти теги вставлять в проекте на Next.js?
В App Router мета-теги не пишут вручную — вы экспортируете объект metadata из page.tsx или layout.tsx, а Next сам отрисовывает теги. Выберите вид «Next.js», и на выходе получится этот объект, готовый к вставке в файл. Для Pages Router или обычного HTML-сайта возьмите вид «HTML» и поместите его в секцию head.