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:

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

If you're building a big site your CMS or Framework must already be able to do this. — elclanrs
– elclanrs, Commented Sep 16, 2012 at 2:10
I'm building the site custom. Not through a CMS Like wordpress or Joomla. Developing pages and uploading files to a server basically. — trobbins26
– trobbins26, Commented Sep 16, 2012 at 5:06

ruswick · Accepted Answer · 2012-09-16 04:38:56Z

7

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

document.title = "some_title_here";

answered Sep 16, 2012 at 4:38

ruswick

1543 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

trobbins26 Over a year ago

I'm not trying to replace the title. I'm trying to generate a dynamic title bases on the location of the page within the folder structure of my site.

elclanrs · Accepted Answer · 2012-09-16 05:29:12Z

6

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

edited Sep 16, 2012 at 5:29

answered Sep 16, 2012 at 5:21

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

9 Comments

trobbins26 Over a year ago

This is exactly what I'm looking for. Thank you! However it doesn't seem to be working on my page. I placed the script inside of script tags, but on upload, it doesn't apply to the title of the page as it should. Please advise...

trobbins26 Over a year ago

I figured out how to emplament the code for the most part, however I have a couple questions. 1) How do i eliminate certain special characters in the dynamic display titles, such as dashes and underscores. I tried adding a couple lines of code unsuccessfully. 2.) How do I make it so, instead of adding additional text at the end of the string (as shown in your example), my unique page value replaces only dynamic page value. For example, adding "Frogs are awsome" would replace the dynamic value of "Frogs".

trobbins26 Over a year ago

Lastly, 3) How can I set the default Root value to something unique like "Home"

elclanrs Over a year ago

1) Use regexp and replace() your characters with '' 2) Remove the last item in the array conditionally with pop() 3) Add one more parameter root and remove first item of array conditionally with shift() then prepend root

trobbins26 Over a year ago

I'll give it a shot, but im no JS expert yet :) Could you show me a modified example of your original code. View my most recent attempt here: view-source:trcreative.us/dev/jmsracing/races/pigman-long-and-olympic/…

|

lukek · Accepted Answer · 2012-09-16 06:08:38Z

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.

answered Sep 16, 2012 at 6:08

lukek

4783 silver badges13 bronze badges

1 Comment

lukek Over a year ago

Ideally you may even be able to incorporate this into your breadcrumb script if you find it's duplicating code.

Muhammad Ummar · Accepted Answer · 2012-09-16 02:10:20Z

1

Try this code in JQuery

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

answered Sep 16, 2012 at 2:10

Muhammad Ummar

3,6316 gold badges43 silver badges72 bronze badges

2 Comments

trobbins26 Over a year ago

How is this different than adding a title to the page. I would still need to have this at page level. Idealy where you've added 'your page title goes here', i would want the dynamic generated title (like in my breadcrumbs

trobbins26 Over a year ago

Can you explain where this should be added to the HTML page to replace the title. All I'm seeing on my test page is the static title I have added. The code is not applying.

Collectives™ on Stack Overflow

build an html title tag dynamically with javascript

4 Answers 4

1 Comment

9 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

9 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related