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

Question

Tried to follow this question : Provide an image 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

Strange... the og:image should be enough. I tried to share a youtube link and i can see correctly the thumbnail in my chat. I tried to see if Youtube was using more meta tags without discovering anything special.... are we facing a cache problem? — cs.edoardo, Aug 19 '15 at 11:55
excuse me , but are you sure this is even possible ? have you seen it else where before ? do you have some link that have a thumb on whatsapp ? — ProllyGeek, Aug 21 '15 at 19:14
it's possible to increase picture height and width???? in Whatsapp — Chandresh Kachariya, Mar 08 '17 at 04:56
I used same tag its not working please guide https://stackoverflow.com/questions/47236739/open-graph-protocol-not-working-in-whatsapp — vinox, Nov 11 '17 at 19:48
Can I reference an Image without any HTTP call, as in `content="./images/logo.png"`? — TMOTTM, Nov 01 '18 at 10:03
I add this here as it's a helpfull information... If the image being using as thumbnail it's on a https server that does an 301 redirecte from a no https incoming request and on og:image:url it's put the not https url, the Whatsapp client would not follow the 301 redirect — Zardoz89, Feb 13 '23 at 14:34

score 163 · Answer 1 · edited Jul 03 '23 at 09:53

163

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's Sharing 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.

edited Jul 03 '23 at 09:53

yaputra jordi

513
3
8

answered Aug 22 '15 at 09:58

Unknown

