Sharing links with WhatsApp has become a great way to drive visitors into your sites. A nice feature when a link is shared is a little preview of the link’s content, with a title, short description and an image of the designated page. This data comes from scraping the link for Open Graph (OG) data. One of the tags allows you to put one or more images to be shown as the link image.
This tag is the
|
1 |
<meta property="og:image" content="https://www.link.com/image.png" /> |
Of course, this should be placed within the head section of your HTML code.
When a link is shared, WhatsApp goes to these tags and look for an image to show, and then tries to fit it to the small window.
Looking for the best image size to use for optimal visibility I couldn’t find any best practices for sharing with WhatsApp, only with Facebook. So after a bit of testing, I found that using Facebook recommended size of 1200 * 630 always gets cut, and should not be used.
I found that WhatsApp shows pictures of 90 * 90 in the web interface, and 140 * 140 in the Android version. So the best choice would be to use a square image, and I don’t recommend larger than 400px * 400px.
Using multiple og:image tags for a page
It is possible to add a few og:image tags, just put them in the code one after the other, like so:
|
1 2 3 4 5 6 7 8 9 10 |
<meta property="og:image" content="https://www.link.com/facebook.png" /> <meta property="og:image:type" content="image/png" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <meta property="og:image" content="https://www.link.com/whatsapp.png" /> <meta property="og:image:type" content="image/png" /> <meta property="og:image:width" content="400" /> <meta property="og:image:height" content="400" /> |
One thing to note is that WhatsApp takes the last og:image for its share…