Hai Folks,
In this article i will explain how to display thumbnail preview link on whatsapp with simple steps. and i ll add example screens in soon. In previous article How to share content on whatsapp using jQuery ( Title, Link, Thumbnail etc.. ) we can see how to share content like Title, Description, Any links etc using whatsapp.
For this there is a concept meta tags in html. By using this meta tags we can easily add title, thumb, description, site name etc. you need to add these meta tags in side of <head> </head> section. After you have changed your meta tags, you might need to wait a while for possible caches to update.
The following meta tags are used for solve the problem:
<meta property="og:site_name" content="Site-Name-Here">
<meta property="og:title" content="Site-Title-Here" />
In this article i will explain how to display thumbnail preview link on whatsapp with simple steps. and i ll add example screens in soon. In previous article How to share content on whatsapp using jQuery ( Title, Link, Thumbnail etc.. ) we can see how to share content like Title, Description, Any links etc using whatsapp.
For this there is a concept meta tags in html. By using this meta tags we can easily add title, thumb, description, site name etc. you need to add these meta tags in side of <head> </head> section. After you have changed your meta tags, you might need to wait a while for possible caches to update.
The following meta tags are used for solve the problem:
<meta property="og:site_name" content="Site-Name-Here">
<meta property="og:title" content="Site-Title-Here" />
<meta property="og:description" content="Site-Description-Here" />
<meta property="og:image" itemprop="image" content="Image_url here">
<meta property="og:type" content="website" />
<meta property="og:updated_time" content="1440432930" />
The meta tag property og:image is enough for getting thumbnail.
If you still facing problem after adding above tags you can add following two kind of code in your page.
First, Add meta tag og:image inside of <head> </head> section.
<meta property="og:image" content="url_image">
Second, Thumbnail schema from schema.org inside <body> section
<link itemprop="thumbnailUrl" href="Image_url here">
<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject">
<link itemprop="url" href="Image_url here">
</span>
I hope you like this article very much & Please don't forget to share.
Thankyou.
<meta property="og:image" itemprop="image" content="Image_url here">
<meta property="og:type" content="website" />
<meta property="og:updated_time" content="1440432930" />
The meta tag property og:image is enough for getting thumbnail.
If you still facing problem after adding above tags you can add following two kind of code in your page.
First, Add meta tag og:image inside of <head> </head> section.
<meta property="og:image" content="url_image">
Second, Thumbnail schema from schema.org inside <body> section
<link itemprop="thumbnailUrl" href="Image_url here">
<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject">
<link itemprop="url" href="Image_url here">
</span>
I hope you like this article very much & Please don't forget to share.
Thankyou.
Very good points you wrote here..Great stuff...I think you've made some truly interesting points.Keep up the good work.
ReplyDeleteWedding Greetings Messages for Sister in English Funny
Hi Vasanth, Thanks so much for this article -- it's great, and after inserting your meta tags I get a clean chit from the rich preview checker, but still no visible previews on whatsapp. In fact, individual post previews used to show up -- just not for the main site url. But now, nothing. What could I be doing wrong? I'm on paticheri dot com in case you want a look. Thanks!
ReplyDeleteThanks. It working now
ReplyDeletedesireindiatoday.com, desire india today, digital marketing, india's best digital marketing, tranding news, latest news, sports, advertisement, online create website, desireindiatoday
ReplyDeletethank's for sharing, it working,
ReplyDeleteThank You for this wonderful way to display thumbnail in whatsapp, but its now working for my website: Techno Bite
ReplyDeletePlease help! thumbnail is showing everywhere, facebook, twitter, and any other social media platform. its not showing in whatsapp only.
Note: AMP link is showing thumbnail perfectly.
Nice very very helpful post for me 👌👌👌 http://www.24online.tech
ReplyDeleteHow it do
ReplyDeletePlease upload full code for me
https://www.yazhnews.com this site randomly shows thumbnail from my post images for the main subdomain (www.yazhnews.com) for WhatsApp and facebook.
ReplyDeleteMessages are sent to the user's mobile, which is really important for marketers and businesses. The message is viewed within few minutes, as people like to check their phones when any kind of notification appears on the screen. Broadcasting can modernize the communication with your customers. come spiare whatsapp
ReplyDelete