Page title is not changed by history.pushState

Question

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?

Hulton

Apparently it's a known issue with current browsers - none of them support automatic replacement. engineering.twitter.com/2012/12/… – Arbitral

@Kirill, Works on Safari and Opera, see https://mcmap.net/q/66025/-how-to-set-quot-default-quot-value-for-history-pushstate-and-replacestate/632951 . But doesn't work on Chrome/FireFox, see https://mcmap.net/q/66026/-title-of-history-pushstate-is-unsupported-what-39-s-a-good-alternative/632951 – Presentational

This is 2023. This works in Chrome and probably all other modern browsers. But it is not automatic. You must make sure you set document.title after each push/pop state – Rectum

The HTML5 Spec changed and the "Title" attribute is no longer a part of the function; it's now just "Pass an empty string for the historical second parameter". – Videogenic

Answer 1

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

Arbitral

How about when you hit the back button? It remains same. – Haldane

@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 https://mcmap.net/q/66026/-title-of-history-pushstate-is-unsupported-what-39-s-a-good-alternative/632951 – Presentational

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

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. – Upmost

@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. – Bernetta

Answer 2

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

You may want to consider using History.js

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

Zymotic

It sure worked much better for me...solved a bunch of problems. – Ashliashlie

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. – Sill

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). – Cath

History does the same thing... simply tries to changes title elements if not then sets it using DOM. – Julianejuliann

Answer 3

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

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

It is working with IE also.

Kettledrummer

unnecessary usage of jQuery – Origin

@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? – Kettledrummer

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) – Origin

Answer 4

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.

Loess