Предпросмотр ссылок

Все мы видели, что когда обмениваемся ссылками в Skype, WhatsApp, Telegram, социальных сетях и ещё где-нибудь, то для некоторых ссылок вставляется предпросмотр, который обычно содержит какой-нибудь заголовок, выделенный жирным, краткое описание страницы и какую-нибудь картинку. Однако подобные описания вставляются далеко не для всех ссылок. Почему так происходит?

На самом деле, на большинстве даже древних сайтов уже есть информация для построения этого предпросмотра:

• В качестве заголовка можно взять содержимое тега title.
• В качестве краткого описания можно взять содержимое мета-тега с описанием содержимого.
• В качестве картинки можно взять favicon.

Ведь ещё с незапамятных времен большая часть страниц в интернете уже это содержит:

Получается, что ничего нового добавлять не нужно, для большинства страниц предпросмотр будет автоматически сгенерирован? Иконка есть, заголовок есть, описание есть. На сколько я знаю, в некоторых мессенджерах действительно может построиться предпросмотр на основе title и мета- description. Например, Skype на текущий момент точно это делает, но я не видел ещё ни одного случая, чтобы favicon использовался в качестве картинки для предпросмотра, хотя, казалось бы, раз он годится для отображения вместе с заголовком страницы в адресной строке или вкладках браузера, то вполне мог бы подойти и для этого. Возможно, это сделано из-за того, что favicon — это обычно небольшая картинка 16 на 16 пикселей, слишком мелкая для предпросмотра.

Далеко не все программы обмена сообщениями и социальные сети используют эти теги для построения предпросмотра. Telegram их точно игнорирует. Если вы попытаетесь передать ссылку на страницу с описанием из куска HTML-страницы выше в нём, то никакого предпросмотра ссылки не создастся, будет просто сообщение с URL ссылки.

Однако Skype всё же сделает предпросмотр с заголовком и описанием из соответствующих тегов, даже favicon будет использоваться по назначению:

Как же сделать предпросмотр ссылки в Telegram, социальных сетях и во всех других средствах общения? В современном мире сервер приложения для обмена сообщениями или социальной сети обычно посещает страницу по ссылке и анализирует её содержимое на наличие мета-тегов с The Open Graph Protocol. Существуют различные теги для различных типов содержимого страницы, но нам по факту нужно использовать только четыре тега из них:

• og:title — заголовок.
• og:description — краткое описание.
• og:type — здесь бывают разные типы, вроде book, video.movie, music.song. Возможно, в некоторых случаях можно использовать их, тем более, что там добавляются дополнительные специфичные атрибуты для каждого случая. Однако для построения предпросмотра ссылки достаточно просто всегда использовать website.
• og:image — изображение предпросмотра.

Пример заполненных тегов The Open Graph Protocol для страницы с простенькой игрой:

Предпросмотр ссылки в Skype:

Предпросмотр ссылки в Telegram:

Пример заполненных тегов The Open Graph Protocol с og:type = book (ссылка):

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

Предпросмотр ссылки в Skype:

Предпросмотр ссылки в Telegram: