Using pushState for browser and SEO-friendly websites

The browser back and forward buttons are probably the tools most widely-used by the average internet user. Sites using traditional linking from page to page are why the buttons were designed. However, the ever-increasing popularity of Javascript-based applications that use AJAX implementations cause problems for these buttons.

Simply loading new content via AJAX will not add any new information to the browser's history object. Hitting the back button in this situation results in going back to the previous item in history and may not be what the user is expecting. Thanks to the new pushState method on the browser's history object introduced with HTML5, the trusty back and forward buttons can be utilized to navigate content that was loaded with AJAX.

Using the pushState method, you can manipulate the browser's history object on-the-fly. Doing this provides the user the ability to use the browser buttons to navigate through the added states, even though the browser has not reloaded the page. Loading content with AJAX can be advantageous because it gives the user a smoother and faster experience navigating from page to page because only the content is getting replaced; the page itself is not having to reload the header, footer, and other common elements each time. Used together, AJAX and pushStates creates a nice user experience.

See the Mozilla Developer Network's description for more detailed information on how to use the pushState method, but this is the basic idea:

// Ajax request
$(…

// Display results
$(…

// modify history
history.pushState(obj, title, url);

Using the pushState method, you can save any arbitrary info you want to the push state using the obj parameter. You could then use the popstate event to display the content of the next (forward button) or previous (back button) page using AJAX, like this:

window.addEventListener('popstate', function(e){
   // Ajax request
   // Display results
});

As always, there's a tradeoff when using new features. Browser compatibility is good, but IE9 and below is not supported so some graceful degradation is in order.

Luckily there's a simple way to deal with this: if reasonable for the site being developed, view pushState functionality as a bonus for modern browser users. Build the website first so links behave in the traditional way. This means the content at the URLs you're going to be adding to the history object need to be real pages where that content can be found. If pushStates are not supported by the user's browser, he or she will never know the difference. If pushStates are supported, then the site can utilize the special functionality.

Using this approach, shared URLs are supported, out-of-date browser users are not left out, and SEO does not suffer. Search engines will still be able to index the pages of your site with the content on them. If pushState support in older browsers is required, then it may be helpful to use something like history.js, which provides support all the way down to IE6.

As you can see, with a few extra lines of code you can streamline the user experience but still utilize the browser's native navigation buttons in an SEO and out-of-date-browser-friendly way.