1,871
1
11
11

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 Aug 24 '15 at 15:36
7

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"` – Unknown Aug 24 '15 at 15:42
Thank you for your time. I made the changes. But still no luck. :( – Akhil Sekharan Aug 25 '15 at 08:08
The youtube link goes to a video where they show how to create a flat icon in Illustrator? – Unknown Aug 25 '15 at 15:37
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 – Akhil Sekharan Aug 25 '15 at 17:02
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. – Unknown Aug 25 '15 at 19:42
It worked perfectly! If Facebook error for `app_id` use this: `` Replace the xxxxxxxxxxxxxxx with the default id you receive from FB. Also it is important to add: `` – Omar Abdirahman Dec 03 '15 at 14:04
Some of your meta tags have a "/" at the end. Yay or Nay? – Feb 02 '16 at 00:38
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 http://robotiqu.es ...no response a year later? – Juanjo Apr 29 '16 at 17:14
It's not working for me..any one have other solution ? – Keyur Shah Sep 09 '16 at 04:56
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 – full_prog_full Sep 20 '16 at 16:13
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 – Amjo Oct 05 '16 at 09:02
Note that It may not work if your site runs on https with self signed certificate. Verified on Facebook and whatsapp – Indraraj Jul 09 '17 at 07:22
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. – Cymro May 16 '19 at 18:55
not working in my case https://dev.dubairent.com/property/immaculate-4-bed-townhouse-victory-heights-470273 – Jitendra Pancholi May 15 '20 at 12:07
You always can add the version parameter for try without cache. In the URL just add this query parameter `?v=2`. You also can use the timestamp programmatically. – Carlos Eduardo Salazar Mori Oct 19 '22 at 17:35
If you site is fully HTTPS there is no need to use `og:image:secure_url` – Diego Bianchi Feb 22 '23 at 17:44

Cedriga · Answer 2 · 2018-07-26T12:11:49.467

57

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

edited Jul 26 '18 at 12:11

answered Aug 27 '16 at 14:29

Cedriga

3,860
2
28
21

https://dev.dubairent.com/property/immaculate-4-bed-townhouse-victory-heights-470273 not working in my case – Jitendra Pancholi May 15 '20 at 11:58
5

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. – Akseli Palén Dec 05 '20 at 12:55

score 33 · Answer 3 · answered May 01 '19 at 03:55

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!

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. — Bernhard Kraus, Oct 07 '19 at 11:10
none worked in my case https://dev.dubairent.com/property/immaculate-4-bed-townhouse-victory-heights-470273 — Jitendra Pancholi, May 15 '20 at 11:57

score 14 · Answer 4 · edited Sep 07 '20 at 09:22

14

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

And you should see working

Before and after screenshoot

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.

edited Sep 07 '20 at 09:22

Krzysztof Madej

32,704
10
78
107

answered Mar 03 '16 at 23:49

wong_udik

159
1
5

3

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 May 01 '16 at 09:08
1

@wong_udik How to pass this HTML content via Android Intent – Raja Jawahar Jul 07 '18 at 18:31
does not work in my case https://dev.dubairent.com/property/immaculate-4-bed-townhouse-victory-heights-470273 – Jitendra Pancholi May 15 '20 at 12:00
1

@JitendraPancholi Now i saw ur link works. May I know how u solve it? – HUNG Dec 03 '21 at 07:04
@HUNG In my case, I had applied the html compression which was removing all closing tags i.e. – Jitendra Pancholi Dec 03 '21 at 15:00

score 12 · Answer 5 · answered Aug 25 '17 at 22:34

12

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

answered Aug 25 '17 at 22:34

Syed Zeeshan Ali

367
3
9

not working in my case https://dev.dubairent.com/property/immaculate-4-bed-townhouse-victory-heights-470273 – Jitendra Pancholi May 15 '20 at 11:59

score 4 · Answer 6 · answered Nov 18 '17 at 23:15

I don't know about the minimum number of meta tags required to work on whatsapp, found this in somewhere and this worked for me flawlessly. Note: Image resolution is 256 x 256.

   <head>
    <meta property="og:site_name" content="sitename" />
    <meta property="og:title" content="title">
    <meta property="og:description" content="description">
    <meta property="og:image" itemprop="image" content="http://www.yoursite.com/yourimage.jpg">
    <link itemprop="thumbnailUrl" href="http://www.yoursite.com/yourimage.jpg"> 
    <meta property="og:image:type" content="image/jpeg">
    <meta property="og:updated_time" content="updatedtime">
    <meta property="og:locale" content="en_GB" />
    </head>

    <body>
    <span itemprop="image" itemscope itemtype="image/jpeg"> 
      <link itemprop="url" href="http://www.yoursite.com/yourimage.jpg"> 
    </span>

    </body>

score 3 · Answer 7 · answered Apr 15 '18 at 16:45

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

answered Apr 15 '18 at 16:45

Azodium

1,785
1
13
10

1

this and making the file size less than 300kb worked for me – Aryeh Beitz Oct 15 '18 at 11:53
1

Only clearing cache is enough. No need to clear data. – Sanket Berde Feb 06 '19 at 17:32
1

You can just cache bust the link instead: `https://link.com/?_=92375293579` – nathan Dec 26 '19 at 13:47

score 3 · Answer 8 · answered Apr 07 '20 at 11:32

3

Additional useful info:

You can provide several og:images, whatsapp will use the last one. This will help with the problem that e.g. facebook want 1.91:1 ratio and whatsapp 1:1

https://stackoverflow.com/a/61078968/8486854

answered Apr 07 '20 at 11:32

SinunHenkka

445
6
14

score 3 · Answer 9 · edited Oct 30 '20 at 03:08

Had the same issue , I finally got it working after some trying. Here are the 8 html tags that I used on my web page to get the preview working :

In <head> tag:

<meta property="og:title" content="ABC Blabla 2020 Friday" />
<meta property="og:url" content="https://bla123.neocities.org/mp/friday.html" />
<meta property="og:description" content="Photo Album">
<meta property="og:image" itemprop="image" content="https://bla123.neocities.org/mp/images/thumbs/IMG_327.JPG"/>
<meta property="og:type" content="article" />
<meta property="og:locale" content="en_GB" />

In <body> tag:

<link itemprop="thumbnailUrl" href="https://bla123.neocities.org/mp/images/thumbs/IMG_327.JPG">

<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject">
<link itemprop="url" href="https://bla123.neocities.org/mp/images/thumbs/IMG_327.JPG">
</span>

These 8 tags ( 6 in head , 2 in body) worked perfectly.

Tips:

1.Use the exact image location URL instead of directory format i.e. don't use images/OG_thumb.jpg

2.Case sensitive file extension: If the image extension name on your hosting provider is ".JPG" then do not use ".jpg" or ".jpeg' . I observed that based on hosting provider and browser combination error may or may not occur, so to be safe its easier to just match the case of file extension.

3.After doing above steps if the thumbnail preview is still not showing up in WhatsApp message then:

a. Force stop the mobile app ( I tried in Android) and try again

b.Use online tool to preview the OG tag eg I used : https://searchenginereports.net/open-graph-checker

c. In mobile browser paste direct link to the OG thumb and refresh the browser 4-5 times . eg https://bla123neocities.org/nmp/images/thumbs/IMG_327.JPG

score 3 · Answer 10 · answered Sep 20 '22 at 09:54

Took 1 day but figure out what's needed. Following checklist might help you

it's fine if you don't include og:image:width and og:image:height meta tags. Following is my code which works. Use Facebook Debugger to find errors

<meta property="og:url" content="https://stgwww.moneycontrol.com/us-markets/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="YOUR_TITLE" />
<meta property="og:description" content="YOUR DESCRIPTION" />
<meta property="og:image" content="https://stgwww.moneycontrol.com/react-asset/images/moneycontrol-us-markets.png" />
<meta property="og:image:type" content="image/png" />

Image should be less than 200kb in size
Width of the image should be 600px maximum, it's fine if height is less than 600px but maximum it should be 600px
If your website is https make sure your image url should also have https
Make sure page url is equal to what you are passing in og:url. In my case page url was https://stgwww.moneycontrol.com/us-markets/ but my og:url was <meta property="og:url" content="https://stgwww.moneycontrol.com/markets/us-markets/" />
og:image domain should match with your website's domain, you cannot use image link of another website.
use full path, relative path won't work.

//correct
<meta property="og:image" content="https://stgwww.moneycontrol.com/react-asset/images/moneycontrol-us-markets.png" />

//wrong
<meta property="og:image" content="//images/moneycontrol-us-markets.png" />

score 2 · Answer 11 · answered Nov 09 '16 at 10:02

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 :)

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 ? — John Max, Feb 28 '18 at 16:20

