Мета теги для социальных сетей: Open Graph и превью ссылок

Что такое мета теги для социальных сетей

Это несколько строк в коде страницы, которые не видны посетителю, но читаются мессенджерами и соцсетями. Когда ссылка попадает в чат, сервис заходит на страницу, находит эти строки и собирает карточку: картинку, заголовок и короткий текст. Чаще всего используется протокол Open Graph, который придумали в Facebook. Сегодня его понимают Telegram, WhatsApp, Facebook, LinkedIn и многие другие площадки.

Для Узбекистана это особенно практично. Ссылки на каталог, прайс, карточку товара или страницу оплаты через Click и Payme люди постоянно пересылают в личных чатах и группах. В таком чате карточка ссылки и есть ваша витрина: по ней решают, открывать ли страницу.

Что будет, если тегов нет

Мессенджер начнёт угадывать. Заголовком станет то, что он найдёт в title, картинкой может оказаться логотип в плохом качестве, иконка или баннер из шапки, а иногда карточка выйдет вообще без изображения. Магазин цветов в Ташкенте рискует показать в чате серый квадратик вместо букета, а стоматология в Самарканде — кусок меню.

Минимальный набор тегов

Для большинства страниц хватает пяти-шести тегов в блоке head. Важно, чтобы они были в исходном HTML, а не появлялись после работы скрипта: мессенджер обычно не ждёт, пока страница дорисуется.

• og:title — заголовок карточки
• og:description — короткое описание, одна-две строки
• og:image — полный адрес картинки с https
• og:url — основной (канонический) адрес страницы
• og:type — website для обычных страниц, article для статей
• og:site_name и og:locale — название компании и язык страницы

Картинка решает больше всего

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

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

Заголовок и описание для людей, а не для поиска

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

Если сайт на двух языках, теги должны соответствовать языку страницы. Типичная ошибка: на узбекской версии карточка выходит с русским заголовком, потому что шаблон рассчитан на один язык. Значение og:locale тоже стоит менять вместе с версией.

Почему превью не обновилось и как проверить теги

Telegram и Facebook кэшируют карточки. Вы заменили картинку, а в чате по-прежнему старая — это нормально. В Telegram обновить превью можно через официального бота @WebpageBot: отправьте ему адрес страницы. У Facebook есть отладчик ссылок, который заново считывает страницу. Иногда помогает и добавление к адресу любого параметра: сервис воспримет его как новую ссылку.

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

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

Влияет ли это на SEO

Напрямую Open Graph позиции в Google не меняет. Зато аккуратная карточка повышает шанс, что по ссылке перейдут, и делает бренд узнаваемее. Это часть технической оптимизации, которую стоит проверить вместе с остальным: шаблонами title, каноническими адресами, скоростью страниц. Если хотите разобраться, как это устроено на вашем сайте, команда markdev проведёт SEO-оптимизацию сайта в Узбекистане и заодно приведёт в порядок превью ссылок. Расскажите о задаче, и мы подскажем, с чего начать.