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 ogp.me
- but make sure to read steps 1 - 6 in this answer to get the best WhatsApp preview.
Please note: some apps or websites use cache or even store the website preview to 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
your keyword rich title of the website and/or webpage
Step 2: description
Maximum of 155 characters
Step 3: og:title
Maximum 35 characters
Step 4: og:url
Full link to the current webpage address
Step 5: og:description
Maximum 65 characters
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.
@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.
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.
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.
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