How can I change the title of the document during .ready()?

Question

I am using some nested layouts in Ruby on Rails, and in one of the layouts i have a need to read in a string from a div and set that as the title of the document. What is correct way (if any) to set the title of the document?

<script type="text/javascript">
$(document).ready(function() {

    // ???

});
</script>

Zonnya

Just an explanation for the ones wondering for why not just setting the title tag serverside: Sometimes the page is generated with content and action mixed. I.e. you might have an incude-file first, which makes the header, then the content is being pulled from a database, e.g. customer name. Which means at the time the title has been sent, the customer name is not known. It is sloppy coding not separating business logic and presentation, get all data first, then displauy it, but sometimes that's what you have. Boss: "Just put the customername in the title" You "I have to refactor all code." – Lalonde

Answer 1

The following should work but it wouldn't be SEO compatible. It's best to put the title in the title tag.

<script type="text/javascript">

    $(document).ready(function() {
        document.title = 'blah';
    });

</script>

Parik

Wouldn't any javascript-generated HTML be SEO incompatible? I'm pretty sure googlebot doesn't execute javascript... – Illusionist

I've read that there's ways to tell Google Bot what to read when your pages is made with Ajax... trying googling around. – Intimate

@trusktr: I think you're talking about this Google-article: Making AJAX Applications Crawlable. But it has NOTHING to do with this kind of problem, so Orion Edwards is right. It's just a method to let Google read contents that are normally generated with AJAX, via HTML snapshots and some server side modifications. – Gadson

Using html text in the title is not working. Say I use <span class="test"> Blah </span> – Systematism

does not work in FF 29.0.1 for me, but this solution described below works: https://mcmap.net/q/157134/-how-can-i-change-the-title-of-the-document-during-ready – Auston

@OrionEdwards Now, more than five years later, rimmkaufman.com/blog/googlebot-crawling-javascript-site-ready/… – Taken

@dpan, I am facing a issue by using both <title> tag & document.title in a single file. When pages loaded, first text written in <title> tag load for some nano second after that document.title works. If I'll remove <title> tag then site url is displaying for some nano second then document.title works. I don't want to display the title from <title> tag, I want to directly load the tile from document.title. Please help. – Gardner

@NishantPandya you can see the "original" title for a brief moment because the JS code is executed only on DOM ready. You could remove the $(document).ready stuff and just print document.title = 'blah';. But, if you can do that, maybe you could just change the <title> tag content on server-side.. – Carnay

Answer 2

Do not use $('title').text('hi'), because IE doesn't support it.

It is better to use document.title = 'new title';

Anet

Answer 3

This works fine in all browser...

$(document).attr("title", "New Title");

Works in IE too

Doehne

Answer 4

Like this:

$(document).ready(function ()
{
    document.title = "Hello World!";
});

Be sure to set a default-title if you want your site to be properly indexed by search-engines.

A little tip:

$(function ()
{
    // this is a shorthand for the whole document-ready thing
    // In my opinion, it's more readable 
});

Frentz

You should post the shorthand thing as a new "Question" in itself. Useful! – Knight

Not sure I understand you, MDCore. – Frentz

Jeff has suggested one uses stackoverflow for those technical tips that one might put on one's blog. I was suggesting posting the tip as a new question that you answer yourself. – Knight

Answer 5

<script type="text/javascript">
$(document).ready(function() {

    $(this).attr("title", "sometitle");

});
</script>

Vitiated

yes, actually, you cannot use $('title').text(...) because of bug in IE – Septicidal

Why not document.title ? – Paratyphoid

Answer 6

document.title was not working for me.

Here is another way to do it using JQuery

$('html head').find('title').text("My New Page Title");

Surovy

for me either (FF 29.0.1) and if there is no <title> set up at all, even $('html head').add('<title>override default title</title>') does not work – Auston

Answer 7

I am using some nested layouts in Ruby on Rails, and in one of the layouts i have a need to read in a string from a div and set that as the title of the document.

The correct way to do this is on the server side.

In your layout, there at some point will be some code which puts the text in the div. Make this code also set some instance variable such as @page_title, and then in your outer layout have it do <%= @page_title || 'Default Title' %>

Illusionist

Answer 8

If you have got a serverside script get_title.php that echoes the current title session this works fine in jQuery:

$.get('get_title.php',function(*respons*){
    title=*respons* + 'whatever you want'   
    $(document).attr('title',title)
})

Cavort

doing an ajax request for setting the title is very wasteful in my opinion. – Zonnya

OP specifically requested a jQuery solution to a client-side problem. – Exploit

Setting the title via ajax is useful, as it can help to identify the current browser tab for the user when they're on a different page. – Driveway