The History API is a browser interface through which JavaScript reads and changes the session history of a tab. The name also belongs to many unrelated product APIs. This entry covers the browser interface. With pushState() a script adds a history entry, optionally with a new URL, and the page does not reload.
How does the History API work?
pushState(state, unused, url) takes a serializable state object, a parameter that exists for historical reasons, and an optional URL. The browser does not attempt to load that URL after the call. The URL must have the same origin as the current one, otherwise pushState() throws an exception. When the user moves through the history, a popstate event fires. Unlike setting window.location to a hash, pushState() never fires hashchange. replaceState() replaces the current entry instead of adding one.
What does it mean for SEO?
Single-page applications switch views with JavaScript. Google recommends the History API for routing between views and advises against using URL fragments to load different content, because Googlebot cannot reliably resolve them. In its example, links are normal <a href="/products"> elements and the script calls pushState() on click.
Since every such URL can also be requested directly, for example after a reload or by a crawler, the server should be able to answer it with the page and a fitting status code (assessment).
Example
const url = new URL(location);
url.pathname = "/shoes/sneakers";
history.pushState({}, "", url);
The address bar shows /shoes/sneakers, and the page did not reload.
Sources
- History API – MDNdeveloper.mozilla.org
- History: pushState() – MDNdeveloper.mozilla.org
- Fix Search-related JavaScript problems – Google Search Centraldevelopers.google.com
Last updated: