Provide an image for WhatsApp link sharing

Asked 4/11, 2013 at 22:36 Answered 24/2 at 12:50

Solved html meta-tags whatsapp facebook-opengraph

348

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

Magellan answered 4/11, 2013 at 22:36 Comment(2)

You can test your pages' dom on iframely.com/embed – Manchu 18/6, 2019 at 12:37

Test how Facebook renders it: developers.facebook.com/tools/debug – Statement 15/5, 2020 at 10:10

666

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.

Definitely answered 1/4, 2017 at 8:20 Comment(36)

Note that It may not work if your site runs on https with self signed certificate. Verified on Facebook and whatsapp – Conformity 9/7, 2017 at 7:21

@Conformity thanks for sharing, this can also be found in the docs of Facebook for developers – Definitely 9/7, 2017 at 9:48

@Conformity can you please tell how to do this in a web site with https with self signed certificate – Stepdaughter 6/9, 2017 at 6:5

Doesn't it work for you? I have https on all my websites and they work just fine – Definitely 6/9, 2017 at 6:11

@DerkJanSpeelman now it's working fine. thank you. i forgot to keep the image dimension as 300*200. – Stepdaughter 6/9, 2017 at 7:4

@DerkJanSpeelman I don't understand, this site: jornada.unam.mx/ultimas/2018/06/19/… has more than 35 characters and the image preview is working. where can I find the correct specification? – Tendril 19/6, 2018 at 16:26

@Tendril 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. – Definitely 19/6, 2018 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. – Foretoken 28/6, 2018 at 6:48

@MittalPatel that's what my answer says as well – Definitely 28/6, 2018 at 8:42

I want to do this for file preview too. Like doc, pdf, ppt etc...is there any way? – Criminology 21/9, 2018 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. – Definitely 21/9, 2018 at 14:43

There has to be a way. Whatsapp is using it – Criminology 21/9, 2018 at 18:0

@VidorVistrom maybe I can help you if you post a question with some more information – Definitely 22/9, 2018 at 22:18

Whatsapp need the url to the images be https, that was the problema in my case – Inefficacy 16/5, 2019 at 10:17

@Inefficacy you always need to use https. – Definitely 17/5, 2019 at 11:21

having mixed http content inside of an https enabled page will affect this too – Randy 28/8, 2019 at 20:10

Yeah never mix protocols. I tried mixing TCP and UDP, can't do it without a proxy. – Definitely 29/8, 2019 at 7:9

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 ? – Rupture 11/9, 2019 at 12:49

@TomaTomov I assume you've read the Please note section in my answer? – Definitely 11/9, 2019 at 15:41

Yes. I red it :) It works fine now. Just though that I can flush whatsapp cache somehow. Thank you very much! – Rupture 11/9, 2019 at 17:4

@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 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). – Geber 26/1, 2020 at 3:16

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: #63095424 I really appreciate any help for my case, thank you. – Downthrow 26/7, 2020 at 5:39

@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. – Definitely 27/7, 2020 at 7:44

You can resolve the caching issue by changing your URL when you share or paste it. For example if your URL is test.com you can change it to 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. – Unravel 7/8, 2020 at 11:13

it works for me in whatsapp without using the open graph protocol. – Yclept 2/11, 2020 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? – Machine 16/12, 2020 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? – Greenlee 19/3, 2021 at 2:39

@Greenlee telegramgeeks.com/2016/03/you-can-update-link-preview-telegram – Definitely 4/4, 2021 at 9:10

@DerkJanSpeelman Indeed! That bot makes it work! – Greenlee 4/4, 2021 at 17:49

how im gonna use this with android ?? – Jarmon 12/7, 2021 at 6:9

@MubashirMurtaza what do you mean? Just download WhatsApp for Android and paste your url. – Definitely 30/7, 2021 at 8:18

@DerkJanSpeelman yeah that what i thought but i dont know why this thumbnail are not getting automatically in some of mobiles! – Jarmon 2/8, 2021 at 5:1

@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. – Definitely 10/8, 2021 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. – Lingerie 3/12, 2021 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? – Astaire 2/10, 2022 at 10:55

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

