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?

Answer 1

2018 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 ogp.me - but make sure to read steps 1 - 6 in this answer to get the best WhatsApp preview.

---

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 your 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) of size less than 300KB and minimum dimension of 300 x 200 pixel is advised

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

---

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.

Answer 2

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!

Answer 3

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.

Answer 4

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

Answer 5

I had the same issue and the problem was the size of the picture. Whatsapp don'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

Answer 6

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.