Provide an image for WhatsApp link sharing

Question

How can we include an image in our website to display in WhatsApp when we share a link like this?

Test how Facebook renders it: https://developers.facebook.com/tools/debug/ — Noam, May 15 '20 at 10:10

score 644 · Accepted Answer · edited Feb 20 '22 at 13:20

644

2020 standards

It takes a few steps to get the perfect preview for WhatsApp, Twitter, Facebook and bookmark icons for pc's and mobile devices. If you like reading go to Open Graph (ogp.me) - but make sure to read steps 1 - 6 in this answer to get the best WhatsApp preview.

Results of many tech audits by different companies show having Open Graph tags won’t help you get a better SEO ranking, they are only for social media. schema.org's data structures will help you with SEO.

These Open Graph <meta> tags go inside the <head> tag.

Please note: @jaimish11 mentioned some apps or websites use cache or even store the website preview in their database. This means when you're testing your link in WhatsApp or Facebook for example, you'll most likely not see any difference right away. Using another link (another page) will do the trick. But as soon as you use that link once, this "please note" section starts all over again.

Step 1: title

Maximum of 65 characters

<title>your keyword rich title of the website and/or webpage</title>

Step 2: description

Maximum of 155 characters

<meta name="description" content="description of your website/webpage, make sure you use keywords!" />

Step 3: og:title

Maximum 35 characters

<meta property="og:title" content="short title of your website/webpage" />

Step 4: og:url

Full link to the current webpage address

<meta property="og:url" content="https://www.example.com/webpage/" />

Step 5: og:description

Maximum 65 characters

<meta property="og:description" content="description of your website/webpage" />

Step 6: og:image

Image(JPG or PNG) with a size less than 300KB and minimum dimensions of 300 x 200 ^*. This image should be served via a HTTPS connection with a valid non-self-signed certificate.^**

<meta property="og:image" content="//cdn.example.com/uploads/images/webpage_300x200.png" />

^* @RichDeBourke mentioned this to me, but apparently WhatsApp has increased its maximum image size (dimensions as well as file size). I did some tests: it does not work consistently every time on every device. I tested 2.x Mb images and even that seemed to work 9/10 times. <300KB is the safest approach, but you should be fine using larger images as of 18-02-2020. I would recommend keeping the file size below 2MB, though. And definitely throw your image through TinyPNG or any other image compression algorithm if you haven't already.

** @Indraraj mentioned the image may not show up if your site runs on https with a self-signed certificate.

If you completed the steps above, you can now see your preview in WhatsApp! However, be aware of the "please note" section above.

Step 7: og:type

In order for your object to be represented within the graph, you need to specify its type. Here's a list of the global types available: http://ogp.me/#types. You can also specify your own types.

<meta property="og:type" content="article" />

Step 8: og:locale

The locale of the resource. You can also use og:locale:alternate if you have other language translations available.

If you don't specify og:locale, it defaults to en_US.

<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />

Step 9: Twitter

For the best Twitter support read this.

Step 10: Facebook

For the best Facebook support read this.

Step 11: favicon

For the best favicon support for all browsers and devices read this.

Bonus step 12: video/audio

It's also possible to share audio/video. Facebook and Twitter for example share videos very well. Read ogp.me. And of course WhatsApp has this option as well: when you share an Instagram or Youtube link, the WhatsApp preview comes with the in-app video player.

Super bonus step 13: products, persons, movies etc.

This kind of information really depends on the provider (Facebook, Google). I don't know when, but WhatsApp and Twitter could enable support for products. This way, the persons you share the link with, might see the price, average review score in the shared link "widget". That would be nice. This already exists for business accounts who have their Catalog up-to-date in their WhatsApp Business app, but this is totally different than link sharing.

edited Feb 20 '22 at 13:20

Oded Ben Dov

9,936
6
38
53

answered Apr 01 '17 at 08:20

Derk Jan Speelman

11,291
4
29
45

16

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:21
4

