Provide an image for WhatsApp link sharing

html meta-tags whatsapp facebook-opengraph

399,378

Solution 1

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.

Solution 2

I had the same issue and the problem was the size of the picture. Whatsapp doesn't support picture with a size greater than 300KB.

So the most important property to display image on Whatsapp is:

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

And the size of the image to display must be less than 300KB.

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

Solution 3

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!

Solution 4

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.

Solution 5

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

View more solutions

399,378

maxdaniel98

Hobbyist programmer that now works in video

Updated on February 21, 2022

Comments

maxdaniel98 over 2 years

How can we include an image in our website to display in WhatsApp when we share a link like this?
- Piotr Kowalski about 5 years
  
  You can test your pages' dom on iframely.com/embed
- Noam about 4 years
  
  Test how Facebook renders it: developers.facebook.com/tools/debug
Lepi over 9 years

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: stackoverflow.com/questions/25100917/…
stevenw00 almost 9 years

@AkhilSekharan the correct answer can be found here: stackoverflow.com/a/32154775/501206
Akhil Sekharan almost 9 years

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
Juanjo about 8 years

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?
Keyur Shah almost 8 years

image not displaying for me , Do you have another solution ?
Keyur Shah almost 8 years

image not displaying for me , can any one have solution @Juanjo
Adriano Tornatore over 7 years

+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")
Amol over 7 years

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.
Derk Jan Speelman about 7 years

It's also possible with larger images! In the answer of @Cedriga says images can't be larger than 300kb, he's right.
ʕ ᵔᴥᵔ ʔ about 7 years

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.
Indraraj almost 7 years

Note that It may not work if your site runs on https with self signed certificate. Verified on Facebook and whatsapp
Derk Jan Speelman almost 7 years

@Indraraj thanks for sharing, this can also be found in the docs of Facebook for developers
BALU K B almost 7 years

@Indraraj can you please tell how to do this in a web site with https with self signed certificate
Derk Jan Speelman almost 7 years

Doesn't it work for you? I have https on all my websites and they work just fine
BALU K B almost 7 years

<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title></title> <meta name="description" content=""> <meta property="og:title" content="" /> <meta property="og:url" content="" /> <meta property="og:description" content=""> <meta property="og:image" content="mappointer.png"> <meta property="og:image:width" content="" /> <meta property="og:image:height" content="" /> i put all the above tag.but still not showing the image
BALU K B almost 7 years

@DerkJanSpeelman now it's working fine. thank you. i forgot to keep the image dimension as 300*200.
elios264 about 6 years

@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?
Derk Jan Speelman about 6 years

@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.
Mittal Patel almost 6 years

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.
Derk Jan Speelman almost 6 years

@MittalPatel that's what my answer says as well
Pushan Gupta almost 6 years

I want to do this for file preview too. Like doc, pdf, ppt etc...is there any way?
Derk Jan Speelman almost 6 years

@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.
Pushan Gupta almost 6 years

There has to be a way. Whatsapp is using it
Derk Jan Speelman almost 6 years

@VidorVistrom maybe I can help you if you post a question with some more information
Sunny Pun over 5 years

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.
Kim Sant over 5 years

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
Abhishek Kumbhani over 5 years

Working fine for me.. Thanks!
Braconnot_P over 5 years

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.
tito.icreativos about 5 years

Whatsapp need the url to the images be https, that was the problema in my case
tito.icreativos about 5 years

url_image needs to be https served
Derk Jan Speelman about 5 years

@tito.icreativos you always need to use https.
Jonathan DS almost 5 years

having mixed http content inside of an https enabled page will affect this too
Derk Jan Speelman almost 5 years

Yeah never mix protocols. I tried mixing TCP and UDP, can't do it without a proxy.
Toma Tomov almost 5 years

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 ?
Derk Jan Speelman almost 5 years

@TomaTomov I assume you've read the Please note section in my answer?
Toma Tomov almost 5 years

Yes. I red it :) It works fine now. Just though that I can flush whatsapp cache somehow. Thank you very much!
Siluveru Kiran Kumar over 4 years

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 @moreirapontocom
Siluveru Kiran Kumar over 4 years

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.
Tomas Gonzalez over 4 years

Why would you be placing a <div> in the <head> section?
workwise over 4 years

Its definitely not the name. And I can confirm that JPG works.
Rich DeBourke over 4 years

@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).
Kim Sant over 4 years

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!
aashima about 4 years

The link to whatsapp isn't what we're missing I believe and yes, as @workwise said, both PNG and JPG sure works.
aashima about 4 years

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 about 4 years

I think it best if one gives the qualified path than resorting to relative paths. The suggestion one in your answer worked for me.
Andrew See almost 4 years

I think you need to use .jpg image, .png image just won't work with whatsapp.
Chrisma Daniel almost 4 years

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: stackoverflow.com/questions/63094924/… I really appreciate any help for my case, thank you.
Derk Jan Speelman almost 4 years

@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.
jaimish11 almost 4 years

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.
moshiah_now over 3 years

it works for me in whatsapp without using the open graph protocol.
miguelmorin over 3 years

Respecting the character limits on og:title and og:description made image sharing work on Whatsapp. Can you provide a reference for these numbers?
Jean Hoffmann over 3 years

Nice! Thanks a lot!
Pathros over 3 years

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?
Derk Jan Speelman about 3 years

@Pathros telegramgeeks.com/2016/03/you-can-update-link-preview-telegr‌am
Pathros about 3 years

@DerkJanSpeelman Indeed! That bot makes it work!
Mubashir Murtaza almost 3 years

how we can sent this using intent?
Mubashir Murtaza almost 3 years

how im gonna use this with android ??
Derk Jan Speelman almost 3 years

@MubashirMurtaza what do you mean? Just download WhatsApp for Android and paste your url.
Mubashir Murtaza almost 3 years

@DerkJanSpeelman yeah that what i thought but i dont know why this thumbnail are not getting automatically in some of mobiles!
Derk Jan Speelman almost 3 years

@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.
Jakob almost 3 years

Upvoted for the links you provided at the end. They helped me understand that it was the WhatsApp cache that needed to be reset.
Femil Savaliya over 2 years

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.