Как сделать предпросмотр ссылки на сайт в Telegram?

73
26 февраля 2022, 00:20

Как можно сделать так, что бы при отправлении ссылки на мой сайт в Telegram отображался предпросмотр открываемой страницы? Не Instant View, а что бы просто выводился description и title.

Answer 1

Используйте open Graph разметку в head своей страницы.

Пример с IMDB страница фильма "скала".

<html prefix="og: //ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="//www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="//ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>

Своё описание можно добавить через тег og:description

<meta property="og:description" content="Описание моей страницы" />

Подробнее о нюансах работы в мессенджерах: https://mediaskunk.ru/2016/02/opengraph-messengers/

Ряд нюансов для telegram: https://stackoverflow.com/questions/34707915/how-do-you-clear-the-open-graph-cache-of-an-url-on-telegram

Генератор тегов нужного вам вида: https://a.pr-cy.ru/tools/open-graph-generator/

Проверка open Graph тегов на странице: https://sitechecker.pro/ru/open-graph/

Подробная документация на русском: https://ruogp.me/

READ ALSO
HTML CSS Появление слайдера снизу

HTML CSS Появление слайдера снизу

Друзья! Столкнулся с проблемой при вёрстке страницыДело в том, что снизу появляется слайдер, которого там быть не должно

74
Определение определённой кнопки в jquery

Определение определённой кнопки в jquery

У меня есть 4 разных div с одинаковым названия класса и 4 кнопки в нихПо имени класса я могу обратиться чтобы считать действие

212
Диспетчер задач на с++

Диспетчер задач на с++

пишу курсовую работу(диспетчер задач) не могу вывести список действующих процессов в листбоксВ документации по visual studio 2019 я не могу найти...

107
Не прорисовывается карта в игре на c++

Не прорисовывается карта в игре на c++

У меня есть массив строк, который и является картой:

89