Customize Default Blogger Title for Better SEO

Blogger is a very SEO-friendly platform, everything from url, script are optimized for search engine, except the title.

The default Blogger title

The default blogger title is so not friendly with users as well as search engine. Why? Because default blogger title likes to display main title first, and post title after. Since the SERP (search engine result page) only display a certain amount of words of title, displaying main title first may cut off some important keywords from your post title. And with readers, they can not completely understand your post if the title do not display entirely.

Customize Default Blogger Title

For a real-life example, my main title is Howeblog - Tutorials and Tips, and this is how Blogger displays my title:

Homepage: Howeblog - Tutorials and Tips
Post Page: Howeblog - Tutorials and Tips: My Post Title
Static Page: Howeblog - Tutorials and Tips: My Page Title
Search Page and Archive Page: by default, search engine spiders do not index these kinds of page, so we can skip it.

So, if you wanna improve your blog ranking, you must change default title into a better form, and then customize it for your taste.

Blogger Title Tag

There is 3 kind of blogger title tags you need to know.

1. Data:blog.title: the title of the blog. E.g.: HoweBlog - Tutorials and Tips.
2. Data:blog.pageTitle: the title of current page, this is default tag using in blogger. At homepage, it's the blog title; at post pages, static pages, it contains post title and page title below blog title. You can see from the example above.
3. Data:blog.pageName: the title of each page, best title tag so far. It's the post title, page title, label name (if at label page). Note: at homepage, it shows nothing.

Customize Blogger Title

At first, remember back up your template, then you need to find where the default title tag located. Go to your blog Dashboard > Template > Edit HTML (don't tick Expand Widget Templates), then find this tag:

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

Some custom templates have changed the default title already, so obviously you can't find this tag and don't need to change it again. But if you still want to see how it looks, try search for:

<title><data:

Okay, to change your blog title, you need to replace entire of these tags (<title></title> with default Blogger template or <b:if></b:if> with custom template), you can choose one of the following title types below:

1. Only Post Title

Replace title tag with:

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

With these tags, Blogger will show blog title at homepage, and only post title at post page, also apply for static page, archive page and label page.

2. Post Title and Page Title (Recommended):

Replace title tag with:

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

At post page it will show title first and then blog title, also apply for static page, archive page and label page. E.g. "Customize Blogger Title | Howeblog - Tutorials and Tips".
Tips: you can replace | character with another one like ~, -, /, \.
This structure of title is widely used by Google, Yahoo, Youtube and others websites.

3. Customize Title with Custom Keyword

Not just post title, you can customize it with adding some keywords in title. It will show in SERP as a part of post title automatically every post. You can add your keyword before or after data:blog tag, but inside title tag. For example:

With Type 1:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/> - Homepage keywords</title>
<b:else/>
<title>Case Study: <data:blog.pageName/> - Post keywords</title>
</b:if>

Blogger Title Customized

With type 2:

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