Showing Thumbnail for link in WhatsApp || og:image meta-tag doesn't work

android html facebook-opengraph meta-tags whatsapp

219,666

Solution 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.

Solution 2

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

Solution 3

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!

Solution 4

I found the solution here Whatsapp preview link posted on 2 March 16

And you should see working

There is two kind of code. First meta og:image inside <head>

<meta property="og:image" content="url_image">

Thumbnail schema from schema.org inside <body>

<link itemprop="thumbnailUrl" href="url_image"> 
<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject"> 
  <link itemprop="url" href="url_image"> 
</span>

Hope this help. Thanks.

Solution 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

Dimension : 300X200
Size : < 300KB
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

View more solutions

219,666

Author by

JesuLopez

Updated on August 24, 2021

Comments

JesuLopez almost 3 years
Tried to follow this question : Provide an image for WhatsApp link sharing

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

<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
Unknown almost 9 years

That could be because the image is unavailable in your first of the two meta tags with itemprop="image". Error message: Cannot GET /logos/logo_512.png
Unknown almost 9 years

Also, if you are going to use secure-http links to image you need to use property="og:image:secure_url" instead of property="og:image"
Akhil Sekharan almost 9 years

Thank you for your time. I made the changes. But still no luck. :(
Unknown almost 9 years

The youtube link goes to a video where they show how to create a flat icon in Illustrator?
Akhil Sekharan almost 9 years

Sorry for the ambiguity. When we send this link through WhatsApp, a thumbnail of the Video appear near the message as shown in this question
Unknown almost 9 years

So if that links works, then look at the meta tags youtube is using. If it still doesnt work, maybe whatsapp has a "whitelist" on which sites to allow these kind of tags ? Because if you are using tags correctly and it is no question about server cache, then this issue is on server side.
Omar Abdirahman over 8 years

It worked perfectly! If Facebook error for app_id use this: <meta property="fb:app_id" content="xxxxxxxxxxxxxxx" /> Replace the xxxxxxxxxxxxxxx with the default id you receive from FB. Also it is important to add: <meta property="og:url" content="http://yoousite.com" />
Dani over 8 years

Some of your meta tags have a "/" at the end. Yay or Nay?
Juanjo about 8 years

FB debugger: 100% ok. Rich Preview: 100% ok (Watsapp included). When I try to share by WhatsApp the image doesn't show. The url in my case is robotiqu.es ...no response a year later?
Juanjo about 8 years

FB debugger: 100% ok. Rich Preview: 100% ok (Watsapp included). When I try to share by WhatsApp the image doesn't show. The url in my case is robotiqu.es ...no response a year later?
swiftBoy almost 8 years

this should be a comment please
André Kool almost 8 years

Can you please add some explenation to your answer? Simply showing code can be confusing for some people.
Keyur Shah almost 8 years

It's not working for me..any one have other solution ?
full_prog_full almost 8 years

Since facebook = whatsapp, another solution could be having a minimum image size of 200px (as per FB specs). Silly because whatsapp uses tiny thumbs so such are 'large' size is unnecessary
Amjo over 7 years

The Image size was the ultimate constraint... basically it has 100% the same guidelines as Facebook, but with stricter policy. Sure, facebook has the guidelines, but they are not that strict when it comes to image attachment when sharing a link. in case of Whatsapp, i guess it's safe to say u need it to be a square, minimum 200x200px - and if PNG fails, use JPG. hope this helps others
Kurt Van den Branden over 7 years

Do explain what your link is doing... Links can disappear.
Keab42 over 7 years

Is your source just from testing or are any of those requirements documented anywhere?
Indraraj almost 7 years

Note that It may not work if your site runs on https with self signed certificate. Verified on Facebook and whatsapp
John Max over 6 years

Can you please elaborate further ? What really is the difference ? Did you sort of rewrite the url of the image or what did you do ?
Raja Jawahar almost 6 years

How will you send this data via Intent
Raja Jawahar almost 6 years

@wong_udik How to pass this HTML content via Android Intent
Aryeh Beitz over 5 years

this and making the file size less than 300kb worked for me
meredrica over 5 years

This question is entirely offtopic
MarsAndBack over 5 years

Probably that the domain must match the link being shared.
Sanket Berde over 5 years

Only clearing cache is enough. No need to clear data.
Cymro about 5 years

This was my solution: Use the facebook open graph debugger. Find the problems in your open graph syntax. It worked for me. There were problems I would not have found without this tool. Made a few changes and poof! got the thumbnail in Whatsapp.
Bernhard Kraus over 4 years

For me the filesize was responsible at all. As long as the files size is below 300 Kb everything is fine. I don't need measure properties. The og:image tag is enough.
nathan over 4 years

You can just cache bust the link instead: https://link.com/?_=92375293579
Jitendra Pancholi about 4 years

not working in my case dev.dubairent.com/property/…
Jitendra Pancholi about 4 years

none worked in my case dev.dubairent.com/property/…
Jitendra Pancholi about 4 years

not working in my case dev.dubairent.com/property/…
Jitendra Pancholi about 4 years

dev.dubairent.com/property/… not working in my case
Jitendra Pancholi about 4 years

not working in my case dev.dubairent.com/property/…
Jitendra Pancholi about 4 years

does not work in my case dev.dubairent.com/property/…
Jitendra Pancholi about 4 years

not working in my case dev.dubairent.com/property/…
Francois about 4 years

@JitendraPancholi, your (dubairent.com) website is not the same. Double-quote characters are required around attribute values. Here is the one from your website: <meta property=og:title content="Immaculate 4 Bed Townhouse Victory">. It should be: <meta property="og:title" content="Immaculate 4 Bed Townhouse Victory">. If you use Webpack with the HTML plugin, consider setting minify.removeAttributeQuotes to false
Jitendra Pancholi about 4 years

I corrected that now but whatsapp is still not showing image in preview, although title and description are showing as they were showing earlier too.
Francois about 4 years

@JitendraPancholi, you can use the above instructions for "The easiest way to experiment for me was with CodeSandbox following these steps". Just copy your <head> section into the vanilla app. To get your website's raw html use the "view page source" option (in Chrome it is CTRL + U).
Akseli Palén over 3 years

Can confirm. After resizing the image to be square and about 100 kB in size the thumbnail appeared in WhatsApp (before it was 1920x1080 and 350 kB). I had to restart the WhatsApp in my Android phone. I did not need to add oldschool itemprop="image" nor og:image:secure_url attributes.
HUNG over 2 years

@JitendraPancholi Now i saw ur link works. May I know how u solve it?
Jitendra Pancholi over 2 years

@HUNG In my case, I had applied the html compression which was removing all closing tags i.e. </html>, </body>, </div> etc. As soon as I added all closing tags, it fixed.