July 5, 2011

How to Customize the Page Title in Blogger




Did you ever noticed that how your blog on Blogger platform shows title of your blog pages? Obviously on  homepage, it shows your blog title you defined for your blog. On other pages such as post and static pages, you will see preceding blog title with the post or page title. Do you think it needs to be changed the way it appears? I mean, such as removing blog title from other pages, changing the order of title or including extra information to the title or whatever you may like to do with page title. Is it even possible in Blogger?


Benefit of Customizing Page Titles


Yeah, it's possible. Title is a major identification of the content pages where users could be able to predict what's in it without navigating to the page. The title itself convince what is that particular page is about. Search engines are helping people to get to your content if they interested in reading your information been shared. That's why Search Engine Optimization matters for web pages. For search engines, page title of a page is really crucial as they extract words in page title first place to match with user queries that people enter in search engines. So it's obvious that your page title should be relevant to your content if you need interesting audience for your content guided through search engines.


Keep in Mind


Here I'm gonna show you how to customize your page title in Blogger. You can't edit each and every page  individually, so you have to apply changes for each page type - Index, Archive, Static and Post pages. With the help of customization you would be able to display your page titles in different ways as you needed them to be while optimizing them for search engines without killing user experience. Just don't stick into SEO practices and try to optimize your title for readers first and good SEO practices will boost exposure of your content. Let's walk through the customization options.

Steps:

1. Navigate to Blogger Dashboard.

2. Click on your Blog Title.

3. Navigate to Template tab.


Note: Before editing your template, you may want to save a copy of it. Read How to Back Up Your Template.

4. Click on Edit HTML button.


5. Find <title><data:blog.pageTitle/></title> line in your template.

6. Now replace above line of code with any of three code snippets below which helps you to customize page title easily and make necessary changes as you prefer it to be.

Display Only Blog Title on Homepage, and Page Name with Blog Title on Other Pages

This code snippet will show off your blog title alone on homepage and on other pages, the post title or name comes first. It's a best practice from the point of view of SEO, if your blog title doesn't make sense. For example, my blog name is Mayura4Ever and it doesn't mean anything by itself.

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> : <data:blog.title/></title>
</b:if>


Display Only Page Name as the Title on Other Pages

This code snippet is similar to above. It shows blog title alone on homepage but when it comes to other pages, it doesn't include your blog title in title. If you are willing not to show your blog title on other pages, you can use this code snippet.

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>


Display Only Post Name as the Title on Post Pages and Include Blog Title on Other Pages

Here this code snippet will show off blog title alone in homepage. But at the post pages, it will show only post name as the title and on other pages (Archive and Static pages) it will append blog title at the end of the title.

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/></title>
<b:else/>
<title><data:blog.pageName/> : <data:blog.title/></title>
</b:if>
</b:if>


EXTRA: Display a Tagline Along with the Title on Home/Index Page

If you prefer to display a tagline along with your blog title on homepage, you can make use of the tag below. It's a great way if your blog title doesn't has keywords that users will search for. For example, my blog title is Mayura4Ever and it doesn't include general words related to the niche my blog is working on. So I can make use of tagline to convey what is my blog about. The tagline we specify here will be visible for users on search results and it will convince what is your blog about if your blog title alone can't express what is your blog about.

Make sure your tagline includes keywords that valid for your blog content and make it simple. Further, it's better if your tagline is not so long and holds maximum of 40 - 50 characters.

Imagine you are going to add a tagline - Blogging Tips and Tricks. It will be like below,

MyBlogTitle - Blogging Tips and Tricks


Now let's figure out how to make it work. Before you proceed with this, make sure you have already customized your page titles with any of above three code snippets. This change will be applied for that code snippets.

+ In the code snippets you have replaced earlier, find the line of code below.

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

+ Now replace that line with one of line of codes below.

<title><data:blog.title/> : [Tagline]</title>

or

<title>[Tagline] : <data:blog.title/></title>

