You asked a nice question and I would love to give the perfect solution here.
I guess this is one problem almost every second blog author is encountering and it is rarely properly addressed. So lets propose the best simple solution to it that will inshAllah fix the rich snippets display issue within minutes for you!
Every social media platform has different rules for displaying rich snippets data. For Facebook we call the standard as OpenGraph Tags, for twitter we call it Twitter Cards and for Google+ or Search engines we use Schema Markup using microdata
What @Shivansh proposed were for Facebook and Twitter but not GooglePlus so I would draw his attention here too to the solution shared below.
Microdata is a set of tags, introduced with HTML5 so it will not work with blogger blogs which are built on HTML4. Luckily in your case your blog is built with HTML5.
Follow these steps:
Is your Template upgraded to HTML5?
These tags will only work on your template if it is upgraded to HTML5, if not yet upgraded then wait for my tutorial at mbt where I will guide how to do it.
TIP: Templates using HTML5 have the html tag in capital i.e.
<HTML> and templates using HTML4 have it in lowercase i.e.
Add Microdata Tags in Blogger
RICH SNIPPETS FOR HOMEPAGE
- Go To Blogger > Template
- Must Backup your template
- Click Edit HTML
- Inside the
<HTML> tag paste the following itemtype and itemscope values
Next paste the following microdata meta tags just below
<b:if cond=‘data:blog.pageType == “index”’>
- Replace BLOG LOGO with your Logo. Make sure the logo size must have a width no less than 520px and height no less than 245px
Result will be like the one shown for MBT homepage when shared on google plus:
RICH SNIPPETS FOR BLOG POSTS
Now lets fix the rich snippets display for posts.
1- Search for the following code inside your template
<article class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
2- Replace it with this code
<article class='post hentry' itemprop='description articleBody'>
<meta expr:content='data:blog.postImageThumbnailUrl' itemprop='image_url'/>
3- Just near the above code you will find
4- Replace it with this code
<div class='post-outer' itemscope='' itemtype='http://schema.org/BlogPosting'>
5- Save the changes and now visit your google plus account and add your post and homepage URL to see if description is displaying correctly as you wanted!
Output would be like the one shown for mbt post below:
Must make sure to add search description while publishing posts, the description often don’t display for posts with no meta description available. So you must check rich snippets for posts for which you have added the search description.