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>

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." — Leif Neland, Jul 29 '16 at 08:50

score 321 · Accepted Answer · edited Sep 06 '13 at 07:02

321

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>

edited Sep 06 '13 at 07:02

cllpse

21,396
37
131
170

answered Oct 07 '08 at 20:00

dpan

5,352
2
26
29

14

Wouldn't any javascript-generated HTML be SEO incompatible? I'm pretty sure googlebot doesn't execute javascript... – Orion Edwards Oct 09 '08 at 19:39
1

I've read that there's ways to tell Google Bot what to read when your pages is made with Ajax... trying googling around. – trusktr Apr 03 '11 at 21:07
2

@trusktr: I think you're talking about this Google-article: [Making AJAX Applications Crawlable](https://developers.google.com/webmasters/ajax-crawling/). 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. – Sk8erPeter Jul 23 '12 at 12:52
Using html text in the title is not working. Say I use Blah – theshadowmonkey Jul 09 '14 at 15:09
1

does not work in FF 29.0.1 for me, but this solution described below works: http://stackoverflow.com/a/11171548/1915920 – Andreas Covidiot Jul 27 '14 at 21:51
2

@OrionEdwards Now, more than five years later, http://www.rimmkaufman.com/blog/googlebot-crawling-javascript-site-ready/03062014/ – kqr Sep 22 '14 at 09:49
@dpan, I am facing a issue by using both `` 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. – Nishant Apr 07 '17 at 08:58
@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 `` tag content on server-side.. – Erenor Paz May 02 '19 at 07:47

score 50 · Answer 2 · edited Jun 28 '15 at 13:19

50

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

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

edited Jun 28 '15 at 13:19

halfer

19,824
17
99
186

answered Oct 31 '10 at 13:31

vasio

501
4
2

score 46 · Answer 3 · edited Jan 07 '14 at 18:00

46

This works fine in all browser...

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

Works in IE too

edited Jan 07 '14 at 18:00

DaniP

37,813
8
65
74

answered Feb 14 '11 at 06:52

Albert

469
4
2

score 37 · Answer 4 · answered Oct 07 '08 at 19:57

37

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 
});

answered Oct 07 '08 at 19:57

cllpse

21,396
37
131
170

3

You should post the shorthand thing as a new "Question" in itself. Useful! – MDCore Oct 07 '08 at 20:11
Not sure I understand you, MDCore. – cllpse Oct 07 '08 at 22:11
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. – MDCore Oct 08 '08 at 12:00

score 17 · Answer 5 · edited Oct 07 '08 at 20:00

17

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

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

});
</script>

edited Oct 07 '08 at 20:00

James Curran

101,701
37
181
258

answered Oct 07 '08 at 19:58

Atanas Korchev

30,562
8
59
93

2

yes, actually, you cannot use `$('title').text(...)` because of [bug in IE](http://bugs.jquery.com/ticket/7825) – Tomas Apr 02 '12 at 16:51
1

Why not `document.title` ? – adardesign Jan 28 '15 at 04:42

score 7 · Answer 6 · answered Jun 23 '12 at 17:29

7

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");

answered Jun 23 '12 at 17:29

John F

429
6
5

for me either (FF 29.0.1) and if there is no `` set up at all, even `$('html head').add('<title>override default title')` does not work – Andreas Covidiot Jul 27 '14 at 21:49

score 5 · Answer 7 · answered Oct 09 '08 at 19:41

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' %>

score -2 · Answer 8 · edited Nov 09 '11 at 11:28

-2

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)
})

edited Nov 09 '11 at 11:28

The_Fox

6,992
2
43
69

answered Nov 09 '11 at 09:43

andreas

1

2

doing an ajax request for setting the title is very wasteful in my opinion. – Jason Miesionczek Nov 09 '11 at 14:29
2

OP specifically requested a jQuery solution to a client-side problem. – Joel Etherton Nov 09 '11 at 19:24
1

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. – chim Jun 26 '13 at 09:31

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

8 Answers8

Linked

Related