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 (4)
  1. 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.

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