38

I've just opened a blank HTML page with some little amount of base tags (like html, body, head, etc) in Google Chrome, and tried to execute the following command in console:

history.pushState(null, 'my test title', '/test/url');

History events work fine, but the page title stays unchanged. Is it OK? Should I change it manually every time? If I should, why there is such parameter in pushState() method like title?

Samveen
  • 3,412
  • 34
  • 49
avasin
  • 7,370
  • 11
  • 69
  • 116
  • 1
    Apparently it's a known issue with current browsers - none of them support automatic replacement. http://engineering.twitter.com/2012/12/implementing-pushstate-for-twittercom_7.html – Kirill Mar 07 '13 at 01:52
  • @Kirill, Works on Safari and Opera, see http://stackoverflow.com/q/26316325/632951 . But doesn't work on Chrome/FireFox, see http://stackoverflow.com/q/26324990/632951 – Pacerier Oct 12 '14 at 12:18

4 Answers4

46

It seems current browsers don't support pushState title attribute. You can easily achieve the same thing by setting it in JS.

document.title = "This is the new page title.";
Kirill
  • 3,485
  • 4
  • 28
  • 34
  • 3
    How about when you hit the back button? It remains same. – siniradam Jul 16 '14 at 13:52
  • 9
    @Kirill, How did this get 10 upvotes? This does not work. **Does not work!** All the history entries will end up having the same title, see http://stackoverflow.com/q/26324990/632951 – Pacerier Oct 12 '14 at 12:17
  • Setting the title using `document.title` is not recommended if you want good SEO. – Rahul Desai Mar 27 '15 at 09:06
  • 10
    Where people are complaining that it doesn't work for several reasons, this should be used in conjunction with pushState and replaceState. More specifically this should operate in the popstate listener to make sure the document.title is updated accordingly. – Leonard Nov 06 '15 at 15:27
  • 2
    @RahulDesai: Generally, people who use title/history are doing so as a performance optimization (shell architecture, infinite paging, etc.). Such pages are *already* invisible to the search engines, so it's pointless to worry about SEO at that point. Normally, every URL generated via the history API will also be a valid stand-alone URL with a proper title; document.title is only used when simulating navigation to avoid full page refreshes. – Brian Apr 15 '19 at 20:50
4

Setting the title using document.title is not recommended if you want good SEO.

History.js gracefully supports the HTML5 History/State APIs (pushState, replaceState, onPopState) in all browsers. Including continued support for data, titles, replaceState. Supports jQuery, MooTools and Prototype.

Demo

Source

Community
  • 1
  • 1
Rahul Desai
  • 13,802
  • 14
  • 75
  • 128
  • 2
    It sure worked much better for me...solved a bunch of problems. – Stonetip Oct 29 '15 at 22:19
  • 5
    What has SEO got to do with javascript? I was under the impression that pushState should only be used to avoid reloads when triggering JS in the page. – Will S Mar 14 '16 at 14:10
  • 2
    History.js was indeed a great effort and a good project, but unfortunately is not developed, and not even maintained for years now. It has tons of issues and bugs. I would strongly recommend against it, unless one **really** needs a wide browser support (which is getting less relevant nowadays IMO). – Zoltán Tamási Aug 31 '16 at 08:17
  • 2
    History does the same thing... simply tries to changes title elements if not then sets it using DOM. – Maxim May 26 '17 at 03:43
2

Following code will change the page title when you use history.pushState

$(document).prop('title','your page title');

It is working with IE also.

S.Akruwala
  • 1,048
  • 10
  • 7
  • 20
    unnecessary usage of jQuery – Zander Brown Jun 01 '17 at 18:00
  • @AlexB : please suggest a better way if you have! the requirement is to change page title also. now if you are already using js using "history.push" then what is the issue in using jquery to set title? – S.Akruwala Jun 15 '17 at 06:38
  • 7
    Because jQuery isn't needed for history.push and `document.title = 'your page title';` does that job perfectly (and is essentially what jQuery does internally) – Zander Brown Jun 15 '17 at 15:36
0

Currently, the title is being changed in all modern browsers using history.push(), but you have to change the URL. If you only add "#locationhash" it won't change the title, which makes sense.

Martin Zvarík
  • 1,232
  • 13
  • 23