How to Make Visible Search Description in Blogger Blog Post?

META description

If you say what is the best part for SEO then I must say about Search Description. Because this is a very significant part of a Blog�s SEO. Most of users add search description about Blog which will display in search engine result page. But many of us ignore adding search description in Blog post. Though Search Description always remain hidden inside Blog post but we must write good Search Description from divert organic traffic from search engine. Whatever you write as a Search Description it won�t be visible. But this Search Description will be visible in search engine result page.

You might see when you make any search query then many links with small description is showing up on search engine result page. That small description is Search Description. When you add a better and unique search description then search users from search result page instantly decide whether to visit this site or not?  So always try to write a better Search Description for each post.

I did many relevant talked about Search Description but the main purpose of this tutorial to make Search Description visible inside Blog post. Thus after entering into your Blog post page readers get a short idea by reading Search Descriptions. This will work like 2 in 1. Your post will get better visibility on search engine result page on the other hand readers on your Blog post page will get a clear idea of what your Blog post is all about. To make it visible I will use a Meta tag which will make it visible below post Blog Post title inside the post. But don�t worry this summary won�t be visible on your Blogger home page as post snippets.

However before proceed you can see my Blog Post that I have applied this trick to make my search description visible below Post tile above first image.


Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on -> Template -> Edit HTML->

Step 3 Now Find]]></b:skin> By Pressing Ctrl+F (Windows) or CMD+F (Mac) 

Step 4
 Copy the below code and Paste it above/before ]]></b:skin>

/*Search Description by http://www.bloggerspice.com*/
. BSDesc{background-color:#ECECEC;overflow:hidden;padding:10px;font-size:15px;margin-bottom:15px}
. BSDesc p{margin:0;opacity:0.8}


Meta description inside Blog post

Alternative Design Box Style

/*Search Description by http://www.bloggerspice.com*/
.BSDesc{background-color:#F6F7F9;border:1px solid #E3EAF0;overflow:hidden;padding:10px;font-size:15px;margin-bottom:15px}
.BSDesc p{margin:0;opacity:0.8}

search description

Customization

  • Please alter #ECECEC to change the search description box background color.
  • Alter font-size:15px; for changing font size of the widget.
Step 5 Now again locate <data:post.body/>  you will find 3 or 4 times this code but use the code for second one.

Step 6 Copy the below code and Paste it above/before<data:post.body/> 
<div class=�BSDesc'><p itemprop='description'><data:blog.metaDescription/></p></div>
  • The final code will be like below
<div class='BSDesc'><p itemprop='description'><data:blog.metaDescription/></p></div><data:post.body/>

Step 7 Finally click Save template button and exit from there.

In this post I have apply a simple trick. Generally we use a Blog Meta description to give more information to search engine about search description. The Meta description code is like below.
<meta expr:content='data:blog.metaDescription' itemprop='description'/>
I just used data:blog.metaDescription� code and added simple design by wrapping up by using CSS code. However you can spice up this search description area by modifying the CSS code such as color, background, Font style, size etc.

You are done... to see it live check your Blog post and see search description is visible. And your Blog readers easily can get clear idea by reading search description before go through the whole article. Happy Blogging!!!


EmoticonEmoticon