While sharing a website link in whatsapp, have you ever wondered how it shows rich preview of the page with a image and description?? This is because When you try to share a link in whatsapp, it reads "Open Graph" meta tags present in the link and creates a preview with link,image and description similar to this one:

whatsapp share link with image


How to share link with image in whatsapp?
Basically you need four OG (Open Graph) meta tags in the  <head>  section of your webpage. The four OG meta tags gives the informaton to whatsapp about title ,description,url and image of your webpage. The four tags are og:title, og:description, og:url, og:image. Below example shows how to implement these tags.

<html>
<head>
<meta property="og:title" content="How to change the address bar color in Chrome, Firefox, Opera, Safari" />
<meta property="og:description" content="How to change the address bar color in Chrome, Firefox, Opera, Safari" />
<meta property="og:url" content="http://webdevelopmentscripts.com/64-how-to-change-the-address-bar-color-in-chrome-firefox-opera-safari" />
<meta property="og:image" content="http://webdevelopmentscripts.com/post-images/685b-change-browser-address-bar-color-chrome-android.jpeg" />
</head>
</html>
Make sure the image given in the tag are in reasonable size. Image given in the above example is 200x266 size, Basically 256x256 size images works without any issues. That's it, You're done. Put these tags in your head section of the webpage and try to share the page, you will see that preview.

 


Comments (32)
  1. Image
    Mohamad - Reply

    October 29, 2020

    if the size of image is biggest , what we should increase?

    • Image
      WDS - Reply

      December 19, 2020

      I guess we have to keep a standard size of image for this purpose otherwise it may not work.

  2. Image
    ISRAEL NGOWI - Reply

    October 28, 2020

    were is that button because i see only meta tags

    • Image
      wds - Reply

      December 19, 2020

      When you paste the url inside whatsapp message area, watsapp will automatically crawl and renders thumbnail and shows description as shown in the guide. The meta tags are used to tell the watsapp which image should be rendered as thumbnail and preview content.

    • Image
      WDS - Reply

      December 19, 2020

      Is the image exists? are you able to see the image directly in the browser?

  3. Image
    Aditya - Reply

    September 03, 2020

    How to give a link in my website to share something on other platforms ( WhatsApp & Facebook) ?

  4. Image
    Abhijeet Kharat - Reply

    July 01, 2020

    can i share only image and not its link from website to whats app. please help on this.

  5. Image
    Ishan Lalwani - Reply

    June 10, 2020

    Bro I tried all these tags working fine for Facebook but image thumbnail is not getting displayed in Whatsapp. Image size etc is fine. Not sure what to do?

    • Image
      wds - Reply

      December 19, 2020

      Are you still experiencing the issue?

    • Image
      Ishan Lalwani - Reply

      December 20, 2020

      No, I switched to WordPress org, it got resolved, thanks mate :)

  6. Image
    Sanchita - Reply

    May 20, 2020

    no thumbnail image when i share a link on whatsapp... image show on all sites but not on whatsapp.

  7. Image
    Felix Meyburgh - Reply

    March 11, 2020

    Can you alter this WhatsApp link to send a picture the size of width: 320px; height: 577px and text including links, all three items sourced from a server?

  8. Image
    Ved - Reply

    February 07, 2020

    When i am sharing link of my website in whatsapp it is showing some coding intead of description. When i try in other platform it works fine!

  9. Image
    Srin - Reply

    January 11, 2020

    Webpage means? Where I put this code. Edit Theme section?

  10. Image
    Mansi Patole - Reply

    October 04, 2019

    i wrote ll the meta tags yet it is not displaying image

  11. Image
    Ganesh - Reply

    September 30, 2019

    i clicked ad on your page, because your content help me.

  12. Image
    Naveen kumar - Reply

    April 13, 2019

    Hi, meta tags are ok. Can you give me the share button code from the website. The button which we click to share on whatsapp.

  13. Image
    Ruchi - Reply

    February 15, 2019

    Hiii I have done the same process but it is not working only containing share image not share

  14. Image
    Navya - Reply

    February 12, 2019

    When i am put this code in my php file its not working, but its working fine with html file.

  15. Image
    Rutuja kachate - Reply

    January 25, 2019

    Hii,I try all meta type but in my webpage share page by whatsapp not add image link preiview please help me

  16. Image
    Utkarsh Joshi - Reply

    January 09, 2019

    Hi, can you tell how to embedd a share button for whatsapp below a blog post.

  17. Image
    Sumit - Reply

    October 29, 2018

    I am sorry admin, its working perfect. Was the issue with image dimensions, I guess. Thanks.

  18. Image
    Sumit - Reply

    October 29, 2018

    Hi, I am implementing the og tags as explained but the preview is still not working for me. Can anybody help please? The comment here is not allowing me to share url of the website where I implemented. Thanks.

    • Image
      wds - Reply

      December 19, 2020

      Sorry for the delayed reply. Hope you fixed it, right?

  19. Image
    Kanniyappan - Reply

    April 06, 2018

    I tried above code it is working like automatically taking image value in given website link, but for me , i want to give URL path and from there which image is there i have to send to whatsapp, how can achieve this

  20. Image
    Tejaswini Dhatrak - Reply

    June 01, 2017

    i have done this but when we share using facebook we need to mention the facebook app_id and it will go to the facebook but for whats app share how i can move to the whats app app when clicking on whats app share

    • Image
      WDS - Reply

      June 20, 2017

      You do not todo anything, when you click whatsapp share button in your mobile and if you have above mentioned tags in your page, whatsapp automatically detects and creates a thumbnail like the one shown above. Thats it, no need to have app_id and all. If you could not understand reply again.

  21. Image
    Komquest - Reply

    April 08, 2017

    Hi, can you tell anchor tag goes with image. i tried image tag inside anchor tag but its not displaying in whatsapp share

    • Image
      WDS - Reply

      April 08, 2017

      You do not need anchor tags.. This image is shown along with the text when user choose watsapp share button in the mobile browser. The image should be 256*256 or 200 as mentioned in the article and it should placed within the meta tags as said above article. Hope it helps u.

Leave a Comment

loader Posting your comment...