在使用HTML開發的網絡應用程序中添加豐富的預覽功能5

Question

當您在諸如WhatsApp或Skype等聊天應用程序中發送網站鏈接時，會出現一個小型網站預覽。我想在使用HTML 5和JavaScript開發的Web應用程序中實現類似的功能。所以如果我有鏈接，我想在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

什麼，你會需要的是一個渲染器，這需要鏈接，解析頁面，試圖瞭解meta標籤，並呈現預覽基於元標籤。

一些開源實現開放式圖形這裏列出：http://ogp.me/#implementations