The SEO problem with Single Page Applications and how HTML pushstate provides a solution.
The rise in mobile device applications and mobile web useage in general has greatly influenced internet user expectations as to how they want their content delivered. When you're navigating around in your favorite iPhone or Android app, the displays usually transition smoothly. You rarely get a feeling that a given page is being "loaded" on your device. As a result, an increasing amount of web content is trying to follow suit.
Looking at a few of these SPA sites confirms how much many of these sites strive to emulate the smooth user experience of a good Android or IOS application as different web pages seem to glide into view without the laborious process of a page loading.
So why aren't more of these single page application sites being built? As a developer, I have been in the room when beautiful, single page application demo sites have been vetoed by project and account managers. The reason why? SEO.
SEO for Single Page Apps
How Twitter Attempted to Provide a Solution to SPA SEO
Another more solid solution was to make sure that if a website was being built as a single page application, a complete duplicate site would be created within the same url to make sure that Google crawlers - working in the background - would index the site pages properly. Again, this was not a viable long term solution. Creating mirror versions of a given live website gave rise to a maintenance nightmare, as code redundancy is the enemy of the web developer.
Enter HTML Push State
Push State is a feature of HTML 5's History API. In modern browsers, the main window object now has a child history object that enables a user to programmatically move backwards for forwards in the browser history via window.history.back() or window.history.forward() giving the same behavior as if the user were clicking on a given entry in their browser's history toolbar menu. But particularly relevant for SEO and SPA applications is one of the history API's methods; pushState.
The pushState method takes three arguments, a data "state" object, a title string, and a url. When the pushState method is called, the url that is passed to it will appear in the browser's url window.
So if you're on http://mydomain.com, and call the below pushState method, the browser window will then show http://mydomain.com/new-page.html.
Note that the state object you pass into the pushState function can contain useful data that you can use on the new page. There is a limitation to the amount of data you can use in a pushState state object however, as the serialized version must be under 640k. There is also a wise limitation built into pushState which only allows new urls that are within the current web domain.
HTML Push State Boosts SEO for Single Page Apps
This new feature HTML 5 offers gives a huge boost to SPAs when it comes to being search engine optimized. However, it doesn't exactly qualify as a quick fix. Going back to our previous example, a user sees the new url mydomain.com/new-page.html magically appear via pushState in the browser window, accompanied by new, ajax loaded page content.That's all well and good, but what happens if the user then hits enter and refreshes the page with that new url?
So all urls that you intend to magically load via pushState will also need to exist as real web pages. Once this happens, Google will then properly acknowlege and index your Single Page Application website as it would any other site. While this involves more grunt work on the part of the developer, the reward offers the best of all worlds: a SPA site that offers a fast and fluid user experience, SEO compliance, and safe, server side fallback urls that operate regardless of browser versions.
Single Page Applications presently comprise only a tiny portion of the web landscape. HTML 5's History API and associated methods may change this by allowing SPA's to compete for search engine rankings on an equal playing field with conventionally built websites.