Улучшение предварительного просмотра ссылок в Slack

Недавно я узнал, как улучшить предварительный просмотр ссылок на веб-страницы в Slack путем включения дополнительных метаданных с помощью Open Graph. В этой заметке вы узнаете, как отображать дополнительные данные, такие как автор страницы и время чтения, в предварительных просмотрах ссылок в Slack.

Но сначала немного информации о протоколе Open Graph. В качестве альтернативы переходите сразу к примеру кода.

Протокол Open Graph

Протокол Open Graph (OG) был создан в Facebook в 2010 году для преобразования веб-ссылок в визуально богатые предварительные просмотры контента, схожие по функциональности и внешнему виду с другим контентом, размещенным на Facebook.

Метатеги Open Graph используются в <head> HTML-страницы для передачи информации о веб-страницах платформам социальных сетей и другим приложениям, которые разворачивают метаданные URL — например, Slack. Метатеги OG идентифицируются атрибутом с префиксом og. Просмотрите код этой страницы в браузере, чтобы определить метатеги OG в HTML <head> и исследуйте!

<meta property="og:image" content="https://example.com/image.png" />
Вход в полноэкранный режим Выход из полноэкранного режима

Предварительные просмотры Open Graph в Twitter

Метатеги OG также можно использовать для настройки внешнего вида ваших веб-страниц в зависимости от платформы, на которой они размещены. Twitter выпустил свою собственную реализацию, построенную на протоколе OG. Этот фрагмент кода указывает Twitter показывать большие изображения OG во всю ширину страницы, когда вы делитесь ссылкой в Twitter, в отличие от стандартного уменьшенного изображения рядом с заголовком и описанием.

<meta name="twitter:card" content="summary_large_image" />
Вход в полноэкранный режим Выход из полноэкранного режима

Предварительный просмотр большого изображения

Предварительный просмотр изображения по умолчанию

Предварительный просмотр Open Graph в Slack

По умолчанию Slack разворачивает метатеги og:title и og:description, найденные на HTML-странице ссылки, которой вы делитесь.

Перейдите на сайт twitter.com (не входя в систему), просмотрите исходный код, и вы увидите следующие метатеги в HTML <head>. Интересно, что Twitter не включает ссылку на изображение для предварительного просмотра Open Graph на своей главной странице!

<!-- Open Graph title -->
<meta content="Twitter. It’s what’s happening" property="og:title">

<!-- Open Graph meta description -->
<meta content="From breaking news and entertainment to sports and politics, get the full story with all the live commentary." property="og:description">
Вход в полноэкранный режим Выход из полноэкранного режима

Добавьте метатег og:image, и Slack покажет изображение при разворачивании ссылки.

<meta property="og:image" content="https://example.com/image.png" />
Вход в полноэкранный режим Выход из полноэкранного режима

А вот как вы повышаете уровень. Используйте комбинацию twitter:label и twitter:data для отображения до двух дополнительных бит контекстной информации, которую Slack будет разворачивать. Интересно, что в то время как эти метатеги OG включают twitter в название, данные не отображаются в ссылках, которыми делятся в Twitter.

Включение приведенного ниже кода в HTML <head> покажет информацию об авторе и времени чтения, когда ссылкой на эту страницу поделятся в Slack. Вы можете поменять автора и время чтения на любую информацию по своему усмотрению. Например, если страница посвящена событию, вы можете включить дату или место проведения события.

<meta name="twitter:label1" content="Written by" />
<meta name="twitter:data1" content="Salma Alam-Naylor" />

<meta name="twitter:label2" content="Reading time" />
<meta name="twitter:data2" content="6 minutes" />
Вход в полноэкранный режим Выход из полноэкранного режима

А вот как это выглядит в Slack.

Полный пример Open Graph

Поддержка метатегов Open Graph на разных платформах в настоящее время непостоянна. Тем не менее, я включил на страницы моего блога как можно больше богатой информации из спецификации Open Graph, если платформы будут поддерживать ее развертывание в будущем.

Вот полный пример всех метатегов Open Graph, включенных в эту запись блога: Светлый и темный режим всего в 14 строках CSS.

<!-- twitter card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@whitep4nth3r" />
<meta name="twitter:creator" content="@whitep4nth3r" />

<!-- OG base data -->
<meta property="og:url" content="https://whitep4nth3r.com/blog/quick-light-dark-mode-css/" />
<meta property="og:title" content="Light and dark mode in just 14 lines of CSS" />
<meta property="og:description" content="Add quick support for light mode and dark mode to your website using only CSS by combining two CSS custom properties with a media query." />
<meta property="og:site_name" content="whitep4nth3r.com" />
<meta property="og:locale" content="en_GB" />

<!-- OG image data -->
<meta property="og:image" content="https://linktoimage.png" />
<meta property="og:image:alt" content="An image with dark background featuring a large panther on the left. The title — Light and dark mode in just 14 lines of CSS — is in white text at the centre, and below are icons representing the topics of the shared page." />
<meta property="og:image:width" content="1140" />
<meta property="og:image:height" content="600" />

<!-- extra metadata for Slack unfurls -->
<meta name="twitter:label1" content="Written by" />
<meta name="twitter:data1" content="Salma Alam-Naylor" />
<meta name="twitter:label2" content="Reading time" />
<meta name="twitter:data2" content="3 minutes" />

<!-- extra metadata — unknown support -->
<meta property="og:type" content="article" />
<meta property="article:section" content="Technology" />
<meta property="article:tag" content="CSS" />
<meta property="article:tag" content="Snippets" />
Вход в полноэкранный режим Выход из полноэкранного режима

Дальнейшее чтение

Оказывается, теги twitter:label и twitter:data существуют уже довольно давно! Если вы хотите узнать больше о том, как Slack разворачивает предварительные просмотры ссылок, ознакомьтесь с этим постом Мэтта Хоуги в 2015 году: Everything you ever wanted to know about unfurling but were afraid to ask /or/ How to make your site previews looking amazing in Slack.

Оцените статью
Procodings.ru
Добавить комментарий