Menu
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 Open Graph (ogp.me) - but make sure to read steps 1 - 6 in this answer to get the best WhatsApp preview.
Results of many tech audits by different companies show having Open Graph tags won’t help you get a better SEO ranking, they are only for social media. schema.org's data structures will help you with SEO.
These Open Graph <meta> tags go inside the <head> tag.
Please note: @jaimish11 mentioned some apps or websites use cache or even store the website preview in their database. This means when you're testing your link in WhatsApp or Facebook for example, you'll most likely not see any difference right away. Using another link (another page) will do the trick. But as soon as you use that link once, this "please note" section starts all over again.
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 the current 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) with a size less than 300KB and minimum dimensions of 300 x 200 *. This image should be served via a HTTPS connection with a valid non-self-signed certificate.**
<meta property="og:image" content="//cdn.example.com/uploads/images/webpage_300x200.png">
* @RichDeBourke mentioned this to me, but apparently WhatsApp has increased its maximum image size (dimensions as well as file size). I did some tests: it does not work consistently every time on every device. I tested 2.x Mb images and even that seemed to work 9/10 times. <300KB is the safest approach, but you should be fine using larger images as of 18-02-2020. I would recommend keeping the file size below 2MB, though. And definitely throw your image through TinyPNG or any other image compression algorithm if you haven't already.
** @Indraraj mentioned the image may not show up if your site runs on https with a self-signed certificate.
If you completed the steps above, you can now see your preview in WhatsApp! However, be aware of the "please note" section above.
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. And of course WhatsApp has this option as well: when you share an Instagram or Youtube link, the WhatsApp preview comes with the in-app video player.
Super bonus step 13: products, persons, movies etc.
This kind of information really depends on the provider (Facebook, Google). I don't know when, but WhatsApp and Twitter could enable support for products. This way, the persons you share the link with, might see the price, average review score in the shared link "widget". That would be nice. This already exists for business accounts who have their Catalog up-to-date in their WhatsApp Business app, but this is totally different than link sharing.
I had the same issue and the problem was the size of the picture. Whatsapp doesn'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
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!
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.
I would like to draw attention to the fact that a simple <meta property="og:image" content="image.png" />, as suggested somewhere above, does not work for me (this in fact had me in a loop for weeks now). What works is either an absolute URL:<meta property="og:image" content="https://domainname.com/image.png" />
or starting out with a slash (if the image is in the root directory):<meta property="og:image" content="/image.png" />
(I would have added this as a comment, but I'm not allowed to yet. Moderators feel free to move this if more appropriate.)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With