Добавление расширенной функции предварительного просмотра в веб-приложении, разработанном с использованием HTML 5

Question

Когда вы отправляете ссылку на сайт в чат-приложениях, таких как WhatsApp или Skype, появится небольшой предварительный просмотр веб-сайта. Я хочу реализовать аналогичную функцию в своем веб-приложении, разработанном с использованием HTML 5 и JavaScript. Поэтому, если у меня есть ссылка, я хочу показать богатый обзор для этого тега div.

Что необходимо сделать для достижения желаемых результатов.

Answer 1

Эти превью в Skype и аналогичные программы создаются на основе метатег.

Различные приложения/социальные сети используют для этого разные метатеги. Skype, например, понимает метатеги открытого графика: http://ogp.me/

Существует много статей, описывающих процесс написания метатег. Вы можете посмотреть на этом два:

https://warfareplugins.com/open-graph-tags-twitter-cards-rich-pins/

https://moz.com/blog/meta-data-templates-123

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

Некоторые из реализаций с открытым исходным кодом для открытого графика перечислены здесь: http://ogp.me/#implementations