Open Graph: превью страницы в соцсетях и мессенджерах
Обновлено
Open Graph — набор мета-тегов, по которым соцсети и мессенджеры строят карточку ссылки: заголовок, описание и картинку. Протокол придумал Facebook, но его понимают практически все платформы, где делятся ссылками.
Какие теги нужны
<meta property="og:title" content="Заголовок карточки" />
<meta property="og:description" content="Описание" />
<meta property="og:image" content="https://example.ru/og/page.png" />
<meta property="og:url" content="https://example.ru/page" />
<meta property="og:type" content="website" />
Обязательный минимум — og:title, og:image и og:url. Тип article
используют для статей.
Картинка
Размер 1200×630 пикселей подходит большинству платформ. Адрес картинки — абсолютный, сама картинка должна открываться без авторизации. Если картинки нет, мессенджер покажет ссылку серым текстом, которую хуже замечают и реже открывают.
Влияет ли на SEO
Прямого влияния на позиции нет. Но карточка с понятным заголовком и картинкой повышает кликабельность ссылки, когда ею делятся в чате или соцсети, а значит, косвенно приводит больше переходов. Описание в Open Graph задаётся отдельно от meta description: они могут быть разными, так как адресованы разным аудиториям.
Как проверить
Отправьте ссылку себе в мессенджер или используйте отладчики платформ: Facebook и Telegram показывают, как карточка выглядит на самом деле. Мессенджеры кешируют карточку, поэтому после правки превью может обновляться не сразу.
Типичные ошибки
- Относительный адрес картинки.
- Одна и та же картинка у всех страниц.
- Картинка слишком маленькая или с мелким текстом, который не читается в превью.
- Заголовок карточки скопирован из title, хотя в чате его читают без контекста выдачи.
Как это сделано у нас
Карточки для соцсетей и мессенджеров собираются при публикации сайта: у каждой страницы своя картинка 1200×630 с её заголовком и названием раздела. Вручную их никто не рисует, поэтому у новой страницы карточка появляется сама, и забыть о ней нельзя: автоматическая проверка сообщает, если у страницы её нет.