HackingUniversity - Hacks . Tricks . How-To's

06 September 2016

Display Post Search Description in Blogger below Heading

If you remember blogger introduces Search Preferences option to enhance its SEO base, and it actually boosted site’s traffic with its search description feature different for every single post. It was a must step for blogger to introduces to enhance blogger’s on site SEO options and increasing blog’s traffic. And yes search description is a must thing to check before you actually publish any post on blogger.

blogger post meta description

Well today I will show you how you can easily display Search Description for every every post below the post title inside your blogger blog. This way you can enhance the reading experience of every one, they can easily understand the content of your post with this search description, title is always the key thing but still a little brief description helps to elaborate the content.

As you can see above, I am using this on my blog too, its automated you just add the description one’s in your post while posting and this simple code fetches that description and display’s it.

You can even customize the text and appearance of this using CSS, colors and everything is customizable.

Steps for Adding Post’s Meta Description below Post Titles in Blogger Blog

Follow below simple steps to see how easily you can add Posts Meta Description below post title in blogger blog.

  1. Open Blogger > Template > Edit HTML.
  2. Press Ctrl + F & search for <div class='post-header'/> and then paste below code below this searched code.

    <b:if cond='data:blog.pageType == &quot;item&quot;'><div class='meta-description'><data:blog.metaDescription/></div></b:if>

  3. Now its time for styling, search for ]]></b:skin> tag or </style> tag in case you have removed default blogger styles.
  4. Paste below codes above this searched code.

    .meta-description{background: #f9f9f9;
        margin: 0 -20px;
        padding: 20px;
        line-height: 30px;
        font-size: 12px;
        font-style: italic;
        color: grey;
        font-weight: bold;
        word-spacing: 1px;box-shadow: 0px 4px 3px -2px #ccc}

  5. You can customize the style according to your own blog, like padding, margin, colors and background.
  6. Now just Save your Template and refresh your posts to see awesome Meta Description displayed below the titled.
  7. This way you can display Meta Description anywhere inside your blogger post, just move the above code, wherever you want to display the Description.

So guys I hope you enjoyed this another SEO based article for your blogger blog, do check some more awesome articles covering blogger based stuff. You will love those too.