Статья

Open Graph: как сделать красивое превью ссылки

30 октября 2026 г. · 2 мин чтения

Когда вы отправляете ссылку в Telegram или ВКонтакте, мессенджер показывает карточку: картинку, заголовок и пару строк описания. Эти данные он берёт из разметки Open Graph на странице. Если её нет, превью получается случайным или пустым, и на ссылку нажимают реже. Разбираем, какие теги нужны, какой должна быть картинка и как проверить результат.

Что это такое

Open Graph — набор метатегов в коде страницы, которые описывают её для превью: заголовок, описание, картинку, адрес. Это общий стандарт: его понимают Telegram, ВКонтакте и большинство мессенджеров и соцсетей. Посетитель на самой странице этих тегов не видит — они нужны только для карточки ссылки.

Open Graph часто называют микроразметкой, но это не одно и то же: микроразметка schema.org помогает поисковикам, а Open Graph — мессенджерам и соцсетям. О schema.org — статья «Микроразметка».

Какие теги нужны

og:title — заголовок карточки;
og:description — одна-две строки описания;
og:image — картинка превью, полным адресом;
og:url — адрес страницы;
og:type — тип: website для обычных страниц, article для статей.

В коде это выглядит так: <meta property="og:title" content="Название страницы">. Заголовок и описание часто совпадают с title и description для поиска — о них статья «Title и description».

Картинка

Размер — обычно 1200×630 пикселей: такую картинку хорошо показывают почти все сервисы.
Главное — в центре. Некоторые сервисы обрезают края.
Крупный текст, если он есть: карточку смотрят на телефоне.
Своя для каждой страницы. У статьи — с её названием, у услуги — с названием услуги.

Как проверить

Отправьте ссылку себе в Telegram и ВКонтакте — так видно, как карточка выглядит на самом деле.
Мессенджеры запоминают превью. После правок карточка может обновиться не сразу. В Telegram для этого есть бот @WebpageBot: пришлите ему ссылку, и он обновит превью.
Онлайн-валидаторы Open Graph показывают, какие теги нашлись и каких не хватает.

Частые ошибки

Одна и та же картинка на всех страницах.
Картинка не открывается по ссылке: указан неполный адрес или файл закрыт.
Описание пустое — сервис берёт случайный кусок текста со страницы.
Заголовок с лишним: «Главная | ООО Ромашка | Добро пожаловать».

Как устроено у нас

У каждой страницы нашего сайта своя картинка превью в фирменном стиле, а у статей блога — с названием статьи и временем чтения. Картинки собираются автоматически из тех же данных, что и страница, поэтому новая статья сразу получает своё превью.

Заголовки, описания и разметка страниц для поиска входят в наш лендинг.