Home
How To

How to Make Visible Search Description in Blogger Blog Post?

Learn the trick to make visible your Search Description inside Blog Post. Generally the best place for displaying search description below post title. Write a compelling summary of what your blog post is all about.
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 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!!!

6 comments

  1. 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 settings..so tell me benefits of enabling and demerits of disabled?
    • Hi Anuj.. I use Robot tags like below-

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

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

      http://www.bloggerspice.com/2015/11/how-to-set-custom-Robots-meta-tag-and-X-Robots-Tag-HTTP-header-on-blogger-blog.html

      Wish you best of luck.. ;)
  2. 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?
    • 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 schema.org 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 schema.org 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='https://schema.org/ImageObject'>
      Template default Image Code here
      <meta content='800' itemprop='width'/>
      <meta content='800' itemprop='height'/>
      </div>

      Until a proper solution I can’t write any tutorial for solution. If you check any giant most popular SEO site then you would see same problem but they have stopped using schema.org markup for hiding error. However you won’t find any error on my template because of patch, but when you check individual post then it will display error that image is missing.

      Thank you. ^_^
  3. 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 fast..it taking too much time..so let it be disabled right?
    And thanks for the image url info too.
    • 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.

      http://www.bloggerspice.com/2015/03/how-to-get-Blog-post-indexed-fast-by-Google.html

      http://www.bloggerspice.com/2015/06/how-quickly-index-your-link-on-bing-search-engine-with-fetch-as-bingbot.html

      Thank you :)
Go Up