You may have noticed that both lines are similar but has different order. It depends on your choice and how strong your blog title is. If your blog title has no keywords included, you better have your tagline first in the title. It means, you have to use second title tag. If your blog title itself is meaningful and can be act as a keyword in organic search, then you better go with first title tag where tagline comes after blog title. However you can determine which is better to have for your blog and it includes your preference too.


Color Indication Information

   - Blog Title Layout Tag

This layout tag is responsible for showing blog title. It shows your blog title wherever you place it on.

   - Page Name/Title Layout Tag

This tag will render page title of the page which this tag is present.

   - Seperation

This will act as a separation between page title and blog title. You can specify a character that emphasis separation between entities.


   - Tagline

This indicates the tagline you gonna use on your blog title.


7. Now Save template and carefully view your page titles for made changes.

Note: You may notice the changes are reflecting on your pages right after the application. But you have to wait for search engines to crawl your blog and reflect changes on search results. It may take few hours or days to crawl depend on the number of pages you have on your blog. But you can notify changes to search engines quickly though. Read Submit Your Website to Search Engines to notify popular search engines about your new changes.


Enjoy :-)




Awesome! Thanks for coming by and taking your time to read this post :) I hope you have learnt something today. Now you can share it with your friends and I'd love to hear from you too.






Related Posts and Categories


Category, , , , , ,





Comments

* Make sure your comment is genuine and comply with our commenting guidelines.

* Review your email and reply notification settings to receive replies via email.


Michael Hazell said...

What if your template only has one title tag? I had trouble with it. I use the white awesome inc template.

Mayura De Silva said...

Hi Michael,


Blogger templates have only one title tag as we don't have access to each page template :) This post is exactly referring to that title tag you have in your template mate.


Cheers...

Alen said...

How to change page title was something I was looking for and your tips totally helped. Thanks !

Mayura De Silva said...

Hi Alen,


Glad to hear you made it with the help here mate :)


Thanks for coming by and sharing your comment after trying it out :)


Cheers...

ShareButtonSeeker said...

maybe if you have more time, you should add images for example in each steps.

I used much time to read and understood more, but I think if you have image for BEFORE and AFTER, I will see the result that "WOW! THIS is I want to do to my site" and I think the beginner like me will get it completely.

one more thing: can you explain what is and ? I search from internet and still don't get what they mean.



Thank you for your hard work.

Mayura De Silva said...

Hi Mate,


Thanks for suggestion :)


As far as yet it wasn't an issue as people able to follow and find the steps accordingly :) But I'll try adding images when I have time.

You can find description below the Color Indication Information and I've described through the post. Well, that's the simplest as possible mate :)


Read through again and sometimes you have to try yourself to understand better mate. So tutorial alone may not help. So try it out too :)


Feel free to comment if you still have dubts on it :)


Cheers...

Tracey Munn said...

Excellent, thank you!

Mayura De Silva said...

You're welcome and thanks for your compliment Tracy :)

Cheers...

Roger A Johnson said...

Is there a way to customize the title differently for specific pages. For example: for Home page, the Blog Title and a Tagline, for blog posts, post title and Blog Title and for static pages Blog Title and Page Title. Hope that makes sense

Mayura De Silva said...

Hi Roger,

Identifying the pattern will let you handle as you wish mate. For your query, you can use following code snippet :)


: [Add Your Tagline]


:

:





Cheers...

Mayura De Silva said...

Hi Dipak,

Do you have a custom template? :)

Anyway try searching the data:blog.title in your template and see if you can find something similar.



Cheers...

dipak kol said...

thanks, i have found that.but having difficulties to change Post Tiles default H3 tag to H2 Heading Tags In new blogger template. how can i do that? i am using simple blogger template..

Mayura De Silva said...

Search for h3 class='post-title entry-title' and change H3 to H2 mate :) Make sure to change ending H3 tag to H2 too.

If you got more off-topic questions, use support section :)


Cheers...