Blogger, Blogger Hack, Blogger Tutorials

Designing Blogger Template : SEO Optimized Title Tag

2 205

I have seen so many bloggers have been asking me for tutorials to design Blogger template. As you all know after i gave to my another friend, I have created this new blog for providing blogger and web design tips. I have decided to post the whole process required for designing a seo optimized blogger template. You would have noticed that many designers have been charging you to convert a wordpress template to blogger one or even to design a unique blogger template. So I have decided to explain you all the steps needed to design your own blogger template.

General Layout of a Blogger template

According to me, a blogger template can be divided into 6 parts :

  • Header
  • Navigation Menu
  • Main Container
  • Post
  • Sidebar
  • Footer


I will explain you each and every part of the blogger in detail in the forthcoming articles. For an example, I have taken a screen shot of my blog itself.

Blogger Template Layout

Blogger Header Section

In this section, we can see how to code the header section of the blogger template. The header section starts with <head> tag.
Now Let me explain you the elements which need to be present in the header and will also explain you how to make it seo optimized as well.

General Code present under the header section is :

<!doctype html>
<title>Hello world!</title>

Now in this I am going to concentrate mainly on the <title> tag. In the future posts, i will explain much more on the header tags.

The <title> tag defines the title of the document. The title element is required in all HTML/XHTML documents. The text inside <title> is not displayed in the document. However, most browsers will display the title at the top of the window.

The title element:

  • defines a title in the browser toolbar
  • provides a title for the page when it is added to favorites
  • displays a title for the page in search-engine results

The default code present in the Blogger Template is :


The above code displays your default page Title. Now let’s see how to play with the above code.

Customize the Page title in Post pages

If you want to customize the above code and make it seo compatible, then follow the below steps.

  • Login to your Blogger account
  • Go to Design tab under your Blog
  • Navigate to EDIT HTML page

Now replace the above code with this one :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title> <data:blog.pageName/> | <data:blog.title/> </title>

The above code will help you to show custom titles under post pages. By default, only the post titles will be shown under any post page. But with the above code, you can add few keywords of your blog along with the post titles. Just edit this code <data:blog.title/> to show the important keywords of your blog in page titles alone.

In reverse, if you want to show a custom title in home page and the default Page title in all other posts, just like me, then you need to add the following code instead of the first one.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title> <data:blog.pageName/> | <data:blog.title/> </title>
<title>Your Important Keywords First | <data:blog.title/> </title>

Now you need to to place your important keywords of your blog first, then your blog title.


SEO blogger Title in Search Engines

Show Custom Titles in Specific post pages

It’s an easy trick which allows you to show custom Page Title under specific post pages. This trick can help you to put important keywords of each post under the specific post pages.

<b:if cond='data:blog.url == &quot;Post URL&quot;'>

<title> Custom Post Title!! </title>


With the above code you can change the Page Title of any specific post. This can be especially useful for providing custom title to contact us, about us pages.

Any suggestions?

I hope that the above trick would be useful for you to customize the page title. In the future posts i will explain more about adding seo optimized META tags and adding specific Description to specific Post pages.

About the author / 

Mohamed Rias

I'm a programmer, photographer, and proud parent. With a passion for coding and a love of capturing life's moments through my camera lens, I'm always on the lookout for new challenges and opportunities to grow. As a dedicated parent, I understand the importance of balancing work and family, and I strive to be the best version of myself in all aspects of my life.

Related Posts


  1. Olusegun July 11, 2012 at 1:11 am - 

    This is a nice tutorial. Bookmark & share


Editor’s Pick

  • A Complete Guide to Bathing Your Baby

    Mastering the Art of Newborn Bathing: Expert Tips and Tricks for a Happy Baby

    Bathing a newborn can be a daunting task for new parents, but it’s an essential part of their routine care. Not only does it keep your baby clean, but it can also help soothe them and establish a relaxing bedtime routine. In this video, we’ll be sharing some tips and tricks for making bath time…

  • Know the Different Lenses In Photography And Their Influence.

    Depending on what lens you are using you can add in creative control, different perspective, and technical improvements to your photographs. Choosing the right lens can lead you to have more control over your final image that you want to frame or already framed in, in your mind. Influence of lens can lead to optical…

  • 35+ Must Have Apps to Increase Productivity in Ubuntu

    Once you have started your way through linux, you might come across numerous applications which are being developed and released everyday. You might me interested in some and you might not.So, you arrive to an ultimate question “What are the apps that will increase my productivity?. Well, the answer is in this article which consists…

  • Notable Tips for shooting Awesome Wildlife photographs

    You can remark it as wild-time game, which surely it is. Wild is the community for animals and not ours so it’s there to decide what they will do and what they want to. You can tell them to make some gesture that well-suit your need, or you can’t ask they to align up in…

  • 25+ Breathtaking examples of Natural sky Photography

    Many times throughout the day you look up to the sky and just see a blue or grey sky without much thought. But on some days, you look out into the distance and see something beautiful, something that captivates the beauty of the sky not seen on a daily basis. This collection of photography that…