Showing Thumbnail for link in WhatsApp || og:image meta-tag doesn't work
I belive you need to add itemprop
to the og:image
meta tag, have the image size set to 256x256
and also it would not harm to add the site_name
, type
and updated_time
properties either :)
<meta property="og:site_name" content="San Roque 2014 Pollos"><meta property="og:title" content="San Roque 2014 Pollos" /><meta property="og:description" content="Programa de fiestas" /><meta property="og:image" itemprop="image" content="http://pollosweb.wesped.es/programa_pollos/play.png"><meta property="og:type" content="website" /><meta property="og:updated_time" content="1440432930" />
You can see these meta tags in action on for example Google Maps.
After you have changed your meta tags, you might need to wait a while for possible caches to update.
You can debug/verify Open Graph meta tags from the Facebook Debugger
If you can see all your tags there, then the sites/apps where your tags are not showing properly might have different requirements for Open Graph tags.
EDIT:
If you are going to specify an image by a HTTP-Secure
link, you need to use og:image:secure_url
instead of og:image
.
EDIT2:
You also need to specify og:type
as it is one of the four base required parameters.<meta property="og:type" content="website" />
should get you in the right direction.
I had the same issue and the problem was the size of the picture. Whatsapp doesn't support picture with a size greater than 300KB.
So the most important property to display image on Whatsapp is:
<meta property="og:image" content="url_image">
And the size of the image to display must be less than 300KB
After spending months trying to figure this out, I finally solved the issue. Here is my solution:
<!-- MS, fb & Whatsapp --><!-- MS Tile - for Microsoft apps--><meta name="msapplication-TileImage" content="http://www.example.com/image01.jpg"> <!-- fb & Whatsapp --><!-- Site Name, Title, and Description to be displayed --><meta property="og:site_name" content="The Rock Photo Studio"><meta property="og:title" content="The Rock Photo Studio in Florida"><meta property="og:description" content="The best photo studio for your events"><!-- Image to display --><!-- Replace «example.com/image01.jpg» with your own --><meta property="og:image" content="http://www.example.com/image01.jpg"><!-- No need to change anything here --><meta property="og:type" content="website" /><meta property="og:image:type" content="image/jpeg"><!-- Size of image. Any size up to 300. Anything above 300px will not work in WhatsApp --><meta property="og:image:width" content="300"><meta property="og:image:height" content="300"><!-- Website to visit when clicked in fb or WhatsApp--><meta property="og:url" content="http://www.example.com">
Copy the above, paste in head area of website.CLOSE your Whatsapp app, re-open, THEN test.No need to clear cache, and NO NEED TO CLEAR DATA.
Blessings to all!