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

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

Без Open Graph

Платформа пытается сама угадать:

заголовок;
описание;
картинку.

Результат может быть некрасивым.

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

<meta property="og:title"
      content="Заголовок">

<meta property="og:description"
      content="Описание">

<meta property="og:image"
      content="https://example.com/image.jpg">

<meta property="og:url"
      content="https://example.com/page">

og:title

Название материала в карточке.

og:description

Короткое объяснение, зачем открывать ссылку.

og:image

Картинка — обычно самый заметный элемент превью.

Лучше абсолютный URL

Вместо:

/images/share.jpg

надёжнее:

https://example.com/images/share.jpg

Картинка должна быть доступна роботу

Если она требует авторизацию или запрещена firewall, нормального preview не будет.

Размер изображения

Разные платформы имеют свои рекомендации и могут самостоятельно обрезать изображение.

Важно проверить результат именно в целевых сервисах.

og:type

Может описывать тип объекта, например website или article.

og:site_name

Название самого сайта.

Что делать для статей NexIP

У каждой статьи желательно иметь:

понятный og:title;
человеческое описание;
фирменную картинку;
канонический og:url.

Open Graph и обычный title

Они могут совпадать, но не обязаны.

SEO title может быть чуть более поисковым, а OG — более естественным для человека в ленте.

Почему старое preview не исчезает

Социальная платформа могла закешировать карточку.

Вы меняете OG на сайте, а мессенджер ещё некоторое время показывает старую версию.

Это не значит, что сервер отдаёт старый HTML

Проверьте исходник отдельно.

curl -s https://example.com/page \
| grep -i "og:"

Open Graph и Twitter Cards

Некоторые платформы используют собственные дополнительные meta-теги. OG остаётся широко поддерживаемой базой.

Ошибки

относительный og:image;
404 у картинки;
слишком длинный title;
одинаковые OG на всех страницах;
неправильный og:url;
старая картинка в кеше платформы.

Как NexIP помогает

SEO-проверка может извлечь OG-теги и сразу показать, каких элементов не хватает.

FAQ

Open Graph повышает позицию сайта?

Его основная задача — оформление публикации ссылки, а не прямое ранжирование.

Можно без og:image?

Можно, но карточка обычно будет значительно менее заметной.

Почему Telegram показывает старое фото?

Вероятен кеш preview.