GZone · Answer 12 · 2016-12-26T23:49:05.897

2

I documented the perfect detailed solution here - https://amprandom.blogspot.com/2016/12/blogger-whatsapp-rich-link-preview.html There are seven steps to be done to get the perfect preview.

Title : Add Keyword rich title to your webpage with maximum of 65 characters.
Meta Description : Describe your web page in a maximum of 155 characters.
og:title : Maximum 35 characters.
og:url : Full link to your webpage address.
og:description : Maximum 65 characters.
og:image : Image(JPG or PNG) of size less than 300KB and minimum dimension of 300 x 200 pixel is advised.
favicon : A small icon of dimensions 32 x 32 pixels.

In the above page, you have the required specifications, the character limit and sample tags. Do upvote once you find it satisfactory.

edited Dec 26 '16 at 23:49

answered Dec 26 '16 at 15:22

GZone

171
1
6

Do explain what your link is doing... Links can disappear. – Kurt Van den Branden Dec 26 '16 at 15:54
Is your source just from testing or are any of those requirements documented anywhere? – Keab42 Mar 07 '17 at 10:27

Derzu · Answer 13 · 2020-06-27T15:01:52.293

If after all these tips, the thumbnail is still not showing, try this:

My problem was that the double quotes from the og attributes were being removed when built for production (npm run build). The Minify module was doing that.

So the solution was to cancel this removal, setting the removeAttributeQuotes attribute to false:

minify: {
    ...
    removeAttributeQuotes: false,
    ...
}

In my development environment, I set it on the "webpack.prod.conf.js" file. Set it at your equivalent file.

Just rebuild and it's now working.

score 2 · Answer 14 · answered Aug 23 '21 at 18:11

2

Not sure it's WhatsApp issue or what, but pasting the link without "/" at the end works for me.

Example :-

https://example.com - WORK
https://example.com/ - THUMBNAIL NOT WORKING

answered Aug 23 '21 at 18:11

iceiceicy

705
1
9
24

score 1 · Answer 15 · edited May 23 '17 at 12:34

1

In reply to https://stackoverflow.com/a/35785393/1518500

Try the updated version for schema.org

<span itemprop="image" itemscope itemtype="http://schema.org/ImageObject"> 
 <link itemprop="url" href="imgurlHere">
 <meta itemprop="width" content="1200">
 <meta itemprop="height" content="800">
</span>

or using the json-ld format from google

<script type="application/ld+json">
 {
"@context": "http://schema.org/",
"@type": "ImageObject",
 "url": "ImgURLhere",
    "height": 800,
    "width": 1200

 }
 </script>

edited May 23 '17 at 12:34

Community

1
1

answered Aug 29 '16 at 10:33

Joell Lapitan

23
1
5

2

Can you please add some explenation to your answer? Simply showing code can be confusing for some people. – André Kool Aug 29 '16 at 10:52

score 1 · Answer 16 · answered Jan 26 '17 at 05:21

1

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.

answered Jan 26 '17 at 05:21

Joell Lapitan

23
1
5

1