@Indraraj thanks for sharing, this can also be found in the docs of *Facebook for developers* – Derk Jan Speelman Jul 09 '17 at 09:48
@Indraraj can you please tell how to do this in a web site with https with self signed certificate – BALU K B Sep 06 '17 at 06:05
Doesn't it work for you? I have https on all my websites and they work just fine – Derk Jan Speelman Sep 06 '17 at 06:11
3

i put all the above tag.but still not showing the image – BALU K B Sep 06 '17 at 06:31
3

@DerkJanSpeelman now it's working fine. thank you. i forgot to keep the image dimension as 300*200. – BALU K B Sep 06 '17 at 07:04
1

@DerkJanSpeelman I don't understand, this site: http://www.jornada.unam.mx/ultimas/2018/06/19/transexualidad-ya-no-es-enfermedad-mental-oms-166.html has more than 35 characters and the image preview is working. where can I find the correct specification? – elios264 Jun 19 '18 at 16:26
@elios264 It's **recommended** to use less than 35 characters. But when a website has +1000 webpages it gets harder and harder to create unique titles for every page. Therefore, more characters are needed. The maximum amount of characters to use for your tags is different for every search engine. Recently Google allowed title tags to have +250 characters. But this is only recommended when you really can't use <35 characters. – Derk Jan Speelman Jun 19 '18 at 18:17
I tried many things and finally figured that the thumbnail image size was more than 300 KB. I guess it is one of the most important aspects while fixing this issue. If og:image is set properly, then next make sure that the image size is less than 300KB. – Mittal Patel Jun 28 '18 at 06:48
1

@MittalPatel that's what my answer says as well – Derk Jan Speelman Jun 28 '18 at 08:42
I want to do this for file preview too. Like doc, pdf, ppt etc...is there any way? – Pushan Gupta Sep 21 '18 at 14:38
@VidorVistrom I don’t believe there’s a way to do that. But you can create a page on your website with a download link to that file (or instant download when visiting that page). So than you can share your page (with your specific text, image et cetera) and it’ll work fine. But than your WhatsApp client will not be able to view your file in WhatsApp. Instead they will be redirected to your website where they will be able to view or download it there. – Derk Jan Speelman Sep 21 '18 at 14:43
There has to be a way. Whatsapp is using it – Pushan Gupta Sep 21 '18 at 18:00
@VidorVistrom maybe I can help you if you post a question with some more information – Derk Jan Speelman Sep 22 '18 at 22:18
Whatsapp need the url to the images be https, that was the problema in my case – tito.icreativos May 16 '19 at 10:17
@tito.icreativos you always need to use https. – Derk Jan Speelman May 17 '19 at 11:21
having mixed http content inside of an https enabled page will affect this too – Jonathan DS Aug 28 '19 at 20:10
Yeah never mix protocols. I tried mixing TCP and UDP, can't do it without a proxy. – Derk Jan Speelman Aug 29 '19 at 07:09
When share on facebook images is there but not on whatsapp share. Is it some cache and if so how can I clean it? They both use the og tags, right ? – Toma Tomov Sep 11 '19 at 12:49
@TomaTomov I assume you've read the **Please note** section in my answer? – Derk Jan Speelman Sep 11 '19 at 15:41
1

