We developers like our acronyms. SEO for SPA...
Search Engine Optimization for Single-Page Apps
Single-page apps are one of the latest growing trends in web development and aim to create a "native-like" user experience. There are no page refreshes, content slides in and bounces out and all of the smooth features you get on your mobile applications. Single-page apps take advantage of the improved capabilities of both your hardware (smartphones today have more than 100 times the computing power of the average satellite*) and your browser. The latest browsers can do much more than the beloved IE6; not just in terms of CSS compatability, but also JavaScript functionality.
Single-page apps could be built in native JavaScript, however most developers ordinarily make us of SPA-frameworks, such as #AngularJS, #knockoutjs, #sammyjs, #durandal...etc. These frameworks vary slightly, and we will not go into the merits of which is better than the other, because they all offer different aspects and what could be done with one, could most likely be done with the other; however they all have on thing in common, they all allow you to build your single-page app.
So what does the code look like for a single-page app? Very often, the entirety of the web application is done in JavaScript, which means that your 'backend' would consist of a single index.html file which loads the JavaScript. Things like routing would also be handled by JavaScript, so when navigating to a URL; the JavaScript framework would understand the URL and load the different views respectively. Very often there is a considerable amount of pre-loading to create the fastest experience possible; which might result in a preloading animation whilst the website 'loads'.
The website's content is then usually loaded from an API, which means that if you load the website with JavaScript disabled, you have an empty page. This goes against the priciple of progressive enhancement and unfortunately it is the way that most single-page apps are developed. For example, take a look at:
The HTML without JavaScript looks like this (I stripped off some inline CSS); which needless to say is of zero SEO value.
<body>
<div id="applicationHost">
<div id="app-splash" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #3ebeba; color: #fff; text-align: center;">
<div class="app-loader-container">
<div class="app-loader">
<div class="app-loader-rings">
<div class="ring"></div>
<div class="ring"></div>
<div class="ring"></div>
</div>
</div>
</div>
</div>
</div>
<script src="/assets/js/main-built-c9d74035ecf9b9aba46058750d0db4cf.js"></script>
</body>
Whilst Google has begun to start crawling JavaScript websites, it is still debatable whether to depend on it for your search-engine ranking.
During the #ngeurope conference in Paris, Brad Green from Angular claimed that Google should be able to fully-crawl an Angular application by the end of 2014. As far as I'm aware that is not yet the case, however I asked him what should be done when you want to rank for all search engines, instead of being dependent on Google:
The suggested approach is a headless-browser; such as PhantomJS which would crawl your entire website and create an HTML representation of it. Googlebot would then hit this HTML representation instead of the rendered content, so it would be imperative to update the HTML snapshot regularly if your content is changing frequently. There are also services which provide something similar, such as BromBone....and quite frankly, both felt like a hack; rather than doing things the correct way.
The Incredible Way...
We are working on a JavaScript library that will take an existent site, and provided it has the correct server-side implementation, including JSON endpoints; turn it into a simple single-page application, including page transitions and other fancy stuff. This will mostly be a cosmetic change, i.e. some of the advantages associated with single-page applications cannot be taken advantage of because of the simplistic nature of the plugin; however it makes for a pretty neat user experience.
And the caveat....unfortunately this is still a work in progress but should enough be on GitHub in the very near future. :(
* http://www.nasa.gov/multimedia/podcasting/TWAN_11_23_12_prt.htm