JavaScript: Changing the page title with JavaScript

There is a mobile optimized version of this page, view AMP Version.

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 Williams

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

Post Tags:
, ,
  • Wayne

    I'm using JavaScript to display a different language version of a page (English or Portuguese), depending on which radio button is clicked. One of the elements to be changed is the page's title. In other words, this doesn't happen automatically because it requires action on the user's part. Surely, this should not cause any SEO problems. Am I wrong? (I'm still a baby when it comes to JavaScript.) 🙂

    There's a JavaScript question I need to ask you on another topic. I've been searching online like FOREVER but somehow I'm just not finding it. It seems like something many folks would ask about but somehow I'm not finding it.

  • Hey Wayne,
    Yes there will be an SEO impact, search engines will not pick up the "ajaxed language" of the page - so for instance if the site is in English by default, the search engines will not know about the Portuguese version of the site, thus no cached copy of that version will be made nor will there be any crawling of that version - meaning no search terms or visitors for that language.

    You could get around this by having a switch flag also in the URL and having a link at the bottom of every page to "view in other language" that search engines can pick up and follow.

    Keep the questions rolling and I will try help you best I can 🙂