How to Make Visible Search Description in Blogger Blog Post?

show up 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*/
. 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*/
.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


  • 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!!!


  1. Pt.Anuj K Shukla
    Hey fazle thanks mate..finally it's live..fazle tell me one thing why you don't enabled robot headers? and i'dont know what's the correct settings for that coz lot of websites sharing different tell me benefits of enabling and demerits of disabled?
    • BloggerSpice
      Hi Anuj.. I use Robot tags like below-

      <b:if cond='data:blog.pageType == &quot;archive&quot;'>
      <meta content='noindex' name='robots'/>
      <b:if cond='data:blog.searchLabel'>
      <meta content='noindex,nofollow' name='robots'/>
      <b:if cond='data:blog.isMobile'>
      <meta content='noindex,nofollow' name='robots'/>

      But you won't able to see from source code. For correct Robot header settings please follow the below link for tutorial.

      Wish you best of luck.. ;)
  2. Pt.Anuj K Shukla
    Hey Fazle,,Happy new year..and thanks for the robots info..but me not yet sure for robots tags..if am not able to do this ,then you tell me about custom robots tags which you have added mate.and do you have any tutorial which describe how to fix image url in google structure testing tool?
    • BloggerSpice
      Same to you Anuj, Don’t be worried about Robot. Let’s Google do it for you. If you don’t use any custom Robot then Google will generate automatically. So I have stopped using custom robot.

      Image URL error solution currently not working in any site. Because Google has introduce AMP (Accelerate Mobile Page) However you can replace all image_url with with image Because markup can’t read image_url.

      Though AMP is now in trial mode and finalize on February 2016. Then we will get any new updated form Google. However I have made my template error free but I have patched with several code. And this is not formal way to solve the issue. Even you won’t find any solution over the net. Some of are not using any markup on images so error is not visible.

      I have wrap up my template default image code by like below

      <div itemprop='image' itemscope='' itemtype=''>
      Template default Image Code here
      <meta content='800&#…
  3. Pt.Anuj K Shukla
    Hello Fazle,thanks for the useful information,so that means my robots tags are disabled ,then google auto create it and use according their need? i'm worried coz i feel that my posts are no indexing taking too much let it be disabled right?
    And thanks for the image url info too.
    • BloggerSpice
      Hi Anuj...There are many SEO signals are now Backdated. You don’t have to use any Custom Robot. You don’t have to use any keywords. Because only Bing search engine is now getting signal from keywords. But they will update this strategy soon.

      Don’t worry about indexing content. Because when Google Robot visits your site then it will automatically detect your latest content. However you can adopt different techniques for faster indexing on Google and Bing search engine through their Webmaster tools…Please visit below links.

      Thank you :)
  1. To insert a code use <i rel="pre">code_here</i>
  2. To insert a quote use <b rel="quote">your_qoute</b>
  3. To insert a picture use <i rel="image">url_image_here</i>
Go Up