How to Customize the Blogger Page Title

by
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.

Blogger Page Title CustomizationNow, 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!
84 comments:
  1. GREAT ARTICLE..!!
    THANK YOU FOR SHARING THIS..!!
    FRM
    top seo tips

    ReplyDelete
    Replies
    1. It is a so helpful article.
      So much Thanks to share it.
      Thanks
      by
      Tutorial Hut

      Delete
  2. wow tnx. btw, your page looks like a wp theme. :)

    ReplyDelete
    Replies
    1. I did some customizations of the standard Blogger template to get to this theme. Just wanted it to be simple.

      Delete
  3. Thanks for this tips on how a blogger can customized the page title. We learned that having your blog site title as the leading keyword phrase might be good in certain cases and especially if you are really attempting to brand your site with a corporate name.

    ReplyDelete
    Replies
    1. Yes, thanks Lia. As I noted in my last paragraph, branding can be important to your business online. Amazon and Target are very good examples.

      Delete
  4. Thanks for sharing this awesome post, it actually work for my blog.

    ReplyDelete
  5. Sorry I didn´t understand a thing although it seemed simple and I read everything. How do I simply put the name of my blog (Concordia Institute)and a few details? If you could present some elements ready to copy and paste I would appreciate very very much. You can find the blog here:http://concordia-institute.blogspot.fr/

    Thanx

    ReplyDelete
    Replies
    1. Hi,

      I guess I'm struggling to understand your question. Where do you want to put the name of your blog? I looked at your site and see that the name is in the page title and your main blog home page has the name as well. Your posts also have the blog name.

      Let me know how I can help with some more details!

      Sincerely, Don James

      Delete
  6. Thank you for this..had a hard time looking for help online :)

    http://www.shelovesthefinerthings.com/

    ReplyDelete
  7. Don, You have made my day :-)
    Thank you so much for providing such a big SEO tip!!

    ReplyDelete
    Replies
    1. Glad I was able to help you. I have more SEO tricks up my sleeve that will help you in the future!

      Delete
  8. Hello Don

    Sorry, after publishing my comments certain codes/tags where erased, so posting it again. Please delete my earlier comment

    Thanks for this wonderful post. Quite informative. I am still looking for a way to display titles in certain criteria

    A) Search result Title: search keyword | Search Result | data:blog.title
    B) Archive Title : Month | Year | data:blog.title
    C) Home or index Title : data:blog.title | Punch line
    D) Post Title : data:blog.pageName | data:blog.title
    E) Page Title : data:blog.pageName | data:blog.title

    With your examples, I can get C, D & E. Is it possible to achieve A & B?

    Thanks in advance.

    ReplyDelete
    Replies
    1. Hey Theju,

      I haven't had the time this week to take a look at answering your question on the Blogger search and archive titles. Check back this weekend.

      Thanks!

      - Don James

      Delete
  9. the post was too complex. tried to understand.
    however i want that only post title appear in Search results.
    currently it appear as : Post Title | Blog Title.
    i want that only Post title appear and no blog title.
    is it against SEO? if not tell me at Kamransj@yahoo.com.
    Thank you! Check My Blog <a href="http://TrixKing.blogspot.com><b>My Blog</a></b>

    ReplyDelete
  10. Hi Kamran,

    All you need to do is copy my first example near the top of the post that just replaces the Post Title without the Blog Title. Just replace: <title><data:blog.pageTitle/></title> with the code in the first example. That will fix your problem. That is not against SEO at all.

    - Don James

    ReplyDelete
  11. thank you very much for this great information! ;)

    ReplyDelete
  12. Don, this was THE most concise post on this topic! Thank you so much.
    I'm not sure why, but < title > now shows up in the tab before my post title name... Suggestion to fix?

    http://thejaneeden.blogspot.ca/

    ReplyDelete
    Replies
    1. Hi Jane!

      Wonderful blog BTW - it looks and flows great! When I look at your blog posts I don't see the problem - maybe I'm not understanding your message here. I see the post < title > in the browser tab - it that the tab you're referring too?

      Let me know. Thanks!

      - Don James

      Delete
  13. Thanks for the tips. I have done this tip.Let me share the performance after a week or later.

    ReplyDelete
  14. Hi Don,

    Thanks for the great article. I trying to add a custom page title to each "page" of this blog www.islanddivershawaii.blogspot.com. At the original site (www.oahuscubadiving.com), when you go to the contact us page, what shows in the browser tab is different than when you mouse over the tab. How can I achieve this effect in blogger?

    thanks,
    Bodhi!

    ReplyDelete
    Replies
    1. Hey Bodhi!

      Nice job on your blogger site - good use of the static home page! By default the Web Page Title (which is the title you see up in the browser tab) is the same as the Blogger Page Title (what you see on the Blogger Menu).

      What you'll need to do is add a condition check within the section that looks for each Page name you want to alter - like this:

      [b:if cond='data:blog.pageName == "Contact Us"']
      [title]Contact Us for Oahu Scuba Diving Courses, Certification & Charters in Hawaii[/title]
      [/b:if]

      You'll need to do that for each Page you want to extend it's title.

      Let me know if you have any questions!

      - Don James

      Delete
    2. Bodhi,

      PS - one other change I would recommend is altering the Title for your Home page from 'Home | Oahu Scuba Diving' to just 'Oahu Scuba Diving'. This is to get you a better search result in Google. You may also want your static home page to redirect to:
      http://islanddivershawaii.blogspot.com/p/oahu-scuba-diving.html rather than http://islanddivershawaii.blogspot.com/p/home-page_1.html

      These are a couple of SEO techniques you can use to help your page rank.

      Delete
    3. Good Evening Mr. Don James. I was inspired and learned a lot and continually admiring about blogging because of your tips and it was great, brief and direct to the point instructions. I have my concern regarding my blogspot (marcchristiantangpuz.blogspot.com). If you will try to look my blog in the page of GOSPEL, what will I do in order to separate my post from each of the other. I would like to appear them separate posts under the GOSPEL and not in a continuation. I want them to appear like what is happening in my HOME page. Hope you will help me to improve my blog. Thank you Sir.

      Delete
    4. Hi Marc,

      Since your Gospel page is a separate page and not blog entries, you can't use Blogger to separate each entry. What you'll have to do is go into the HTML mode of the Page text and surround each entry with a div tag like this:

      <div style='background-color:#000000;padding:10px;'>My Gospel information here.</div>

      You'll have to modify the backgound-color to what color suits your blog colors and the padding to get some border around the text.

      Hope that helps!

      - Don

      Delete
    5. Hey Bodhi,

      I hope you saw the email I sent you about your Blogger titles. Let me know!

      Thanks!

      Delete
  15. What are you actually explaining here,how to customize page titles or about SEO and could you not have supported it with pictures for better illustrations?

    ReplyDelete
    Replies
    1. Wow!

      How does anyone answer a question like this? I'll try...the answer, Anonymous, is about how to customize the page titles. If you want to do this for SEO, then great!! If not.....well...maybe you just want your page titles different than what Blogger provides out of the box.

      Bye!

      - Don

      Delete
  16. wonderfull idea, usually page blogger split by : but in here - name, thanks before, good job

    ReplyDelete
  17. Fantastic post, makes perfect sense, so what are the 4 if conditions?

    Main page = data:blog.pageType == "index"
    Blog post = data:blog.pageType == "item"
    status page = data:blog.pageType == "static_page"
    archive = data:blog.pageType == "archive"

    ReplyDelete
  18. Thank you ! Very helpful !
    I just did in my blogspot now !

    ReplyDelete
  19. Thanks for this. I was pulling my hair out trying to figure it out on my blogs.

    As for Matt Cutts, you can pretty much assume anything that comes out of his mouth is not in your best interest.

    The simple fact is, regardless of SEO, having an enticing page title is what gets visitors click on your link in the search results.

    ReplyDelete
  20. Thank you for the excellent tips. I seem to have effectively changed the title for my blog. But, now that title seems to be used as the title for all the posts in the search results. I inserted the code example you suggested above. And I made conditional codes for my individual pages and a few of the posts.

    I feel like I understand the codes, but maybe I don't have all the pieces of the head code in the right form order. In the head code, I have tags for my blog title listed above all the conditional codes. Is that correct? Or should the title tags and other meta tags for the blog all be in that conditional code?

    http://www.crashbrooklyn.com

    ReplyDelete
    Replies
    1. Hi Wendelin!

      Somehow one of your conditional statements is off and is setting all the page names the same. I would suggest create a test blog, copy and paste my code and then make your custom changes again until it looks right.

      Feel free to send me your custom code in an email to don [at] bloggertipspro.com if you want me to take a look!

      Very nice blog - BTW!

      - Don

      Delete
  21. But james, when i publish a post it is taking main title along with the post title. Totally it is showing two titles in a page...Could you please tell me a solution for this on hariprasadthoorpu@gmail.com
    mobengineers

    ReplyDelete
  22. Thank you so much. I am going to use it on my blog: http://www.hdpeak.net

    ReplyDelete
  23. I have create a blog but in my blog it shows two blog post layout???
    now what to do to remove any one of blog post ???
    plzz help me out

    ReplyDelete
  24. How can i add a permanent short description under a page title?
    For. eg. Under the "poems" page i need to add something like "these are written by......" and then include all the posts with labels poem as seen now

    http://ponderingsmusingsandmuchmore.blogspot.in/p/blog-page_9.html

    ReplyDelete
    Replies
    1. Hi Nandana!

      I took a look and I'm not quite sure where you want to place your description. Are you asking to have that on the static page, or, on each page?

      If you want it in place of the message "Showing posts with label poems. Show all posts" then you'll have to go into the template to remove the search message with your 'these are written by...' based on the page title. I haven't done an article on that yet. For now I would just add an HTML gadget in your layout with that text.

      Sorry I don't have more info.

      - Don

      Delete
  25. Nice article. This one is very helpful for the blogger specially for the newbies. I was looking for such technique to make my blog more attractive and search engine friendly. Keep sharing such informative articles.

    ReplyDelete
  26. Thank Don! Having the blog title before the post title really is odd. Having the post title show first makes it better for our readers and sharing on social networks.

    ReplyDelete
    Replies
    1. Hi Dain,

      It is weird, isn't it? I wish Blogger just gave you the flexibility overall.

      Thanks!

      - Don

      Delete
  27. Hi Don,

    Thank you for this post. It's really helpful. I have one question about data supported by blogger. You use data:blog.pageType in this post. How do you know that? I mean is there any documents provided by google or blogger to describe which data can be used in html template editor? If you know that, please send me a link. Really appeciated.

    Thanks
    Foggia

    ReplyDelete
    Replies
    1. Yes, there are. Take a look at my Resources tab up above. There is a link to the Google reference documentation on how the Blogger template variables work.

      Enjoy!

      - Don

      Delete
  28. Hi Don!

    I have a page which displays all blog posts with a certain tag, and I'm trying to use your guide to change the URL. It is currently http://kayzoekay.blogspot.com/search/label/photography however I want it to eliminate the "search/label/" and use the title http://kayzoekay.blogspot.com/photography instead. How can I do this? Any help would be greatly appreciated.

    Thanks!

    ReplyDelete
    Replies
    1. Hi Kayzoekay,

      As far as I know there is no way to change those labels. They are automatically set by Blogger. Sorry I don't have any more info for you!

      - Don

      Delete
  29. Hello Mr. Don
    This is a very nice article and very informative..
    I have customized my posts title with the help of this article.
    But, I couldn't change search results title...
    Sir , can you help me in getting the right search results title..
    Currently, it is showing the Tag line and the title of the blog...
    Thanx in advance..

    http://brainhubb.blogspot.in/

    ReplyDelete
  30. you're pro sir.. thank you for sharing

    ReplyDelete
  31. Why labels are shown in lower case in those titles? How can we change that? I tried changing labels in post itself but then also it turns into lower case automatically once we update the post.

    ReplyDelete
    Replies
    1. Hi Ritesh,

      See my comment below.....

      Don

      Delete
  32. Hey, how can i customize the label's title? Help me please !

    ReplyDelete
    Replies
    1. Hi 720p,

      Which label are you referring to? If you mean the keyword labels then you just add another keyword phrase to each post.

      Let me know what you mean.

      Don

      Delete
    2. I asked you somewhat similar question but you neither approved the comment nor replied to it. How can I change the case of labels which appear in browser title bar. Its showing all in lowercase right now.

      Delete
    3. Hi Ritesh,

      Very sorry if I missed your comment earlier! The titles you see reflect the title of your blog or the title of your posts. So, if you need something capitalized (uppercase) or lowercase you need to adjust the case of the blog title or post title.

      Is that what you're asking? If not, do you have an example you can show me?

      - Don

      Delete
    4. Its when you click on any label in your blog. Blogger is not allowing to change the case of labels while creating a post. Its changing it to lowercase after pressing the update button.
      Ex: Android

      Delete
    5. Hi Ritesh,

      I'm not sure why that is happening to you. If you look at my labels the words in the title stay both upper and lower case. My best guess is that you're using a custom template not from Google so there is some code that is changing the case of your labels. You'll have to dig into that.

      - Don

      Delete
  33. This is very helpful. Thank you so much, my blog pages looks better.

    ReplyDelete
  34. Thanks, Don James! Another very useful article! I'm glad I found your site.

    ReplyDelete
  35. Hello! I've found something right for me after two years of searching. This is the best to see blogger title and also best for SEO. Excellent work!

    ReplyDelete
  36. Great post. Thanks, Don!

    A couple of questions though:
    1) Is it possible to remove markup from the pageName? For instance, I often have a pageName that looks like this: "Review: Restaurant Name" and I don't want the italics to appear in the Google search results
    2) If I click on the archive year, it seems to display the same "index" title as my home page. Is there a way to differentiate the two? If I click on the archive month, then I get what I want with the "archive" style formatting.

    Thanks!

    ReplyDelete
  37. Thanks! This article definitely helped me with my new blog. I look forward to reading your future posts!

    http://cashturtle.blogspot.com/

    ReplyDelete
  38. Hi Don,

    This helped me to tune up my blog site to show page/post titles and then blog title. However, google search results still shows my blog title first and then page/post titles as shown up below:

    Blog title : Simply Linux!!!

    Post Title : Get Hardware Info

    So, when search for the correct keywords in google it would up list my blog site as :

    Simply Linux!!!:Get Hardware Info

    I don't want this way, i wanted the page/post title to come up first as :

    Get Hardware Info - Simply Linux!!!

    Let me know how can this be accomplished. Thanks for helping me.

    My blog site : http://simplylinuxfaq.blogspot.in/

    Mssm

    ReplyDelete
  39. Many Thanks For Tutorial...

    ReplyDelete
  40. I just want to change the title itself. I'd sure appreciate some help with that. Thanks...

    Bill

    ReplyDelete
  41. After reading the complete article i am very disappointed, I was looking solution to show different page title for search engine, but the post is showing solution of post titles. And after applying your solutions I only manage to show the same post title that we add in post heading.

    Is there any solutions really available for blogger pages?

    Thanks

    ReplyDelete
    Replies
    1. Sorry if you felt that way, Vijay. If you look at the details of the tutorial you'll see that the conditions you can check for are set in the pageType variable which can have the values 'item', 'archive', 'static_page' or 'index'. If you modify the code above to focus on 'static_page' then you can certainly alter your Page titles!!

      - Don

      Delete
  42. Thanks you so much, i just applied this on my blog, www.qmaths.in

    ReplyDelete
  43. I don't understand a thing... its not as explanatory as your other posts

    ReplyDelete
  44. Thanks a million! This really helped clean up my blog tabs.

    If anyone wants to see that this worked, feel free to check out my blog at http://swimwriterepeat.blogspot.com/

    ReplyDelete
    Replies
    1. Glad it helped Emma! Good luck with your NaNoWriMo work!

      - Don

      Delete
  45. Hello,

    I have an image (logo) as my blog title, so my title shows the html. Is there a way to change this to any text that I want for the homepage only?

    If you know of a way, I'd greatly appreciate it

    ReplyDelete
  46. I want to thank you for this good read!! I certainly loved every little bit of it. I have got you saved as a favorite to look at new stuff you post…

    ReplyDelete
  47. Perfect. I've been messing around with but that remains blank. The "help" page isn't much help: https://support.google.com/blogger/answer/47270

    This has it sorted. Nicely done. 😁

    ReplyDelete
  48. After using this code m having same problem it shows title this before homepage or any other page title, any suggestions to remove it ?

    ReplyDelete
  49. Hi is there a way that I we can change the search label title from
    Blog Title: Search Title to Search Title - Blog Title?

    ReplyDelete
  50. Thanks for sharing your learnings.

    Thanks
    Akshay Kadu

    ReplyDelete
  51. What About this? you've not mentioned...
    meta expr:content='data:blog.pageName+" - "+data:blog.title' property='og:title'

    Error After Placing this:
    TEMPLATE ERROR: The expression 'data:blog.pageName+" - "+data:blog.title' is not valid. TEMPLATE ERROR: The expression 'data:blog.pageName+" - "+data:blog.title' is not valid.




    Hope i will find help

    ReplyDelete
  52. Really great. Much thanks. Professional - finally. It's so rare. I'm myself IT guy.

    ReplyDelete