Соцсети и чаты создают превью для ссылок, которыми делятся пользователи. Обычно в превью только заголовок и первая попавшаяся картинка со страницы по ссылке. Такие превью выглядят скудно, особенно если на странице не нашлось картинки:
Управлять внешним видом превью можно специальными ХТМЛ‑тегами — Опенграфом. Эти теги добавляют в head страницы:
<head>
<!-- … -->
<!-- Служебные теги: тип и точный адрес страницы -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://bureau.ru/vacancies/visualizer/" />
<!-- Заголовок и описание для превью -->
<meta property="og:title" content="Вакансия визуализатора в бюро" />
<meta property="og:description" content="Ищем визуализатора в Бюро Горбунова" />
<!-- Картинка для превью, адрес картинки должен быть полным, с указанием домена сайта -->
<meta property="og:image" content="https://bureau.ru/vacancies/visualizer/og.jpg" />
</head>
С помощью Опенграфа превью делают подробным и привлекательным:
Сброс кеша Опенграфа: Вконтакте, в Фейсбуке, в Телеграме
Соцсети и чаты кешируют Опенграф — запоминают содержимое тегов при первом создании превью. Когда теги Опенграфа изменились, нужно сбросить кеш, чтобы в следующий раз для ссылки создалось обновлённое превью.
Сброс кеша Опенграфа: Вконтакте, в Фейсбуке, в Телеграме
В следующем совете расскажу, как создавать уникальные превью для разных страниц сайта.
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.