Whatsapp share link with image in websites
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:
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)
Tejaswini Dhatrak -
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
WDS -
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.
Komquest -
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
WDS -
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.