Open Graph: мета-теги для превью ссылок в соцсетях и Telegram

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

Основные теги

Протокол Open Graph придумали в Facebook, сейчас его понимают почти все соцсети и мессенджеры. Минимальный набор:

<meta property="og:title" content="Ремонт кондиционеров в Ташкенте">
<meta property="og:description" content="Диагностика, чистка и заправка с выездом мастера.">
<meta property="og:image" content="https://example.uz/img/og-remont.jpg">
<meta property="og:url" content="https://example.uz/remont-kondicionerov/">
<meta property="og:type" content="website">

Для статей можно указать тип article, для страниц в целом — website. Полезен также og:site_name с названием компании и og:locale с языком страницы.

Картинка — главное

Именно изображение делает превью заметным в ленте или чате. Рекомендации:

• Горизонтальный формат с соотношением сторон около 1,91 к 1, распространённый размер — 1200 на 630 пикселей
• Важные элементы ближе к центру: разные сервисы обрезают края по-разному
• Крупный читаемый текст, если он есть, без мелких деталей
• Абсолютный адрес картинки с https
• Разумный вес файла, чтобы мессенджер успел её загрузить

Для главной и разделов сделайте отдельные картинки, для статей и товаров — используйте основное изображение страницы или шаблон с заголовком.

Заголовок и описание

Og:title и og:description могут отличаться от title и description для поиска. В поиске человек сравнивает варианты, а в мессенджере ссылку ему прислал знакомый или вы сами. Здесь уместна более живая формулировка. Описание делайте коротким: многие приложения показывают одну-две строки.

Twitter и другие сервисы

Для X (бывший Twitter) существуют собственные теги twitter:card и связанные с ним, но при их отсутствии сервис использует Open Graph. Отдельно настраивать их имеет смысл, если эта сеть важна для вашей аудитории.

Почему превью не обновляется

Мессенджеры и соцсети кэшируют превью. Если вы поменяли картинку или заголовок, старая карточка может показываться ещё долго. Решения:

• В Telegram есть официальный бот для обновления превью ссылок — отправьте ему адрес страницы
• У Facebook есть отладчик ссылок для повторного считывания страницы
• Для проверки можно добавить к адресу параметр, чтобы сервис считал ссылку новой

Как проверить, что теги работают

Откройте исходный код страницы и найдите строки og:. Убедитесь, что адрес картинки открывается в браузере. Отправьте ссылку себе в Telegram в «Избранное» и посмотрите на карточку. Для массовой проверки многие краулеры выводят теги Open Graph для всех страниц.

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

• Одна и та же картинка с логотипом на всех страницах сайта
• Относительный путь к картинке вместо полного адреса
• Картинка закрыта от загрузки в robots.txt или требует авторизации
• Теги выводятся скриптом после загрузки, и мессенджер их не видит
• Описание длиной в абзац, которое всё равно обрезается

Влияние на SEO

Прямого влияния Open Graph на позиции нет. Но качественное превью повышает число переходов по ссылкам, которыми делятся люди, и делает бренд узнаваемее. Для компаний, где клиенты пересылают друг другу ссылки на товары и услуги, это ощутимая польза за небольшие усилия.