One of the most popular blog posts ever for the Search Marketing Blog is "Optimizing Title Tags in Blogger" with over 72 comments. The significance behind the post is simple - leverage SEO best practices by transposing your Title Tag to put the name of your blog post first.
There are a few folks using different versions of Blogger which have caused quite a few questions and misunderstandings on how to implement this code hack.
The first thing to realize is this - the suggestion below is, in fact, a hack to your design code. As a result, please make a backup of your existing code prior to making any changes to your layout (simply copying and pasting into a text file will do the trick). You'll need this for future changes to you site layout.
Once the blog title tag optimization code is implemented, moving page elements around will cause the following error
Your template is invalid because the tag 'b:section' appears inside of the tag 'head'So, to make a long explanation simple, you cannot move page elements around with the title tag hack code in place. So, here is an alternative hack:
1. Delete the corresponding Title tag code: (Press Ctrl+F to find it within the HTML edit window to find it)
Blogger Beta
<title><data:blog.pageTitle/></title>Blogger Classic Version:
<title><$BlogPageTitle$></title>2. Then Paste the corresponding title tag code hack ABOVE the head tag
Blogger Beta Version:
<!-- Start Widget-based: Changing the Blogger Title Tag -->Blogger Classic Version:
<b:if cond='data:blog.pageType == "item"'>
<b:section id='titleTag'>
<b:widget id='Blog2' locked='false' title='Blog Posts' type='Blog'>
<b:includable id='comments' var='post'/>
<b:includable id='postQuickEdit' var='post'/>
<b:includable id='main' var='top'><title><b:loop values='data:posts' var='post'><b:include data='post' name='post'/></b:loop> ~ <data:blog.title/></title></b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'/>
<b:includable id='feedLinksBody' var='links'/>
<b:includable id='backlinks' var='post'/>
<b:includable id='status-message'/>
<b:includable id='feedLinks'/>
<b:includable id='nextprev'/>
<b:includable id='commentDeleteIcon' var='comment'/>
<b:includable id='post' var='post'><data:post.title/></b:includable>
</b:widget>
</b:section>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
<!-- End Widget-based: Changing the Blogger Title Tag -->
<title><br /><mainorarchivepage><$BlogTitle$></mainorarchivepage><br /><itempage><blogger><$BlogItemTitle$></blogger> - <$BlogTitle$></itempage><br /></title>Now, moving forward, whenever you want to make a widget or template change, you'll need to make 2 copies of your site code. Save a template with the code and save another template without the code. You can't move page elements around with the code in there so simply replace the hacked code with the original. Make any changes you need and then reapply the hacked code above your tag.
Yes, its an extra step to manage your blog, but the gain in search engine traffic will be worth it!
