Showing Thumbnail for link in WhatsApp || og:image

Question

Tried to follow this question : Provide a picture for whatsapp link sharing

I have created a simple HTML webpage with the basic Facebook metatags:

<!--FACEBOOK-->
<meta property="og:title" content="San Roque 2014 Pollos" />
<meta property="og:description" content="Programa de fiestas />
<meta property="og:image" content="http://pollosweb.wesped.es/programa_pollos/play.png" />        

The Facebook linter validate correctly and in Facebook it shows perfect, but when I try to share by WhatsApp the image doesn't show.

I'm trying it on WhatsApp on Android

→ This is the URL of the Sample Webpage

Answer 1

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.

Answer 2

I hope this help:

<meta property="og:title" content="Title goes here">
<meta property="og:site_name" content="Site name">
<meta property="og:image" content="imageURLShouldBeFromSameDomainName">
<meta property="og:image:width" content="640">
<meta property="og:image:height" content="300">

Take note of the imgURL that should be hosted from same domain, or it will not show up on whatsapp. I tried loading a url from amazon, image preview is not working.

Answer 3

Clear your whatsapp data and cache (or use another whatsapp) !

Android Phone : Go to SETTINGS > APPS > Application List > WhatsApp > Storage and Clear Data.

Be careful ! Backup your messages before this action.

Then the result : before and after clearing data and cache WhatsApp

Answer 4

You only need to type the message with "http://" at the start. For example: http://www.google.com shows the thumbnail image, but www.google.com no.

Answer 5

I also face that problem Finally, i solved it

<meta property="og:image" itemprop="image" content="http://yourdomain.com/yourfolder/imagename.png" />

My image property

1. Dimension : 300X200
2. Size : < 300KB
3. URL: http://yourdomain.com/yourfolder/imagename.png

Make sure in image name there is no space, if you have two words then use underscore sign

Answer 6

For all still having this problem and as for me none of the posted solutions worked out.

I've had the similar issue. The image was showing correctly in all other share dialogs. Only WhatsApp couldnt display the image, even though the facebook debugger has the og:image tag correctly.

The solution that worked for me: I am using firebase. For uploaded content in their storage, you get a unique Download URL with a media token. Something like:

https://firebasestorage.googleapis.com/v0/b/XXXX.XXXXXXX.com/?alt=media&token=YYYYYYYY-YYYYYYYYYY-YYYYYYYYYYYYY

I used this URL in the og:image meta tag. It worked for Facebook etc., but it seems like WhatsApp couldnt download the image from this URL. Instead you need to include the image in your project directory and use this link for the og:image tag. Now it works properly in WhatsApp too.

Before (not working in WhatsApp, but facebook etc.)

<meta property="og:image" itemprop="image" content="https://firebasestorage.googleapis.com/v0/b/XXXX.XXXXXXX.com/your_image?alt=media&token=YYYYYYYY-YYYYYYYYYY-YYYYYYYYYYYYY">

After (now working in all shared dialogs tested, including WhatsApp)

<meta property="og:image" itemprop="image" content="https://domain_name/path_to_image">

Hope it might help some of you :)