How to optimize your site for Rich Previews
You probably have seen them already, when you send a website link in chat apps like WhatsApp or Skype, a small website preview will appear:
These things are called Rich Previews, and they are usually generated realtime by visiting your website, and reading your meta tags from the HTML source of your page.
Quickly want to check your website? Go to richpreview.com!
Required meta tags
To optimize your website for Rich Previews, in general, these (meta) tags need to be in place:
- Title : a title should be maximum 65 characters or else will be clipped in the Google results
- Meta description : a meta description should be maximum 155 characters or else will be clipped in the Google results
- og:title : should be maximum 35 characters or else will be clipped in the Rich Preview
- og:description : should be maximum 65 characters or else will be clipped in the Rich Preview
- og:url : the full link to your website address
- og: image : a JPG or PNG image, minimum dimensions of 300 x 200 pixels are advised
- favicon : a small icon, this can be your logo and is usually 32 x 32 pixels
To see if your website is optimized for Rich Previews, we’ve create a tool to quickly check your Rich Previews: richpreview.com
The Rich Preview tool currently supports previews for chat apps like WhatsApp, Telegram, Skype and the social networks Facebook, LinkedIn and Google+.
Examples
Here are examples of all the meta tags that should be placed in the <head> section of your HTML:
- Title : <title>Rich Link Preview</title>
- Meta description : <meta name=”description” content=”Also want these pretty website previews?” />
- og:title : <meta property=”og:title” content=”Rich Link Preview” />
- og:description : <meta property=”og:description” content=”Also want these pretty website previews?” />
- og:url : <meta property=”og:url” content=”http://richpreview.com/" />
- og: image : <meta property=”og:image” content=”http://richpreview.com/richpreview.jpg" />
- favicon : <link rel=”shortcut icon” href=”http://richpreview.com/favicon.ico" type=”image/x-icon” />