How will you send this data via Intent – Raja Jawahar Jul 07 '18 at 18:09
1

This question is entirely offtopic – meredrica Oct 29 '18 at 11:46

score 1 · Answer 17 · answered Apr 12 '19 at 09:31

In my case, adding the below meta tag solved the problem. I was using Arabic content and had to add this to make the image appear on WhatsApp:

<meta property='og:locale' content='ar_AR' />

Note: If you are using English content, no need to add this meta tag since English is the default value.

score 1 · Answer 18 · answered Apr 18 '20 at 21:25

For anyone still experiencing this, I found that images served on Amazon S3 do not work for WhatsApp mobile app (both Android and iOS, but Mac desktop app was fine). It's very possible that our AWS settings cause this, but I noticed the pattern in other sites as well (e.g. this one with an og:image hitting a domain like https://s3.amazonaws.com).

There were no problems on any other platform I tried, just WhatsApp mobile apps. As soon as I pointed my <meta property="og:image" content="https://some-non-aws-location" /> to another public URL like a Google Drive file (shared publicly of course), it worked fine.

I also tried committing the image in our repo, which is hosted and deployed on AWS with a custom domain, and that didn't work either. So AWS still seems to be the culprit. Hope this helps someone!

ehsan_kabiri_33 · Answer 19 · 2020-11-08T21:34:14.867

November 2020 : As I experienced , these meta tags are required and effect on what you see on shared link in Whatsapp and WhatsApp-thumbnail :

<head>
 <meta content='myTitle' property='og:title'/>
  <meta content="myDescription" property="og:Description"/>
  <meta property="og:type" content= "website" />
  <meta property="og:image" itemprop="image primaryImageOfPage" content="https://i.ibb.co/1GRpwND/600px-Approve-icon-svg.png" />
</head>

and inside <body> :

<a href="https://wa.me/?text=https://myaddress.blogspot.com/2020/11/try-16.html" target="_blank" rel="nofollow">Hello whatsApp</a>

More explanation :

1- Suppose you have <meta content='example.com/page1' property='og:url'/> and inside body you refer to <a href="https://wa.me/?text=example.com/page2" >Hello whatsApp</a>, the og:image and og:description of page example.com/page2 wil be rendered on whatsApp as you referred on your link in body (maybe obvious).

2-When you add/change any open graph tags such as og:description, and again you click your <a></a> tag on your page/body, what you see on WhatsApp doesn't change unless you change the href="I am a new URL" of your <a></a> tag or clear cache of WhatsApp !!

3-I tried Png/jpg images, all less than 300 kb in size and all bigger than 300*300 in pixels, and image content was a https or a http url, the above code supports both of them ( No need to og:image:secure_url).

4-Each time you add/change og contents, to have a thumbnail on WhatsApp, the changes doesn't affect on first try !! and successful on second try. Very strange !

score 1 · Answer 20 · answered Apr 18 '23 at 03:21

Please check if the file format of your thumnail work for whatsapp

In my case the rest of chat app like Messenger or Telegram are working fine with a GIF thumnail, but whatsapp does not so I have to change my image url

   <meta property="og:image" content="https://i.imgur.com/3lwkZdD.png" />
   <meta property="og:image:type" content="image/png" />

score 0 · Answer 21 · answered Jan 17 '19 at 10:09

Open Graph data:

<meta property="og:title" content="Title of your website | website.com"/>
<meta property="og:type" content="Most popular business directory of Bangladesh"/>
<meta property="og:url" content="http://www.website.com/"/>
<meta property="og:image" content="http://www.moumaachi.com/images/dhaka-city.jpg"/>
<meta property="og:site_name" content="@website"/>
<meta property="fb:admins" content="Author"/>
<meta property="og:description" content="website.com is your online business directory of Country"/>

not working in my case https://dev.dubairent.com/property/immaculate-4-bed-townhouse-victory-heights-470273 — Jitendra Pancholi, May 15 '20 at 11:58

score 0 · Answer 22 · answered Aug 13 '19 at 03:09

0

Only these 3 tags seem to be required (og:title, twitter:description, rel="icon"):

<meta property="og:title" content="San Roque 2014 Pollos" />

<meta name="twitter:description" property="og:description" itemprop="description" content="Programa de fiestas" />

<link rel="icon" type="image/png" href="https://images.weserv.nl/?url=http://pollosweb.wesped.es/programa_pollos/play.png&w=192&height=192" sizes="192x192" />

