How can get link preview like whatsapp / telegram

This article explores how whatsapp and telegram have achieved a link preview

In reality, a web preview is obtained by reading the Open Graph Meta Tags of a web page. According to facebook, there are the following categories of Open Graph Meta Tags.

og:url
og:title
og:description
og:image

There are two ways to read the Open Graph Meta Tags of a web page
1. server-side-rendered(SSR)
Open Graph Meta Tags are already included in the `html`
For example: https://www.apple.com/hk/mac/

2. client-side-rendering (CSR)
The web content is generated by the browser, so there is no web content at the beginning and therefore no open graph tags. For example twitter can’t find any useful information

Fortunately, some web pages have set up some User-Agent whitelists for this case, and users can receive some server-side rendered (SSR) HTML, including Open Graph Meta Tags.

The whitelist of the User-Agent can be found at https://developers.whatismybrowser.com/useragents/explore/software_type_specific/crawler/

I tried to add one of the whitelist User-Agents to Herder and successfully read the Open Graph Meta Tags of the tweet.

Tips

If you find that some websites still can’t read Open Graph Meta Tags, but you can see the preview on Whatsapp, try using `WhatsApp/2`, which is what I found by crawling

I hope you enjoy reading this article and hitting clap 👏 .