How whatsapp messaging reads website url like the facebook open graph protocol?

Question

I want to make like Facebook og meta but for whatsapp messaging for my website like attached screenshot, as I looked into google's meta tags and found this role attribute but found nothing that I can use to accomplish it.

How could I achieve this?

Here is what I referred.

<meta content="images/imagery" item prop="image">

whats app messaging example

Solution

You can just use the existing OpenGraph data for this. You will have to inject tags like

<meta property="og:title" content="I'm going to Joy of Coding 2016 :)">
<meta property="og:description" content="Fancy going to Joy of Coding 2016 as well? Buy your tickets now!">
<meta property="og:url" content="https://shop.inventid.nl/132">
<meta property="og:image" content="https://customerimages.inventid.nl/c8737a37-9297-4a29-a969-e20adc31efb4_1400_800.jpg">

Remember that if you have a pure Javascript application, you might have to resort to tools such as Prerender (prerender.io) to present correct data to crawlers (also Facebook or Twitter for example)

More information about opengraph data can be found on the website http://ogp.me/

Comments

[Rogier Slag]

If you have a page based on Javascript you should use a tool like prerender.io to make it work. Do you have an example URL?

[Arnold Schrijver]

Note: There are updates in the best to add metadata, which are described here: stackoverflow.com/questions/25100917/…