Как настроить превью ссылки для соцсетей (Open Graph)

Короткий ответ

Добавьте в <head> мета-теги Open Graph с атрибутом property:

<head>
  <meta property="og:title" content="The Bean — coffee in the city centre">
  <meta property="og:description" content="Specialty coffee, cakes and breakfast all day.">
  <meta property="og:image" content="https://example.com/cover.jpg">
  <meta property="og:url" content="https://example.com/">
  <meta property="og:type" content="website">
</head>
<p>These tags change how a shared link looks.</p>

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

Картинка

• Адрес картинки — полный, с https:// и доменом: относительный путь соцсети не поймут.
• Рекомендуемый размер — 1200×630 пикселей, важное — ближе к центру: края в разных приложениях обрезаются по-разному.

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

Отправьте ссылку себе в мессенджер или воспользуйтесь отладчиками превью у соцсетей. Они же позволяют сбросить старое превью: соцсети кешируют его надолго и не замечают изменений сразу.

Частая ошибка

Мета-теги Open Graph пишут с name вместо property: <meta name="og:title">. Часть сервисов такой тег пропускает, и превью собирается из случайного текста и первой попавшейся картинки. Для og: используйте property.