26 March 2008

Swap Blog Title and Post Title on Blogger

Update 2: You can find an up2date workaround described here

Change title tags for your blogger posts swap title hack

Update; Major issue ! Seems this and similar "title-above-head-tag-hack" breaks the visual layout editor in blogger when you subsequently want to add new pagelements via the visual editor
...... sigh

Note; following the advice from MYSS I'm pitching in the sidebar and focus my pages, thus will switch to blogging about different themes on different blogs.

Originial post below:

rockstar_32Wow, after some hefty research and a couple of late nights, I can release my first blogger hack!

An updated march 2008 version of the popular "Swap Blog Title and Post Title on Blogger".

From a SEO point it's more optimal to have the post title appear as the page title instead of a generic blogtitle first.

There's one minor issue I haven't been able to solve yet, the title tag ends above the head tag, which is not according to W3C standards for Title tag - but it should be rendered correctly by all browsers and even more important picked up by searchbots too .... so until something better shows up this hack should do the trick.

The hack's basic feature and design is similar to the old hack but I've eliminated some unneeded code, I suspect the original hack were done by someone without solid coding background (and understanding).

I've annotated the code to enhance clarity, but no guaranties for minor inaccuracy as I'm not completely confident with Blogger's framework yet.

anyway, here goes

1) Take a backup of existing template first ! - click Download full template and save it

2) Click expand Widget
Expand Widgget

3) Find this code in the top of blogger template,

4) Substitute with the code in table below - download link at the bottom of this post

5) Save Template

Note; Apparently Blogger integrates the new widget introduced in the hack with other widgets present, so when you re-open your template it will look differently and your widget hack code has been re-formatted and integrated with other widgets present in your template - it could be a problem later ..... so use this hack at your risk and keep your original back-up a safe place.

It's possible to re-find the added widget code after reformat by blogger, but it's not easy.

Note; Beats me why blogger keeps floating the table below down ... still looking into that

<b:include data='blog' name='all-head-content'/>Include head content, loads page variable (I'm not totally clear about this one - no available documentation found)

<b:if cond='data:blog.pageType == "item"'>
if this is an item page we want to do something

<b:section id='titleTag' class='header' maxwidgets='1' showaddelement='no'>
<b:widget id='SwapTitle' locked='false' title='Swap Title' type='Blog'>
Widget needed for the code to work so we declare one, and as widget needs to be in a section we declare a section too

<b:includable id='posttitle' var='record'>
Declaration of subfuntion posttitle which takes the parameter record (parameter will be an object which contains information related to a specific post).
For each record passed we generate a title tag (knowing we only will be called once, but since the post record is a part of an array we need to do this loop thing)

<b:includable id='main' var='top'>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='posttitle'/>
Main routine in widget.
Loops through all post (which is exactly one as we are only doing this on a item page), calls the subfuntion posttitle

widget and section closure

Use blogtitle if on main blogpage

Header tag is placed here, below our title hack!. Reason for placement below; otherwise we will get this error when trying to save our template;
Your template is invalid because the tag 'b:section' appears inside of the tag 'head'

Click here to download the code to Swap Blog Title and Post Title on Blogger

If you like this hack, give me a blogger-hug .... read - a link to this post !

Thanks to following resources


ChampDog said...

I made some clean up too but yours one is better. I"m using your code now and thanks for the post.

Anyway, appreciate if you can update this post if there is a workaround to put the title after the "head".

My blog has not been cached for sometime and I"m not sure is because of putting the title before the "head".

ChampDog said...

After "Save Template", your code generate bunch of codes but why not in the original version?

Kim Hjortholm said...

@champdog - it's not my code, it's blogger that integrates and reformat the new widget on save of template !

Anyway - I just discovered a major issue!
Seems this and similar "title-above-head-tag-hack" breaks the visual layout editor in blogger when you subsequently want to add new pagelements via the visual editor ......

There's workaround for that, but a bit cumbersome - I'll post my finding at my new blog http://blogger-nuggets.blogspot.com

ChampDog said...

I have reverted back to the original one. Anyway please post a comment here when you have a better workaround so that I'm aware of that. Thanks a lot! :)

Anyway I don't really get it. Why don't blogger just use the title post as default? Do you guys actually file any enhancements request to them?

Andrew Z said...

I'm using this code now. It's nasty from an HTML validation POV, but what can you do. :) Thanks

News Caster Online said...

hi Kim Hjortholm this is good effort but it is not good for seo because i have checked this, i want to share with you my research on your swap code.
first i copy your post title
"Swap Blog Title and Post Title on Blogger"
and search this post title on yahoo,google.. the search result is accurate because the page title was in your page description that's why result was good.
after this, i checked your another page, the title is
"Visualization API coming to GoogleBase ?" search was not appear its mean search engine just check your page description.
according to this situation your swap is not good i think it is just addition of some lines and wastage of time.
you can also check your page title here http://www.seocentro.com/tools/search-engines/metatag-analyzer.html
this will show "no title".
you can check http://labnol.blogspot.com i don't know this is a classic blog or new blogger but title is working very well if its a new blogger template its mean we can also change title..
after all your effort is good but not for bloggers seo.
keep trying........
i am able to change description for each blogger page i will place that technique later bye..............

ChampDog said...

I think you're right. I think it is still okay in Google but not in Yahoo. I think my pages (after putting the title before the head) are not indexed by Yahoo.

Any solution, guys?

Zed Developer said...

thanks a lot.This helped a lot