Опенграф — это особые теги для настройки превью сайта в соцсетях и чатах. Можно настроить заголовок, подпись и картинку превью:
<meta property="og:type" content="website" />
<meta property="og:url" content="https://cats4export.com/" />
<meta property="og:title" content="Котята на экспорт"/>
<meta property="og:description" content="Розовые, золотистые, милые, пушистые и абсолютно ни в чём не повинные" />
<!-- Путь до картинки обязательно полный, включающий адрес сайта -->
<meta property="og:image" content="https://cats4export.com/og.jpg" />
Типовой размер Опенграф‑картинки для превью — 1200×630 пк. В соцсетях такая картинка аккуратно встанет в превью:
А вот Телеграм покажет такую картинку в скромном квадратике:
Чтобы в Телеграме показывать картинку так же, как в остальных соцсетях, нужно добавить к Опенграф‑тегам ещё один, максимально неочевидный:
<meta name="twitter:card" content="summary_large_image" />
И пым:
Почему Телеграм смотрит на теги Твитера при генерации превью — тайна, покрытая мраком. Видимо, так сложилось исторически. Как бы то ни было, тег работает, пользуйтесь на здоровье.
Сброс кеша Опенграфа: Вконтакте, в Фейсбуке, в Телеграме
P. S. Соцсети и чаты кешируют Опенграф — запоминают содержимое тегов при первом создании превью. Когда меняете теги Опенграфа, сбросьте кеш, чтобы в следующие разы для ссылки создалось обновлённое превью.
Сброс кеша Опенграфа: Вконтакте, в Фейсбуке, в Телеграме
P. P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.