JavaScript: Changing the page title with JavaScript

So this is something I was implementing today. And as I usually do with these sorts off tasks, I did a search on Google to see if there were good/bad methods to accomplishing the task I required.

However the first result (which had the best approach I could find) said “Don't do this!!”. to me this is a major oversight by the blogger, but since the post was made in 2005, I’ll will let the blogger off… this time…

So let me share quickly the obvious con’s to doing this:

• Search engine bots will only see the “original” title, so making sure the title is informative for the content before the browser receives it helps with SEO (don't forget the title is what appears as the title of your search engine result!).
• If the user has JavaScript disabled then the title will never change, so don't rely on the user being able to read the data!
• Browser history titles do not update to reflect the changed title, and it remains the default title read when the page loaded.

However due to WEB 2.0 and 3.0, the page refresh is becoming dead and systems are now doing fancy AJAX content switching, which is not only more efficient data wise, but is also much more pleasant for the user and allows for some neat transition effects and etc.

With this new kind of web there is a problem, if the page itself is not reloading then the title of the page will always be the same as the page the user first landed on, this is why changing the page title is now so vital and important.

Obviously if you setup your site correctly, search engines (and non JavaScript users) will still navigate your site using the traditional approach of loading each page of the site, in this respect they will see titles and content like any other website, but for our AJAX users, when we change the content of the page we will also change the title of the page dynamically to reflect the page the user is on.

This is really good for usability, to change the document title you can use this:

<script type="text/javascript" language="javascript">
document.title = "The new title goes here.";
</script>

Please see also, Changing the address bar URL when loading content with AJAX.

Author: Dean WilliamsI'm a Web Developer, Graphics Designer and Gamer, this is my personal site which provides PHP programming advice, hints and tips

Twitter Facebook Linkedin