This is one of the best SEO practice for web developers to enable search description for their site. I got a mail from one of my website readers that whether he can show the custom rich snippets for each and every blog posts.
Actually, whenever you search for anything (Say “aubsp”) using a search engine (Such as Google/Bing), there are mainly three things which will appear underneath your search results. The first one is Title of webpage, second is URL of that webpage and third one is search description.
Google Search Engine generates the Rich Snippets automatically by using variety of signals, including the content of a page as well as references to it. Therefore, you will see the different snippets for the same page in different span of times even the contents from the bottom of your webpage might be shown as rich snippet.
However, if you add Structured Data or Meta Description Tag for your blog or site then it helps search engine to show the content summary in a better way. If the blog post description shall be visible to your live visitors then it helps users to understand about the contents of that post very well.
Additionally, the Meta Description of your blog post will not only appears in the search results but also help social media such as Google+ and Facebook to display your webpage contents summary.
How to enable Search Description in Blogger
All blogs which are hosted on Blogger.com irrespective of using custom domain may enable the Search Description option which remain disabled by default. To set the blog’s search description, follow these steps:
Step-1: Login to your blogger account and go to your blog Dashboard.
Step-2: Click on Settings tab and then Search preferences.
Step-3: Now, click on Edit next to “Description” under Meta tags heading and select radio button Yes to enable the search description for your blog.
Step-4: Finally, you may now write a brief description for your BlogSpot blog but remind one thing that it should not be more than 150 characters.
How to make the Search Description visible for readers of your blog post
This is a unique technique originally applied by Showeblogin in blogging history and firstly used for one my blogspot blog AUBSP. Now, I am sharing it for your blogger blog. You may see the screenshot taken from AUBSP:
To show custom blog post snippets for your each blog posts follow the following steps:
Step-1:
First of all Enable Search Description in Blogger as discussed above. Because, it will include a meta description tag in your blog HTML source <meta content=’…..’ name=’description’/>
Step-2:
Now, you will see a “Search Description” option in each and every Post Settings panel as shown below.
In search description box you may write your post contents summary/snippet which will help search engine and social media. Further, we make it visible to the readers as well. Note that the summary or excerpt for each individual post should not exceed 150 Characters (including spaces).
If you write more than 150 characters long individual post snippet then it may not be displayed in search results. However, the same will be shown as post summary without any error just above post contents.
Step-3:
Add the following CSS codes to your blog template.
.swt-snippet {/* SWT Post snippet by Showeblogin*/
clear: both;
float: none;
margin: 10px;
padding: 5px;
text-align:center;
background: #F3F1E6;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-top: 1px solid #bbb;
border-left: 1px solid #bbb;
-moz-box-shadow: 0 1px 2px #f2f2f2;
-webkit-box-shadow: 0 1px 2px #f2f2f2;}
#p468, #p468 a{
font-size: 110%;
text-decoration: none;
display: inline;
font-weight: bold;
font-family: 'Courier New', Courier, monospace;
}
span.swtSummary {
color: #575757;
font: italic 13px/21px Georgia, "Times New Roman", sans-serif;
}
#p468::after {
content: ": ";color: #140709;font-weight:bold;letter-spacing: .0625em;
/* Tutorial at: http://www.superwebtricks.com/?p=468 */}Step-4:
Go to the template editor of your blog and search for <data:post.body/> and just above it paste the following codes. You will see the same in two places, the first one is for mobile templates and another is for desktop visitors. Therefore, you may insert the following codes before these two or one of them.
However, in some customized templates you may see three <data:post.body/> and therefore insert the codes before each of them. Actually, the first <data:post.body/> is for your mobile template and third is for desktop template. However, the second is for displaying the default settings to use the post body as the schema.org description, for good Facebook/Twitter(X) and other social medial snippeting.
<b:if cond='data:blog.pageType == "item"'>
<!--
START SWT Post snippet by Showeblogin --><div class='swt-snippet'><a
href="http://superwebtricks.com/?p=468" rel="help" id="p468" target="_blank">Summary
</a><span class='swtSummary'>
<data:blog.metaDescription/></span><!--
Tutorial at: http://www.superwebtricks.com/?p=468
--></div><!--
END SWT Post snippet by Showeblogin --></b:if>
Finally, save your template and enjoy!
Please do not edit the code as it may give error to your blog pages. However, if you do not want to give the credit to my hard work then you may add the word nofollow along with help in rel attribute. That means just replace rel="help" with rel="help nofollow"
Let me know if it works for your blog and display the rich snippets with structured data and meta description for your each and every blog posts.