Yesterday, I spent some time out and I met up with my friend, coach and mentor – Patrick, so we could discuss on the things that I have done up for his blog. I’m currently working with him to help him optimize his blog about Designing Your Life and Making Good Decisions.

Here was his blog before:

… and here is his blog now.

So as you can see, over these few weeks, I basically got the blog template revamped and optimized. I mentioned it earlier here on this blog that I wasn’t very familiar with Blogger templates, because I was working with WordPress all the while. This project gave me the opportunity to look back and restart from the basics.

While the new Blogger allows us to use the drag and drop, widget-style template, I reverted back to the old HTML, just using the classic style templates. I think widgets are great for quick editing of templates, but when it comes to optimization for search engines, we really need to know what is the underlying code that these widgets produce. If you are familiar with the widgets and how to control them, its great, but for myself, I really prefer more control over the HTML codes and exactly what code is shown behind the scenes.

Since I’ve taken time to look at the template tags for Blogger, I guess it would be good if I can share with the rest of you.

Let’s start by talking about about SEO for blogs.

SEO for Blogs

Most SEO practitioners would understand that a well optimized site requires a lot of attention to be paid to the underlying HTML of every page. This means that in order for you to build a well optimized static HTML site (i.e. no database queries and stuff like that), the optimization process will require that every page be looked into, so that the very key items like the page title, and meta tags are changed accordingly for each page, so that the search engine bots will be able to easily tell the difference between pages.

This however, becomes a little challenging for blogs – because in a blog environment you cannot edit just one post (well, you can do that in WordPress, but not for Blogger, as far as I know it). The WordPress template system runs on a hierarchy, making tweaking flexible, because you can easily use a different page for a category, or for a single post, or for a blog archive page. For the Blogger template, however, all you can do is to make changes to one template file. This means that that ONE file will need to cater for the different sections of the blog, whether you are viewing a permalink, or a category or the main page.

That is the challenge.

Fortunately, Blogger provides a couple of very nifty tags for you to customize this. The tags are:

1. <MainPage>...</MainPage> – Anything that goes between these tags will be processed in the main blog page, so for example, if you are hosting with blogspot, code between these tags will be shown when you access http://yourblog.blogspot.com. In this page, the part between the tags <blogger> and </blogger> will be repeated many times, one for each post.
2. <ArchivePage>...</ArchivePage> – HTML code that goes between these tags will be processed when the user surfs on to an archive page. So for example, if the user surfs on to the January 2005 archives, the code betweent these tags will be processed. Similar to the previous one, the part between <blogger> and </blogger> will be repeated once for each post
3. <ItemPage>...</ItemPage> – Code between these two tags will be processed only when the reader surfs on to a permalink page – that is, a page that shows typically shows only one post, and then followed by a string of comments.

There is also a tag that goes <MainOrArchivePage>...</MainOrArchivePage> – and these are basically a combination of <MainPage>...</MainPage> and <ArchivePage>...</ArchivePage>.

So what, when you have these tags?

I guess that is the question on your mind right now. Well so what? How do I apply that to tweak the design?

Let me give an example as to how you can use these three tags for work on SEO. Remember every page needs to have a different title? If you look at any typical template, what you will see in the in the head section of the HTML (where the title tag is), is something like this:

<title><$BlogPageTitle$></title>

What this generates, however, is not so SEO friendly, because the <$BlogPageTitle$> tag works in such a way that if you are displaying your your blog main page, it displays the blog title, and when you display your permalink, the title changes to something in the format [Blog Title] : [Post Title].

So if my blog name is “My Daily Thoughts”, and my post title is “I started Internet Marketing”, what I will see in the title when I surf on to the post page is “My Daily Thoughts : I started Internet Marketing”.

This is not good, because your keywords for the post are in the post title. You want to emphasise that to the search engine, and the best way to do that is to change it to the format [Post Title] : [Blog Title].

How do you do that?

Ah ha! 😛 That is when the tags come into good use.

Let me first display what I would use. That single line previously, would be replaced by something like this:

<MainPage>
  <title><$BlogPageTitle$></title>
</MainPage>

<ArchivePage>
  <title><$BlogPageTitle$> Blog Archives</title>
</ArchivePage>

<ItemPage>
  <Blogger><BlogItemTitle><title>
    <$BlogItemTitle$> : <$BlogTitle$>
  </title></BlogItemTitle></Blogger>
</ItemPage>

Note what goes on now. I have used the three different tags to work on each individual type of page separately.

On the main page, I want to show only the blog title. So within the <MainPage>...</MainPage> tags, I will show only default <$BlogPageTitle$>.

On the archive page, I want to show something like “My Daily Thoughts Blog Archive”, so I appended the word “Blog Archive” to the back of the <$BlogPageTitle$> code.

Lastly on the item page, I want to show something like “I started Internet Marketing : My Daily Thoughts”, so what I did was I had to extract out the item title from the post, which will come in the form of this:

<Blogger><BlogItemTitle><title>
  <$BlogItemTitle$> : <$BlogTitle$>
</title></BlogItemTitle></Blogger>

So, with the use of these three tags, I now have more control over what exactly is being displayed on each page. This title example is just one part of the template which I tweaked. Using the same principles, I made changes to the way how things are displayed for the main page, archive page and the item page, to make sure the important titles and keywords are highlighted to the search engines with header tags like <h1>...</h1>.

Of course, optimizing the template is just one part of the whole blog marketing process. After that, it is really up to the blogger himself to keep writing good articles, and go around leaving links to his blogs through comments, articles, forums and whatever means (minus spam! :mrgreen:) to get his blog up the listings of Google.

Do you have a Blogger blog? Have you optimized your template yet?