SEO And Accessibility With HTML5 PushState, Part 1: Introducing PushState
SEO Friendly And Accessible Versions
As functional as this is, it does nothing for SEO or accessibility. In fact, it has quite a negative effect on these pretty much ensuring your site is not SEO friendly or accessible.
HashBang URLs For SEO Friendliness
For example, Twitter uses hashbangs for it’s user pages:
This helped things along, but presented a new problem as a three-headed monster.
- It in’t an official standard. It’s just a recommendation from Google for developers and other search engines to work with
- It requires potentially strange and painful code to be written on the back-end server. The server must know how to respond to a request with a specially formatted “_escaped_fragment_” URL parameter
- It does almost nothing for accessibility and only addresses SEO directly, as it’s likely only a search engine would implement the needed “_escape_fragment_” request
HTML5’s PushState To The Rescue
(For a complete introduction to the new history management API in HTML5, affectionately known as “PushState”, check out the Dive Into HTML5 guide on History)
Working With PushState URLs
Since we no longer rely on URL hash fragments, when working with PushState, we have to change how we build our applications in a manner that supports PushState directly, and by virtue of this, creates an SEO friendly version of our application and allows us to implement other accessibility enhancements with greater ease.
We can’t stop at just removing the # and enabling PushState, though. Since the URL that our browser now points at is a standard URL and not a hash fragment URL, this means we need to have our server be able to respond to a request directly to that URL. For example, the previous hash fragment of “/#images/1” would be interpreted by the browser as a request to “http://example.com” and then the hash fragment would be handled by the browser, once the contents of the default document for example.com were loaded. With the change to a standard URL, when a browser makes a request to example.com/images/1, the server must be able to respond to that request and provide the rendered HTML and content for the entire page, to display the requested image.
Progressive Enhancement And PushState
Progressive enhancement is a term used to describe a website that is functional with even the most remedial of text-based browsers, screen readers and search engine crawlers, but offers more and more functionality as the capabilities of the browser allow for it. There has been a wealth of knowledge written on progressive enhancement over the last few years, and it is one of the core tenets of building web applications that are both SEO friendly and accessible.
Implementing PushState And Progressive Enhancement With Backbone.js