Школа
Веб-разработка

Превью страницы для соцсетей и чатов

6 мая 2021
👁 11375  
Веб-разработка

Превью страницы для соцсетей и чатов

6 мая 2021
👁 11375  
Игорь Петров
Разработчик, преподаватель Школы бюро
Полезно
 13
13
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

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

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

Веб‑разработка
Полезно
 13
13
Непонятно
  
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментариев пока нет

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

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