Experimenting / playing

The easiest way to experiment for me was with CodeSandbox following these steps:

Create a Vanilla app with https://codesandbox.io/s/
Modify your meta tags accordingly in the index.html file
Save the file (ctrl+s) which would fork the app and generate its own unique url
Paste that url in WhatsApp to see the preview (you don't even need to send a message)
Make changes to the meta tags
Modify the url - add a single character at the end of the url. This discards the "previous cached preview"

Quotes required

Just be sure to ALWAYS have quotes and closing quotes because WhatsApp is sensitive to that. Your above example does not have a closing quote for your og:description.

answered Aug 13 '19 at 03:09

Francois

1,555
2
13
8

not working in my case https://dev.dubairent.com/property/immaculate-4-bed-townhouse-victory-heights-470273 – Jitendra Pancholi May 15 '20 at 11:57
1

@JitendraPancholi, your (dubairent.com) website is not the same. Double-quote characters are required around attribute values. Here is the one from your website: ``. It should be: ``. If you use Webpack with the HTML plugin, consider setting `minify.removeAttributeQuotes` to `false` – Francois May 16 '20 at 12:24
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. – Jitendra Pancholi May 17 '20 at 08:43
@JitendraPancholi, you can use the above instructions for "The easiest way to experiment for me was with CodeSandbox following these steps". Just copy your `` section into the vanilla app. To get your website's raw html use the "view page source" option (in Chrome it is `CTRL + U`). – Francois May 18 '20 at 18:00

score 0 · Answer 23 · answered Sep 20 '20 at 09:40

I followed all the instructions in the anwers here, and I still couldn't get it to work. It seems WhatsApp also requires the extension for it to display the image.

So for a tag pointing to a jpeg:

<meta property="og:image" itemprop="image" content="https://example.com/someimageid"/>

Change the API to allow the extension and use:

<meta property="og:image" itemprop="image" content="https://example.com/someimageid.jpeg"/>

and it then seems to work...

score 0 · Answer 24 · answered Jan 23 '23 at 20:08

I was facing all kind of issues untill I manage to solve this problem, what helped me debug correctly are 1 https://developers.facebook.com/tools/debug/?q= MY URL 2 when pasting my url to whatsapp I add param to force whatsapp clear the cach myUrl?x=123 myUrl?x=1234 ...

score 0 · Answer 25 · answered Jul 26 '23 at 12:47

Update 2023:

If you are using "title" and "description" in your application, then Whatsapp will take the Title and Description as "og:title" and "og:description".
so, consider updating it as well with "og:title" and "og:description" meta tags.

    this.meta.addTag({ property: 'og:title', content: "Your Title" });
    this.meta.updateTag({ property: 'title', "Your Title" });
    this.title.setTitle("Your Title");
    this.meta.addTag({ property: 'og:site_name', content: "Your Title" });
    this.meta.addTag({ property: 'og:description', content: "Your Description" });
    this.meta.updateTag({ property: 'description', content: "Your Description" });
    this.meta.updateTag({ property: 'og:image', content: "direct/path/to/image" });

Keep in mind that, we should have these meta tags when we are updating it. so we used "updateTag". If you are using Twitter Tags then It may also replace the whatsapp "og:image" so consider replacing them.

score -2 · Answer 26 · answered Sep 09 '20 at 12:09

This Solution works for me:

    <meta property="og:title" content="Testing Title" />
    <meta
      property="og:description"
      content="This is best way to view your Time Table & Join Meetings"
    />
    <meta
      property="og:image"
      itemprop="image"
      content="//upload.wikimedia.org/wikipedia/commons/d/d4/JPEG_example_image_decompressed.jpg"
    />
    <meta property="og:url" content="https://google.com/" />
    <meta property="og:type" content="website" />
    <meta property="og:image:type" content="image/jpeg" />

tested on codesandbox.io

here's the link: https://l8ogr.csb.app/

one silly little thing did that magic, by removing "http" or "https" from the Image Url

if your image URL is ex: https://test.com/img.jpeg to //test.com/img.jpeg

<meta property="og:image" itemprop="image" content="//test.com/img.jpg"/>

score -3 · Answer 27 · answered Jul 28 '16 at 13:16

-3

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.

answered Jul 28 '16 at 13:16

user6649894

1

3

this should be a comment please – swiftBoy Jul 28 '16 at 13:36

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

27 Answers27

Experimenting / playing

Quotes required

Linked

Related