build an html title tag dynamically with javascript

Question

I have many pages on a site im developing, in which each page has its own title tag. In many cases the titles have constant text, for example:

Home | Section 1 | Page 1
Home | Section 1 | Page 2
Home | Section 1 | Page 3, etc...

Inserting these titles makes for harder changes later on, not to mention the hassle of remembering to add them. I'm looking to find a method of dynamically generating the title of each page with javascript, based off the location of the page within the folder structure of the site.

Im currently using a script that does something like this for breadcrumbs, but am not sure how to either reference the same script, or build a similar one for page titles. The breadcrumb script is here: http://trcreative.us/dev/jmsracing/js/breadcrumbs.js

and for the most part doing exactly what I need for titles, minus links per each breadcrumb item. (I don't want it to do that for title's obviously).

See breadcrumbs applied here: http://trcreative.us/dev/jmsracing/races/pigman-long-and-olympic/

Any help would be appreciated. Thank you

Solution 1

Assuming that your url's are as following home/section/page.html you could use this function at the top of any page and it will set the title based on the url if that's what you mean.

function setTitle(extra) {
  document.title = location.pathname.split('/').map(function(v) {
    return v.replace(/\.(html|php)/, '')
      .replace(/^\w/, function(a) { return a.toUpperCase(); });
  }).join(' | ') + (extra && ' | '+ extra);
}

Using this function will generate a title like this: Home | Section | Page. If you want to add specific stuff for a particular page then pass a string as the extra parameter and it will be added to the title ie.

// url: http://mypage.com/home/about/frogs    
setTitle('Frogs are awesome');
console.log(document.title); //=> Home | About | Frogs | Frogs are awesome

Solution 2

The document object has a title property that can be explicitly set like this:

document.title = "some_title_here";

Solution 3

You can use something like (if using javascript)

var getTitleOfPage = function(){
    // logic here to work out the title of the page.
};

var title = getTitleOfPage();
document.title = title;

Alternatively you may be able to use what ever server side language you are using to set the title also.

Solution 4

Try this code in JQuery

<script type="text/javascript">
  $(document).ready(function() {
    document.title = 'your page title goes here';
  });
</script>

View more solutions