How to Customize the Blogger Page Title

It's an unfortunate fact that Blogger's html page titles for posts, pages, archives and even the main page are not very SEO friendly.

Now, Matt Cutts from Google would probably dismiss this a bit since he stresses that page titles are just a small part of your overall optimization strategy.

That said, I just have to make my Blogger blogs optimized top to bottom - it is just the way I work. In the future I'll talk more about SEO strategies.

How Blogger Post Titles Work

As you've probably noticed, Blogger by default likes to prefix all pages with your blog's main title. For example, in my case the main title is 'Blogger Tips Pro'. When I first created this site, Blogger did the following with my default post titles (If you peeked at my current page titles you'll see that they don't follow this pattern.):

1. Main Page Title - 'Blogger Tips Pro'
2. Post Title - 'Blogger Tips Pro: My Post Title'
3. Page Title - 'Blogger Tips Pro: My Page Title'
4. Search Title - 'Blogger Tips Pro: << link to search >>'
5. Archive Title - 'Blogger Tips Pro: Feb 2012'

If you dig a bit into the top of your blog's template by pressing the 'Edit HTML' button (I'm assuming Blogger's newer templates) you'll see the following template code about 12 lines down:

<title><data:blog.pageTitle/></title>

This is the specific template code to display the html page title. In Google's Layout data tags definition, 'data:blog.pageTitle' means the following:

"The title of the current page. This is often the blog title, but may contain additional information on archive or post pages."

As you can see above, that 'additional information' is how they append the page and blog titles together.

How to Change Blogger Post Titles

The first step in altering your page titles is to first layout the title patterns you wish to use. Do you want a tag line on the main page title? Do you want your post titles appended with your blog title, or just stand alone? Do you want your archive pages to display something different?

I'll walk you through how I modified this site. First, let's look at how you conditionally pick a title. This requires using some simple template logic:

<b:if cond=(some condition)>
</b:if>

This is how Blogger templates allow an if condition - such as 'if the page type is archive, then do something'.

Now let's customize the full condition to set Post page html titles equal to their Post title and the main page title to the default Blogger blog title (this check uses the pageType variable which can have the values 'item', 'archive', 'static_page' or 'index'):

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

This code is stating 'if my page type is NOT an item (which means, a blog Post), then use the default Blogger site title, otherwise use the page name'. Using this blog as the example, if I replace the single title line with these 5 lines - the following titles would now appear:

1. Main Page Title - 'Blogger Tips Pro'
2. Post Title - 'My Post Title'
3. Page Title - 'Blogger Tips Pro: My Page Title'
4. Search Title - 'Blogger Tips Pro: << link to search >>'
5. Archive Title - 'Blogger Tips Pro: Feb 2012'

In this case only the Post titles change and no longer have the 'Blogger Tips Pro' in the prefix. This is a great change if you want your Post titles to be just your keyword rich titles for the search engines without the Blog name added.

But, what if you want your Archive or Page titles to have unique names too?  Now you can see where I'm going - in the next set of code we're looking to see first if we're on the main index page. If not, we then check to see if we're on an archive page. If not an index or archive, we then set the page title to just the page name:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
  <title><data:blog.pageTitle/></title>
  <b:else/>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
      <title><data:blog.pageTitle/></title>
    <b:else/>
      <title><data:blog.pageName/></title>
  </b:if>
</b:if>

Now our page titles look like this:

1. Main Page Title - 'Blogger Tips Pro'
2. Post Title - 'My Post Title'
3. Page Title - 'My Page Title'
4. Search Title - 'Blogger Tips Pro: << link to search >>'
5. Archive Title - 'Blogger Tips Pro: Feb 2012'

Finally, you can add some additional text to enhance your title page, or reverse the Blogger default by placing the blog title at the end of your page names:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
  <title><data:blog.pageTitle/> - Powerful Strategies for Google Blogger</title>
<b:else/>
  <b:if cond='data:blog.pageType == &quot;archive&quot;'>
    <title><data:blog.pageName/></title>
  <b:else/>
    <title><data:blog.pageName/> - <data:blog.title/></title>
  </b:if>
</b:if>

Oddly, Blogger doesn't offer a 'data:' tag for the blog description in the header (you would think there would be a data:blog.description variable). So, you'll just have to be aware of adding your descriptive text manually.

Finally our page titles now look like this:

1. Main Page Title - 'Blogger Tips Pro - Powerful Strategies for Google Blogger'
2. Post Title - 'My Post Title - Blogger Tips Pro'
3. Page Title - 'My Page Title - Blogger Tips Pro'
4. Search Title - 'Blogger Tips Pro - Powerful Strategies for Google Blogger: << link to search >>
5. Archive Title - 'Feb 2012'

Some Final Thoughts on Blogger Page Titles

As you can see you're free to modify your template header to experiment with how you would like your blog titles to appear to the search engines. You can add keyword rich terms in all of your pages depending on your pageType as well as other variables.

Note, however, that having your blog site title as the leading keyword phrase might be good in certain cases - especially if you are really attempting to brand your site with a coporate name. Take a look at Amazon or Target in Google results - you'll see they have their company brand first in pages titles. If your brand is important to you then leaving the Blogger default might be your best choice.

Experiment and enjoy!