Опенграф — это особые теги для настройки превью сайта в соцсетях и чатах. Можно настроить заголовок, подпись и картинку превью:

<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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы