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

Answer 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