Blogger Tutorial: the best SEO title tag, Addendum

SEO and XML go hand in hand on the Blogger platform. So do XML and learning, for me at least. After my first post on Blogger and search engine optimization, Blogger Tutorial: the best SEO title tag, I wasn't quite satisfied with the results.

On search results, label pages and archive pages, the title still showed 'O'Cor | O'Cor'. I realized that these have their own objects that could be used to display a relevant title.
Now, I know that these kinds of pages are not indexed by search robots, so why bother? Well, first I like to challenge myself and to learn new things. Second, it felt like there were some loose ends to tie. I don't like loose ends. Third, I don't really need a reason: it's my personal blog and I can do as I like (and it feels GOOD!).

So, I set about learning on how to optimize the title tag even more. After a sleep deprived night (almost), I think I came up with a satisfying result.

If you wish to jump to the code and don't want to read the entire article, you will of course disappoint me, but you can click here.

It's my personal blog and I can do as I like (and it feels GOOD!).

Variables, conditional tags, objects and strings

I realize that the above sub-title must sound pretty scary to non-technical people, but it sums up the ingredients of the solution I came up with. Let me take you by the hand and lead you through the streets of Blogger.

Blogger Resources & References

First, I went on a search for good Blogger XML resource and reference sites. I'm not an expert after all.

These are the websites I found with clear and structured information:

1. Of course, Google has an extensive resource: the API Reference for Blogger Developers. Mind you, it's pretty technical, but very structured and useful,
2. Blogger Code PE is a very useful resource as well. There's one caveat: it's in French. However, with Google's unsurpassed - albeit imperfect - translation tools it's pretty easy to understand if French is not your forte,
3. At CodeDodle I found a series of excellent articles on Blogger Template Design,
4. Last but not least: relevant information can also be found at the Blogger Support Forum.

There: all set!

This is what I learned

From the examples on these websites I learned how to use the variable alias <b:with> and the conditional tags <b:if>, <b:else> and <b:elseif> in XML.

I also learned how to combine these with the use of the XML objects <data:view.search.query>, <data:view.search.label> and <data:view.isArchive> and the XML global string <data:view.search.rangeMessage> to generate an even more accurate title.

Finally, I optimized the code so that it now includes the <title> and </title> tags only once.

Final optimized code for an SEO-friendly title tag 

This is a one-to-one copy of the code that I currently use on this blog to generate an SEO- and human-friendly title:

<b:with value='"Code, music, reviews and pc productivity tips from "' var='blogDesc'>
  <title>
  <b:if cond='data:view.isHomepage'>
    <data:blogDesc/> <data:view.title.escaped/>
  <b:elseif cond='data:view.search.query'/>
    <data:blogDesc/> <data:blog.title/> • Search results for '<data:view.search.query.escaped/>'
  <b:elseif cond='data:view.search.label'/>
    <data:blogDesc/> <data:blog.title/> • Displaying posts with topic '<data:view.search.label.escaped/>'
  <b:elseif cond='data:view.isArchive'/>
    <data:blogDesc/> <data:blog.title/> • <data:view.archive.rangeMessage/>
  <b:else/>
    <data:view.title.escaped/> • <data:blogDesc/> <data:blog.title/>
  </b:if>
  </title>
</b:with>

Please refer to the instructions in my previous post on this subject on how and where to insert the code into your theme.

Code Breakdown

Here is a line by line breakdown of the code:

<b:with value='"Code, music, reviews and pc productivity tips from "' var='blogDesc'>

1. To minimize the length of the code and to make it easier to make changes to a commonly used string, variables are an asset. In line 1, the description of this blog is assigned to the variable blogDesc. The variable alias b:with is closed in line 15.

<title>

2. In the previous version I used the title tag in every line that generates a title. While playing around with the code I realized this makes the code unnecessarily bloated. In this new version each line that generates content for the title is automatically enclosed by the title tag in line 2 and the closing /title tag in line 14.

<b:if cond='data:view.isHomepage'>

3. This line is unchanged from the previous version. It performs a conditional check whether the currently displayed page is the homepage. The b:if tag is closed in line 13.

<data:blogDesc/> <data:view.title.escaped/>

4. If the currently displayed page is indeed the homepage, the variable blogDesc is displayed, followed by the blog title.

   Result:
   Code, music, reviews and pc productivity tips from O'Cor

<b:elseif cond='data:view.search.query'/>

5. If the current page is not the homepage, elseif checks if it is the result of a search query. The b:elseif conditional tag is closed by the forward slash / at the end of the line.

<data:blogDesc/> <data:blog.title/> • Search results for '<data:view.search.query.escaped/>'

6. If the current page is the result of a search query, the variable blogDesc is displayed, followed by • and the search query that was performed.

   Result (example):
   Code, music, reviews and pc productivity tips from O'Cor • Search results for 'back to basic'

<b:elseif cond='data:view.search.label'/>

7. If the current page is not the result of a search query, elseif here checks if it is the result of a label search.

<data:blogDesc/> <data:blog.title/> • Displaying posts with topic '<data:view.search.label.escaped/>'

8. If the current page is the result of a label search, the variable blogDesc is displayed, followed by • and the name of the label that is displayed.

   Result (example):
   Code, music, reviews and pc productivity tips from O'Cor • Displaying posts with topic 'Blogger'

<b:elseif cond='data:view.isArchive'/>

9. Finally, if the current page is not the result of a label search either, elseif here checks if an archive page is displayed.

<data:blogDesc/> <data:blog.title/> • <data:view.archive.rangeMessage/>

10. If the current page is displaying an archive page, the variable blogDesc is displayed, followed by the blog title, • and data:view.archive.rangeMessage, which displays a message with the date (MM, YYYY) of the currently displayed archive.

    Result (example):
    Code, music, reviews and pc productivity tips from O'Cor • Showing posts from May, 2019

<b:else/>

11. If none of the previous conditions are met, it must be a normal page or post that is displayed:

<data:view.title.escaped/> • <data:blogDesc/> <data:blog.title/>

12. Result (example):
    Blogger Tutorial: the best SEO title tag, Addendum • Code, music, reviews and pc productivity tips from O'Cor

One more difference: the order of the titles

You may have noticed another change from the previous version of the code and that is the order in which the page titles and the blog name are displayed.

For indexable pages, the order still is page title first, blog title last. However, for pages that are not indexed, the order is not important to search robots. It is to human visitors though. That's why in these cases I changed the order into blog title first, page title last. See lines 6, 8 and 10 in the code.

Conclusion

Again, many variants are possible. However, I'm pretty satisfied with the result.

Because you have made it to the end of this tutorial, and as a free bonus, you may now consider yourself Commander in the Order of Blogger Titles!

I don't hold the truth. Besides, there may well be more truths to titles than I am aware of. Care to share your truth? Please do so in a comment below.