Yes. I red it :) It works fine now. Just though that I can flush whatsapp cache somehow. Thank you very much! – Toma Tomov Sep 11 '19 at 17:04
@DerkJanSpeelman – Has WhatsApp increased (or eliminated) their size limit on og:images (and if so, is there a new limit)? I’ve been cautioning friends to not use an og:image larger than 300KB, but last week, the test site I’ve been using to demonstrate how WhatsApp leaves off the image (a [cookie recipe](https://www.delish.com/cooking/recipe-ideas/a24883952/peanut-butter-blossoms-recipe/) with a 2.1M image) is now shown with the image, the og:title, and the site URL in the rich link preview. An older message still on my phone still just shows the link (no title or image). – Rich DeBourke Jan 26 '20 at 03:16
2

Hi guys, I have implemented all mandatory steps in this page to my website, but description and thumbnail of my website are not being displayed on WhatsApp. I created new thread to be able to provide details of my problem here: https://stackoverflow.com/questions/63094924/thumbnail-and-description-are-not-being-displayed-on-whatsapp-preview-link I really appreciate any help for my case, thank you. – Chrisma Daniel Jul 26 '20 at 05:39
1

@ChrismaDaniel have you thought about the fact that WhatsApp is caching your page? Maybe you should try a different page/url of your website. Maybe bitly'ing your url works (idk), try that if a different page of your website doesn't seem to be working. – Derk Jan Speelman Jul 27 '20 at 07:44
5

You can resolve the caching issue by changing your URL when you share or paste it. For example if your URL is https://www.test.com you can change it to https://www.test.com?cache. You can literally add anything to the URL, wait for a few seconds and the updated text will show up assuming all your meta tags are applied in the correct format. This worked for me. But organically I think it takes about 24 hours to change. – jaimish11 Aug 07 '20 at 11:13
it works for me in whatsapp without using the open graph protocol. – moshiah_now Nov 02 '20 at 10:43
Respecting the character limits on `og:title` and `og:description` made image sharing work on Whatsapp. Can you provide a reference for these numbers? – miguelmorin Dec 16 '20 at 19:29
It works fine on Whatsapp ... but it doesn't seem to work at all on Telegram. How do I fix it? Or am I wrong? – Pathros Mar 19 '21 at 02:39
1

@Pathros https://telegramgeeks.com/2016/03/you-can-update-link-preview-telegram/ – Derk Jan Speelman Apr 04 '21 at 09:10
1

@DerkJanSpeelman Indeed! That [bot](https://telegram.me/webpagebot) makes it work! – Pathros Apr 04 '21 at 17:49
how im gonna use this with android ?? – Mubashir Murtaza Jul 12 '21 at 06:09
@MubashirMurtaza what do you mean? Just download WhatsApp for Android and paste your url. – Derk Jan Speelman Jul 30 '21 at 08:18
@DerkJanSpeelman yeah that what i thought but i dont know why this thumbnail are not getting automatically in some of mobiles! – Mubashir Murtaza Aug 02 '21 at 05:01
@MubashirMurtaza I have no issues with it whatsoever. As far as I know it depends on WhatsApp's cache and the compatibility of your website. I don't know if WhatsApp disabled link previews on some mobile devices. – Derk Jan Speelman Aug 10 '21 at 12:49
i don't know but this link `https://dev.easy-card.co/ec/kkk` working on mobile and web whatsapp but not on whatsapp.exe on desktop, if you can help me than it will be helpful,thank you. – Femil Savaliya Dec 03 '21 at 15:47
I have a stand-alone self-contained HTML page, is it possible to add an image when sharing instead of showing it as a file ? If possible, can you share how I can approach that? – user5249203 Oct 02 '22 at 10:55

Cedriga · Answer 2 · 2019-05-18T20:37:19.593

29

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.

If the problem persists, read also the answer for this similar question

edited May 18 '19 at 20:37

answered Aug 27 '16 at 14:38

Cedriga

3,860
2
28
21

3

+1 for the size limit info but it's not correct. The Whatsapp app fetches the first 300.000 bytes (Http header: "Range: bytes=0-299999") – Adriano Tornatore Oct 12 '16 at 17:28
8

How do people know about the size limit of 300.000 bytes or 300kB (small k)? I searched for a source on the internet but could not find this size limit on the WhatsApp website or on the Open Graph Protocol website http://ogp.me/. – ʕ ᵔᴥᵔ ʔ May 24 '17 at 12:42
url_image needs to be https served – tito.icreativos May 16 '19 at 10:17

Alejandro Brasil · Answer 3 · 2016-04-03T16:56:26.677

17

I guess there is no white list in whatsapp, as I found a solution that worked for me. Do as follows. insert 3 meta tags:

<meta property="og:image" content="http://yourimage_with_complete_URL.png"/>  
<meta property="og:title" content="Your Title"/>  
<meta property="og:description" content="Your description."/>

Your image must be in .png format and 600x600px dimension and must be named 'logo-yoursite.png' (once it worked for me JUST LIKE THAT)

Dont forget to insert the link to whatsapp in your website:

<a href='whatsapp://send?text=Text to send withe message: http://www.yoursite.com'>whatsApp</a>

Do this and you'll be well done!

edited Apr 03 '16 at 16:56

answered Apr 03 '16 at 16:50

Alejandro Brasil

203
2
4

image not displaying for me , Do you have another solution ? – Keyur Shah Sep 13 '16 at 04:38
1

It's also possible with larger images! In [the answer](http://stackoverflow.com/questions/19778620/provide-a-picture-for-whatsapp-link-sharing/39182304#39182304) of [@Cedriga](http://stackoverflow.com/users/5784834/cedriga) says images can't be larger than 300kb, he's right. – Derk Jan Speelman Apr 01 '17 at 07:44
2

Its definitely not the name. And I can confirm that JPG works. – workwise Dec 30 '19 at 09:43
1

The link to whatsapp isn't what we're missing I believe and yes, as @workwise said, both PNG and JPG sure works. – aashima Jun 10 '20 at 12:41

score 13 · Answer 4 · edited May 15 '23 at 13:23

13

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.

edited May 15 '23 at 13:23

benjixinator

129
1
12

answered Dec 26 '16 at 17:04

GZone

171
1
6

Perfect answer for what i'm looking for This is very imp: `og:image : Image(JPG or PNG) of size less than 300KB and minimum dimension of 300 x 200 pixel is advised.` – Amol Feb 06 '17 at 12:26
These parameters are crucial and I think the focus should be on the og:image tag. The 300 KB size limit and the minimum 300px x 200px are recommended. Remember that the dimensions are in pixels. – aashima Jun 10 '20 at 12:45

score 12 · Answer 5 · answered Feb 24 '20 at 18:11

12

I would like to draw attention to the fact that a simple <meta property="og:image" content="image.png" />, as suggested somewhere above, does not work for me (this in fact had me in a loop for weeks now). What works is either an absolute URL:
<meta property="og:image" content="https://domainname.com/image.png" />

or starting out with a slash (if the image is in the root directory):
<meta property="og:image" content="/image.png" />

(I would have added this as a comment, but I'm not allowed to yet. Moderators feel free to move this if more appropriate.)

answered Feb 24 '20 at 18:11

Anna Kleiner

165
2
8

I think it best if one gives the qualified path than resorting to relative paths. The suggestion one in your answer worked for me. – aashima Jun 10 '20 at 12:47
I think you need to use .jpg image, .png image just won't work with whatsapp. – Andrew See Jul 05 '20 at 17:15

score 11 · Answer 6 · answered Apr 07 '20 at 11:27

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

<meta property="og:image" content="https://www.link.com/facebook.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />


<meta property="og:image" content="https://www.link.com/whatsapp.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="400" />

https://roei.stream/2018/11/18/ideal-open-graph-image-size-for-whatsapp-link-share/

https://css-tricks.com/essential-meta-tags-social-media/

score 10 · Answer 7 · edited Oct 30 '20 at 03:02

After looking through lot of answers and yet unable to fix the issue, I finally got it working after lot of iterations. Here is the exact code I used:

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

Upvoted for the links you provided at the end. They helped me understand that it was the WhatsApp cache that needed to be reset. — Jakob, Aug 17 '21 at 08:47

score 6 · Answer 8 · answered Dec 15 '16 at 18:41

I've been trying to do this myself as well and I've added all the right meta tags :

<meta property="og:image" itemprop="image" content="image_url" />
<meta property="og:image:url" itemprop="image" content="image_url" />
<meta property="og:image:type" content="image/png" />

but yet could not see the image when sharing my link within WhatsApp.

I've discovered that WhatsApp also does some kind of caching of the image and the url info, dont know for how long.

To check that I've inserted the correct tags, I just tried different url, for example : http://domain.com instead of http://www.domain.com .

hopefully this helps to someone else.

score 5 · Answer 9 · answered Apr 27 '18 at 14:34

5

After working in a bugg, found out that in IOS, elements in HEAD might stop the WhatsApp search of the og:image /og:description / name=description. So try first to put them on top of everything else.

This doesn't work

<head>
    <div id='hidden' style='display:none;'><img src="http://cdn.some.com/random.jpg"></div>

    <meta property="og:description" content="description" />
    <meta property="og:image" content="http://cdn.some.com/random.jpg" />
</head>

This work:

    <head>
        <meta property="og:description" content="description" />
        <meta property="og:image" content="http://cdn.some.com/random.jpg" />

        <div id='hidden' style='display:none;'><img src="http://cdn.some.com/random.jpg"></div>
    </head>

answered Apr 27 '18 at 14:34

Kim Sant

386
4
7

My 2 cents and I hope this helps someone. For my case it is `twitter:image` being empty, disabling WhatsApp from getting `og:image`. Trying deleting other `` tags could help debugging social sharing functions. – Sunny Pun Oct 29 '18 at 09:49
I guess whatsapp is reading up to bottom, and stop after something unexpected is found (div, empty twitter:image). The idea here was to tell people to put meta `og:image` on top, and assure it is read – Kim Sant Oct 29 '18 at 12:15
9

Why would you be placing a
in the section?
– Tomas Gonzalez Dec 19 '19 at 01:31
I worked for a company that scrapes and "reshape" your content web with nice UX, SEO etc. If you scrape the head from the client and add just the og: metadata below it doesn't work. I enjoyed to do mental reverse engineering of how whatsapp process HTML, not any more doing any debugging yala yala yala! – Kim Sant Feb 20 '20 at 11:18
how we can sent this using intent? – Mubashir Murtaza Jul 09 '21 at 06:17
It's reasonable for a browser to stop parsing `` after it encounters an inappropriate tag. https://stackoverflow.com/a/26088698/446106 . Experimenting in https://validator.w3.org/nu/#textarea suggests that as soon as the validator encounters a `
`, it progresses from `` into the ``.
– mwfearnley Sep 28 '22 at 10:23

score 5 · Answer 10 · answered Jan 03 '19 at 19:11

5

I'd recommend always have a look at https://developers.facebook.com/tools/debug/sharing to validate your properties as Facebook often changes it's policies, compliances and API.

If you work with Messenger bots or other FB apps, you may need the property fb:app_id for link images to work in Whatsapp. More at Facebook developers webmasters site. https://developers.facebook.com/docs/sharing/webmasters

answered Jan 03 '19 at 19:11

Braconnot_P

181
3
8

Many people use Yoast SEO in Wordpress. It adds og:image on posts only if you add the facebook image in the Yoast SEO tab on each post. – Braconnot_P Jan 09 '19 at 18:06

Nocturnal Storyteller · Answer 11 · 2020-06-10T13:03:05.617

I attempted several suggestions under this thread and from my external searches but it was a whole other problem for me. My specific instruction to use an image indicated by the og:image tag was being overridden by the open graph tags supplied by the Jetpack plugin. you can find my detailed answer here. However, I thought it worth to add the steps in brief on this more-followed thread. Hope this helps someone.

The Facebook Sharing Debugger helped me identify the root cause and from there, I followed these steps:

Debug your website using the debugger above. Simply type in the URL and hit debug. This should give you a list of warnings and once you scroll down to the open graph tags sections, you will be able to see the values that are being fetched for your website. The one to focus on is the og:image tag.
Scroll further down to the "See exactly what our scraper sees for your URL" link and search for the og:image tag to find the villain in your story.
Now simply, opt the means to remove an override that is occurring. In my case, I found the following function helpful. It changes the default image used any time Jetpack can not determine an image to use.

It changes the default image used any time Jetpack can not determine an image to use

function custom_jetpack_default_image() {
    return 'YOUR_IMAGE_URL';
}
add_filter( 'jetpack_open_graph_image_default', 'custom_jetpack_default_image' );

I should add that the image parameters such as minimum 300px x 200px and size < 300 KB are recommended. And please follow these instructions if such general instructions do not work for you, because, then it is most likely that your issue is similar to mine. Also, sometimes the simplest solution may just be to remove the plugin (provided you verify that you can do without it).

At the end you should be able to see something like -

Hope this helps.

NS

score 4 · Answer 12 · answered Jun 10 '20 at 13:00

I would like to add an answer to this thread to specifically mention which of the above threads helped me solve the issue and the order in which they can be followed to properly understand the root cause and fix it once and for all:

I was able to get my rich preview while sharing the link on social media with this solution.

I followed various options in this thread and below are the closest to the right answer and they all contributed to the end result:

Tags required (Main tag to focus on - og:image)
Image parameters
Tool that will definitely help
How to correctly give the image path
Root cause and solution

This will hopefully save someone the time needed to scroll through and find the right set of answers and the effort required for all the trial and errors.

score 3 · Answer 13 · answered Nov 26 '16 at 17:42

I had the same problem, here is to solve.

It should be show up if you add meta og:image

The problem is whatsapp would not show image if you type without http:// and end with / For example, it show up image and description if you type http://google.com/ but not with google.com

Hope it helps someone.

score 3 · Answer 14 · answered Nov 16 '20 at 07:58

Adding my 2 cents on this topic after loosing 4h.

I'm coding a vue app that's compiled with webpack. By default Webpack minifies the HTML, and does it like a butcher. It removes the double quotes from many attributes.

And Whatsapp hates that ! It just skips field not properly formated with quotes around attributes' values.

Turn off the minifaction of your index and things will be fine !

Here's how with Vue-CLI, add this on the vue.config.js file :

    module.exports = {
      chainWebpack: config => {
        config.plugin('html')
          .tap(args => {
            args[0].minify = false
            return args
          })
      }

from : https://github.com/vuejs/vue-cli/issues/4328#issuecomment-595682922

score 2 · Answer 15 · answered Aug 02 '19 at 00:45

You need the following tags to get a WhatsApp image preview:

<meta property="og:title" content="Website name" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://url.com/" />
<meta property="og:description" content="Website description" />
<meta property="og:image" content="image.png" />
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="600" />

As Facebook docs says, if you specify the og:image size it will be fetched fastly instead of asynchronously otherwise.

PNG is recommended for image format. 600x600 pixels at least is recommended.

In my case I have 1200*628 pixels of image that means I have to provide like ` ` Am I right? Do we need to give width and height of image(that image has) in tags or else for whatever the image pilxels would If we mention width and height in meta tags It will display in that dimensions? Please clarify @moreirapontocom — Siluveru Kiran Kumar, Dec 08 '19 at 07:42

score 2 · Answer 16 · answered Aug 09 '20 at 03:42

Since at this point this question is almost a support group for people who suffer with various reasons on why WhatsApp wouldn't load the image preview, here's what was the root cause for my case, hoping it may help someone eventually:

Make sure the meta tag `og:image` content link is using HTTPS

When I made my website available through https, I forgot to specifically change the meta tags from http to https. Every other social media preview handled the image regardless, except for WhatsApp.

Simply making it https fixed it for me.

score 1 · Answer 17 · answered Nov 04 '13 at 22:36

1

If you want to have a picture next to an url from your website someone shared on WhatsApp, you have to put a metatag on the page where the URL links to, like this:

<meta property="og:image" content="http://unrestrictedstock.com/wp-content/uploads/Unrestricted-Stock-Small.png"/>

answered Nov 04 '13 at 22:36

maxdaniel98

6,623
6
19
21

4

Hi! I've tried this, and works prefect with Facebook's URL debugger, however whatsapp message still doesn't show my thumnail. Here is somebody else, who has the same problem: http://stackoverflow.com/questions/25100917/my-ogimage-meta-tag-doesnt-run-on-whatsapp – Lepi Nov 05 '14 at 10:50
1

@AkhilSekharan the correct answer can be found here: http://stackoverflow.com/a/32154775/501206 – stevenw00 Sep 11 '15 at 07:08
1

Thanks steve. I've tried that way already and came to a conclusion that WhatsApp has an internal Whitelist of domains that can show the thumbnail. For example youtube – Akhil Sekharan Sep 11 '15 at 07:52
3

I came to same conclusion...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:10
1

image not displaying for me , can any one have solution @Juanjo – Keyur Shah Sep 13 '16 at 04:39

score 1 · Answer 18 · answered Apr 22 '19 at 14:44

1

Following actions helped in my case.

Putting image under the same host.

<meta property="og:url" content="https://www.same-host.com/whatsapp-image.png" />

Passing needed image to WhatsApp specifically by detecting its user agent by leading substring, example

WhatsApp/2.18.380 A

Waiting few seconds before actually pushing send button, so WhatsApp will have time to retrieve image and description from og metadata.

answered Apr 22 '19 at 14:44

Adam

1,796
18
19

1

If I type URL and wait for some time then it will be getting the preview after that If I hit the send button then it is showing, If I type URL and hit send button **without any delay (before fetching the meta tags information)** then the preview is not showing. – Siluveru Kiran Kumar Dec 08 '19 at 10:14

score 1 · Answer 19 · answered Jan 22 '21 at 10:59

In case someone is looking for a way to display preview using WhatsApp API, With including the image in your meta tags on your website you would need to set the preview_url=true.

Sending URLs in Text Messages

By default, the mobile WhatsApp application recognizes URLs and makes them clickable. To include a URL preview, include "preview_url": true in the message body and make sure the URL begins with http:// or https://. A hostname is required, IP addresses are not matched.

The majority of the time when you send a URL, whether with a preview or not, the receiver of the message will see a URL that they can click on.

URL previews will only be rendered after one of the following has happened:

The business has sent a message template to the user.
The userinitiates a conversation with a "click to chat" link.
The user adds the business phone number to their address book and initiates a conversation.

score 0 · Answer 20 · answered Jun 07 '17 at 18:08

0

Had same issue, added og:image and it didn't work while the url end with slash sign (/). After removing the slash from the URL - the image get loaded.. Interesting bug...

answered Jun 07 '17 at 18:08

Yedidia

969
7
12

score 0 · Answer 21 · answered Jun 21 '19 at 06:30

Even after these tries. My website images were fetched some times and sometimes not. After validating with https://developers.facebook.com/tools/debug/sharing

realised that my django (python) framework is rendering the image path relatively. I had to make changes to the path of the image with full url. (including http://). then it started working

score 0 · Answer 22 · answered Sep 27 '20 at 15:41

In our case, the issue was that the og:image URL did not include a file extension (.jpg). We are using Cloudinary, and in their case file extensions in the image URLs are not required.

Once we added the .jpg to the image URL, the image started showing up in the Whatsapp previews.

score 0 · Answer 23 · answered Mar 03 '23 at 22:04

If you don't want to worry about adding OG tags and already use Firebase, you can let firebase dynamic links (or similar service) does the work for you.

Simply set the image's URL to the socialMetaTagParameters of the Firebase DynamicLinkComponents:

linkBuilder.socialMetaTagParameters = DynamicLinkSocialMetaTagParameters()
linkBuilder.socialMetaTagParameters.title = "Example of a Dynamic Link Title"
linkBuilder.socialMetaTagParameters.descriptionText = "Example of a Dynamic Link descriptionText"
linkBuilder.socialMetaTagParameters.imageURL = "https://www.example.com/my-image.jpg"

Now pass the the created firebase dynamic link to the UIActivityController along with the text you want to share as you usually do. This will display the image in whatsapp using whatsapp's link preview feature along side the passed text.

You can choose to shorten the URL.

Check the firebase documentation for more info.

screenshot example

Provide an image for WhatsApp link sharing

23 Answers23

2020 standards

Make sure the meta tag `og:image` content link is using HTTPS

Linked

Related

Provide an image for WhatsApp link sharing

23 Answers23

2020 standards

Make sure the meta tag og:image content link is using HTTPS

Linked

Related

Make sure the meta tag `og:image` content link is using HTTPS