Вы когда-нибудь задумывались, как создается этот предварительный просмотр?

Высокие шансы, что вы попали в этот пост, поделившись ссылками.

Скорее всего, у ссылки был предварительный просмотр: заголовок сообщения, краткое изложение, а также изображение.

Еще больше шансов, что вы не впервые видели такой превью.

Вы когда-нибудь задумывались, что создает эти превью или как начать их использовать? Надеюсь, я отвечу на некоторые ваши вопросы в этом посте.

Предварительные просмотры ссылок? Что это такое?

Для тех из вас, кто все еще задается вопросом, какие превью я имею в виду, вот несколько примеров:

Эти превью помогают нам каждый день, давая нам представление о соответствующем веб-сайте.

Обычно предварительный просмотр содержит заголовок, описание, изображение предварительного просмотра, значок и необязательное имя приложения.

Как WhatsApp и Slack узнают, какая часть контента является описанием? Если на странице много изображений, какое из них является основным?
Где хранятся эти данные для каждой страницы?

Мета-теги

Мета-теги описывают содержимое страницы. Они входят в элемент <head>.

Мета-теги могут определять широкий спектр атрибутов. Вот некоторые из них:

  • Объявление имени и значка приложения
  • Указание описания
  • Настройка области просмотра
  • Настройка обновления документа каждые 10 секунд
  • Объявление кодировки

Веб-служба может использовать метатеги для создания предварительного просмотра ссылки, получая HTML-код
ссылки, верно?

Удивительно, но использование метатегов чистого HTML поддерживает только основные функции. Например, сами по себе метатеги не могут указывать изображение для предварительного просмотра.

Так откуда они?

Протокол Open Graph

Протокол Open Graph используется для описания веб-сайта с богатыми объектами, такими как изображения, аудиофайлы и т. Д. Для этого OGP (сокращение от Open Graph protocol) использует теги <meta>. OGP был создан Facebook специально для социальных сетей.

Использовать OGP очень просто.

См. Следующий пример с официального сайта. На сайте IMDB описан фильм «Скала»:

Даже не читая документации протокола, большинство разработчиков могут понять разметку.

Посмотрев на теги <meta>, мы увидим, что название сайта - "Скала", что означает фильм. У нас также есть ссылка на изображение и URL-адрес, ведущий на тот же веб-сайт.

Неслучайно OGP настолько прост - это было одной из целей дизайнеров с самого начала:

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

Протокол Open Graph имеет множество дополнительных функций. Подробнее о них можно узнать в официальной документации.

Стоит ли использовать протокол Open Graph? Почему?

Хотя OGP был разработан специально для Facebook, многие другие веб-сервисы его поддерживают. Linkedin, Twitter и Pinterest - это лишь некоторые из социальных сетей, поддерживающих OGP.

Кроме того, многие инструменты обмена сообщениями встраивают в сообщения предварительный просмотр ссылок. Также важно отметить, что OGP может повлиять на ваше SEO.

Вообще говоря, любой владелец общедоступного веб-приложения должен заботиться о предварительном просмотре ссылок. Это делает веб-приложение более доступным, давая пользователю подсказку о содержимом.
OGP прост в использовании и имеет множество преимуществ. Если можете, воспользуйтесь им.

Основное исключение - контент, требующий аутентификации любого типа.

Генераторы предварительного просмотра ссылок обычно выполняют анонимные запросы для получения данных по ссылке. Если страница требует аутентификации, сгенерированная ссылка будет неработающей.
Мы все поделились по крайней мере одной ссылкой, которая предварительно просматривалась как страница «пожалуйста, войдите в систему».

Если вы хотите начать использовать OGP, но не знаете, как это сделать, я рекомендую прочитать эту отличную короткую статью.

Другие решения

Есть способы, отличные от OGP для создания превью ссылок. OEmbed - один из самых популярных. Он предоставляет пользователю JSON, описывающий ресурс, вместо того, чтобы анализировать метатеги ресурса.

OEmbed JSON очень прост и содержит такую ​​информацию, как image, title и другие полезные данные.

Загвоздка здесь в том, что у каждого поддерживаемого веб-сайта должен быть провайдер на oEmbed, что требует небольшой работы.

Это означает, что хотя oEmbed может быть проще в использовании, первоначальная настройка намного сложнее по сравнению с OGP.

Если вам интересно, если вы перешли к этому сообщению, щелкнув предварительный просмотр ссылки, это было не через oEmbed.

Medium не указан как поставщик oEmbed, но по-прежнему имеет отличную поддержку для предварительного просмотра ссылок.

Заключение

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

Когда я начал читать об этом, я понятия не имел, что эта тема настолько глубокая. Этот пост охватывает лишь небольшую часть того, чему вы можете научиться. Любопытные читатели могут найти раздел «Дополнительная литература» ниже.

Я надеюсь, что если вы, как и я, интересовались превью ссылок, теперь у вас будет меньше загадок в жизни, которые нужно раскрывать.

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

🕵️‍♂️ Psst… Если вам понравилось это , подписывайтесь на меня в Твиттере (@ omril321) - я регулярно пишу твиты о интересных вещах, которые я узнаю.