Как сделать Telegram Instant View на своем сайте

Сегодня был хороший день, чтобы наконец сделать на домовой странице телеграмовский Instant View. И я сделал.

Поначалу всё казалось просто. Выяснил, что нужно пройти на https://instantview.telegram.org/ и там добавить темплейт, вырезающий из html-кода страницы со статьей самое главное. Вот пример моего темплейта для Graker.ru — указываем шаблон пути к подходящим страницам, тег, содержащий всю статью целиком, тег с заголовком, с текстом, и дату публикации.

?path: /news/.+

$main: //div[@class="post post-wrapper"]

title: $main//h1[1]
body: //div[@class="post-body"]

published_date: //div[@class="date"]

Этого достаточно, чтобы сделать instant view вручную, а именно — добавить страницу в список страниц для своего шаблона в My Templates. После чего появится ссылка «View in Telegram», вставив которую в свой канал можно получить на мобильниках Instant View.

Однако это во-первых придется делать вручную для каждой статьи. И во-вторых, при просмотре не с мобильника, а через веб-версию или десктопное приложение, ссылка будет работать странно. В вебке вообще не открываться, а в приложении — открываться через предупреждение что это «ссылка для тестирования instant view». Что как-то не солидно выглядит.

Хотелось бы конечно получить автоматическую генерацию Instant View, как у телетайпа например. В правилах подачи шаблонов сказано, что нужно добавить не менее 10 статей и отправить темплейт на проверку. Я это сделал месяц назад где-то, тишина. При этом последнее обновление в сервисе было лет пять назад, и непонятно, работает ли он сейчас вообще.

Погуглил на эту тему, и оказалось, что таки да, сервис видимо не работает. Люди постят темплейты и годами их не добавляют. Однако где наша не пропадала. Эти же люди обнаружили, что можно внаглую использовать темплейт того же телетайпа (teletype.in). Для этого нужно страницу, просматриваемую ботом, привести к шаблону телетайпа, а также рендерить на странице мета-тег tg:site-verification с указанием айдишника телетайпа. Тогда Instant View будет формироваться для произвольного сайта. При простой вставке ссылки, без всяких режимов тестирования через /iv?url=.

Вот шаблон, в соответствие которому надо привести страницу: gist

И несколько моих комментариев:

• Предположительно, все незакомментированные теги должны быть, хотя я и закомментированные добавил.
• В шаблоне говорится про ключ верификации, что @content could be empty, но в данный момент это не так. Проверил с указанием ключа и с пустым атрибутом без ключа. С ключом работает, без — нет.
• Разметка статьи довольно простая (body → div → article → содержимое), может показаться, что нужно чтобы была только такая разметка и больше ничего. Но это не так. Я обернул в <div class="article"><article class="article__content"></div></article> иллюстрацию и контент заметки, но между body и этим дивом у меня еще несколько оберток и телеграм это не волнует. Можете посмотреть в коде любой заметки здесь, я сделал разметку безусловной, поскольку добавление этих тегов ничего не поменяло.
• Также заметил, что нельзя оставлять внутри article заголовок, дату, теги — тогда бот сбоит и instant view не генерирует.

В подтверждение публикую ссылку на эту заметку в канал https://t.me/graker_coding. Должна превратиться в instant view.