Читатель в канале видит ссылку на статью. Дальше по обычному сценарию: тап, Telegram открывает встроенный браузер, браузер тянет HTML, шрифты, картинки, скрипты, показывает баннер про куки, дергает шапку при загрузке шрифта. Секунды три-четыре на нормальной связи и заметно больше в метро.

Instant View убирает этот шаг целиком. Тап - и статья уже открыта: текст, заголовки, картинки, код. Тем же шрифтом, что и весь Telegram, и в той же теме, светлой или темной, что стоит у читателя.

instantview.telegram.orgРедактор шаблонов и документация формата.

Что получает читатель

Скорость. Страницу отдает Telegram из своего кеша, а не ваш хостинг. Разницы между статьей на быстром CDN и на медленном виртуальном хостинге читатель не почувствует - обе откроются одинаково.

Типографику клиента. Instant View - это не ваша верстка, а структура: заголовок, абзац, цитата, код, картинка с подписью. Рисует ее сам Telegram своим шрифтом и своими отступами. Ваши шрифты, цвета и сетка туда не едут.

Тему. У читателя темная тема - статья откроется темной, даже если сайт только светлый. Мой блог, например, темной темы не имеет вовсе, а в Instant View он ее получает бесплатно.

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

Чего читатель не получает

Обратная сторона того же свойства: в Instant View не выполняется JavaScript. Все интерактивное с сайта туда не попадает.

На этом блоге, например, у блоков кода есть шапка с кнопкой «Скопировать код» и меню «Открыть», которое отправляет сниппет в ИИ-сервис с готовым промтом. В Instant View этого нет и быть не может - остается просто моноширинный текст. Комментарии giscus тоже не поедут: это iframe с GitHub.

Отсюда следует главное для автора: Instant View уводит читателя от сайта. Нет визита, нет аналитики, нет комментария, нет перехода в проект. Читатель прочитал и остался в мессенджере.

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

Как это устроено

Ключевое, что стоит понять сразу: шаблон пишется на домен, а не на страницу.

Один раз описываете, где на ваших страницах лежит заголовок, где тело статьи, а что надо выкинуть. Дальше шаблон применяется ко всем адресам, подходящим под его маску. Новые посты попадают в Instant View сами, пока разметка не поменялась.

Язык шаблонов - это XPath плюс функции. Вот рабочий шаблон этого блога целиком:

TXT
~version: "2.1"

?path: /articles/.+
?path: /en/articles/.+

body: //article

title:          $body//h1
subtitle:       //meta[@property="og:description"]/@content
author:         //meta[@name="author"]/@content
published_date: //meta[@property="article:published_time"]/@content

cover: $body//img[contains(@class, "aspect-video")]

@remove: $body//a[contains(@class, "select-none")]
@remove: $body//div[contains(@class, "code-block-header")]
@remove: $body//img[contains(@class, "project-favicon")]

Двадцать строк. Половина - это «возьми из мета-тегов», вторая половина - «выкинь служебное».

Две ступени, и вторая нужна не всем

Тут многие останавливаются, не разобравшись, и зря.

Ступень первая: своя ссылка. Как только шаблон написан и работает, редактор дает адрес вида t.me/iv?url=<адрес статьи>&rhash=<хеш шаблона>. По такой ссылке Instant View открывается у всех и сразу. Модерация не нужна. rhash один на весь домен - для нового поста меняется только часть с адресом.

Для канала этого достаточно: постите такую ссылку и все.

Ступень вторая: модерация. Нужна, только если хотите, чтобы Instant View появлялся у любой ссылки на ваш домен, которую кто-то кинул в чат, без t.me/iv. Тут шаблон уходит в очередь ревью Telegram: надо отметить несколько проверенных страниц, срок непредсказуем, отказ возможен.

Разница практическая: первая ступень - это ваш канал, вторая - весь Telegram.

Что должно быть на сайте

Ничего специального. Instant View читает обычный HTML, и чем он семантичнее, тем короче шаблон:

  • статья обернута в <article> - тогда body описывается одной строкой;
  • есть og:title, og:description, og:image;
  • есть article:published_time - иначе дату придется парсить из текста;
  • картинки в <figure> с <figcaption> - подписи приедут подписями;
  • код в <pre><code> - приедет кодом.

Отдельного слоя разметки под Instant View заводить не надо. Если верстка приличная, шаблон получается коротким.

Три грабли

Теперь то, ради чего этот текст. Все три я собрал лично.

Функции @unwrap не существует

Логично же: есть обертка, надо ее убрать, а детей оставить. Написал @unwrap, редактор ответил:

TXT
Unknown function: @unwrap
FUNCTION_NOT_FOUND: unwrap

В Instant View 2.1 такой функции нет вообще. Есть @remove, который удаляет узел вместе с содержимым, есть @replace_tag, @wrap, @wrap_inner и @detach. Развернуть обертку нечем.

Хорошая новость: обычно и не нужно. Instant View ищет <pre>, <table>, <figure> по всему телу и разбирает их независимо от того, во сколько div они завернуты. Я убрал три строки с @unwrap - и все стало на места.

//img[1] - это не первая картинка страницы

Классическая ловушка XPath, на которой спотыкаются все, кто пишет его раз в год.

TXT
cover: $body//img[1]

Читается как «первая картинка статьи», а означает «каждая картинка, которая идет первой у своего родителя». В моем посте про tatarverse таких 23 штуки.

Чтобы получить именно первую картинку документа, нужны скобки - ($body//img)[1],

  • либо, что надежнее, выбор по признаку:
TXT
cover: $body//img[contains(@class, "aspect-video")]

Класс aspect-video есть только у обложки. Проверил по всем постам: ровно одно совпадение в каждом.

Мелкие иконки превращаются в мусор

Самое неочевидное. В моих статьях у внешних ссылок и карточек проектов подтягивается favicon домена, а у каждого блока кода есть меню с иконками сервисов. На сайте это иконки 16 на 16 пикселей внутри строки.

Instant View не знает, что они декоративные. Для него это <img>, и каждая становится отдельным блоком-картинкой в статье. Посчитал в собранном HTML: в одном посте таких иконок от 12 до 36.

Лечится тремя строками @remove по классам. Но заметить это можно только в предпросмотре редактора: на сайте иконки выглядят абсолютно нормально.

Проверять можно только в редакторе

И последнее, о чем стоит знать заранее: шаблон нельзя прогнать локально. Нет ни линтера, ни тестов, ни способа отрендерить Instant View у себя. Единственная проверка - предпросмотр в редакторе на instantview.telegram.org, и заходить туда надо аккаунтом Telegram.

Практический вывод: не пишите шаблон целиком «в уме», как это сделал я. Откройте редактор, вставьте пять строк, посмотрите, добавьте еще пять. Я написал двадцать строк вслепую и получил три ошибки разом.

Стоит ли

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

Если сайт живет с рекламы или конверсий - считайте. Instant View честно забирает визит себе.