Faceharden answered 27/8, 2016 at 14:38 Comment(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") – Croatian 12/10, 2016 at 17:28

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 ogp.me. – Expunction 24/5, 2017 at 12:42

url_image needs to be https served – Inefficacy 16/5, 2019 at 10: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!

Mores answered 3/4, 2016 at 16:50 Comment(4)

image not displaying for me , Do you have another solution ? – Joviality 13/9, 2016 at 4:38

It's also possible with larger images! In the answer of @Cedriga says images can't be larger than 300kb, he's right. – Definitely 1/4, 2017 at 7:44

Its definitely not the name. And I can confirm that JPG works. – Nathalia 30/12, 2019 at 9:43

The link to whatsapp isn't what we're missing I believe and yes, as @Nathalia said, both PNG and JPG sure works. – Bavaria 10/6, 2020 at 12:41

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.

Bannister answered 26/12, 2016 at 17:4 Comment(2)

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. – Firewood 6/2, 2017 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. – Bavaria 10/6, 2020 at 12:45

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

Eruct answered 24/2, 2020 at 18:11 Comment(2)

I think it best if one gives the qualified path than resorting to relative paths. The suggestion one in your answer worked for me. – Bavaria 10/6, 2020 at 12:47

I think you need to use .jpg image, .png image just won't work with whatsapp. – Rationality 5/7, 2020 at 17:15

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/

Esse answered 7/4, 2020 at 11:27 Comment(0)

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

Anastasio answered 30/10, 2020 at 2:57 Comment(2)

Upvoted for the links you provided at the end. They helped me understand that it was the WhatsApp cache that needed to be reset. – Pratique 17/8, 2021 at 8:47

works well for whats app but not for telegram – Veneration 12/12, 2022 at 5:25

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.

Eddo answered 15/12, 2016 at 18:41 Comment(0)

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>

Vaporizer answered 27/4, 2018 at 14:34 Comment(6)

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 <meta> tags could help debugging social sharing functions. – Zoosporangium 29/10, 2018 at 9: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 – Vaporizer 29/10, 2018 at 12:15

Why would you be placing a <div> in the <head> section? – Hyperboloid 19/12, 2019 at 1: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! – Vaporizer 20/2, 2020 at 11:18

how we can sent this using intent? – Jarmon 9/7, 2021 at 6:17

It's reasonable for a browser to stop parsing <head> after it encounters an inappropriate tag. https://mcmap.net/q/94155/-placing-a-div-in-lt-head-gt . Experimenting in validator.w3.org/nu/#textarea suggests that as soon as the validator encounters a <div>, it progresses from <head> into the <body>. – Roband 28/9, 2022 at 10:23

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

Dasher answered 3/1, 2019 at 19:11 Comment(1)

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. – Dasher 9/1, 2019 at 18:6

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.

Internist answered 10/6, 2020 at 12:32 Comment(0)

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.

Bavaria answered 10/6, 2020 at 13:0 Comment(0)

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.

Astatine answered 26/11, 2016 at 17:42 Comment(0)

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

Cracknel answered 16/11, 2020 at 7:58 Comment(0)

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.

Ratiocination answered 2/8, 2019 at 0:45 Comment(1)

In my case I have 1200*628 pixels of image that means I have to provide like <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="628" /> 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 @Ratiocination – Lorrianelorrie 8/12, 2019 at 7: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.

Ruffo answered 9/8, 2020 at 3:42 Comment(0)

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"/>

Magellan answered 4/11, 2013 at 22:36 Comment(5)

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: #25101417 – Purlieu 5/11, 2014 at 10:50

@AkhilSekharan the correct answer can be found here: https://mcmap.net/q/94154/-showing-thumbnail-for-link-in-whatsapp-og-image-meta-tag-doesn-39-t-work – Tshirt 11/9, 2015 at 7:8

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 – Forereach 11/9, 2015 at 7:52

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? – Anaheim 1/5, 2016 at 9:10

image not displaying for me , can any one have solution @Anaheim – Joviality 13/9, 2016 at 4:39

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.

Celenacelene answered 22/4, 2019 at 14:44 Comment(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. – Lorrianelorrie 8/12, 2019 at 10:14

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.

Propositus answered 22/1, 2021 at 10:59 Comment(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...

Astronavigation answered 7/6, 2017 at 18:8 Comment(0)

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

Tensible answered 21/6, 2019 at 6:30 Comment(0)

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.

Countermark answered 27/9, 2020 at 15:41 Comment(0)

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

Quarterphase answered 3/3, 2023 at 22:4 Comment(0)

In addition to og:image, WhatsApp needs the following code:

<link rel="image_src" href="https://url_of_photo.png">

After spending hours by adding this code, my problem was solved!

Pittsburgh answered 24/2 at 12:50 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

2020 standards

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

Recommended topics

Hot tags

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