WhatsApp Rich Snippet Preview: Provide Picture for Link Sharing

Decent Previews = Handsome Pageviews. Trust me! Optimizing your blog for Rich Previews can earn you a handsome number of additional pageviews.

What are WhatsApp Rich Previews?

When we share some website link in WhatsApp, we get a small preview of that webpage's content - usually a title, content summary and an image. These are called Rich Previews. You may wonder how WhatsApp generates such Previews. The required information is collected in realtime by visiting the website, and reading the meta tags from the source code of the page.

How to optimize your blog for Rich Previews?

The Rich Preview generated by Whatsapp should give the users an idea of what a link is about even before it’s opened. So it is best if we optimize our blog contents to help Whatsapp generate the best possible preview that attracts user clicks. But how do we do that?


Requirement Specifications

Do adhere to the maximum character limit to avoid the chance of getting clipped in Google's Rich Previews.
  1. Title : Add Keyword rich title to your webpage with maximum of 65 characters.
  2. Meta Description : Describe your web page in a maximum of 155 characters.
  3. og:title : Maximum 35 characters.
  4. og:url : Full link to your webpage address.
  5. og:description : Maximum 65 characters.
  6. og:image : Image(JPG or PNG) of size less than 300KB and minimum dimension of 300 x 200 pixel is advised.
  7. favicon : A small icon of dimensions 32 x 32 pixels. 

Code specific to other Websites 

You need to have these meta tags in the <head> section of your HTML.
  1. Title : <title>Rich Link Preview</title> 
  2. Meta description : <meta name=”description” content=”Want rich website previews?” /> 
  3. og:title : <meta property=”og:title” content=”Rich Link Preview” /> 
  4. og:url : <meta property=”og:url” content=”http://example.com/" /> 
  5. og:description : <meta property=”og:description” content=”Want these rich previews?” /> 
  6. og: image : <meta property=”og:image” content=”http://example.com/richpreview.jpg" /> 
  7. favicon : <link rel=”shortcut icon” href=”http://example.com/logo.ico" type=”image/x-icon” />

Code specific to Blogger blog 

Check if these tags are in place. If not, include these tags in the <head> section of your template wherever necessary.
  1. Title : <title><data:blog.pageName/></title> 
  2. Meta description : <meta expr:content='data:post.snippet' name='description'/> 
  3. og:title : <meta expr:content='data:blog.pageTitle' property='og:title'/> 
  4. og:url : <meta expr:content='data:blog.canonicalUrl' property='og:url'/> 
  5. og:description : <meta expr:content='data:blog.metaDescription' property='og:description'/>
  6. og: image : <meta expr:content='data:blog.postImageUrl' property='og:image'/>
  7. Steps to setup FavIcon for Blogger Blog
  • * Choose a square image (usually brand/blog logo is chosen) less than 100 KB.
  • * Log in to your Blogger's Dashboard.
  • * Go to the Layout.
  • * Click on the Favicon Edit link. 
  • * Now hit "Choose File" button.
  • * Press the Save Option. 
You are done. WhatsApp may take a little time( few days to few weeks) to Whitelist your blog/website. After that you can share your Blog link, just like a Boss.

You may like these posts