How to make a SPA SEO crawlable?

Question

I\'ve been working on how to make a SPA crawlable by google based on google\'s instructions. Even though there are quite a few general explanations I couldn\'t find anywhere

Answer 1

Here is a link to a screencast-recording from my Ember.js Training class I hosted in London on August 14th. It outlines a strategy for both your client-side application and for you server-side application, as well as gives a live demonstration of how implementing these features will provide your JavaScript Single-Page-App with graceful degradation even for users with JavaScript turned off.

It uses PhantomJS to aid in crawling your website.

In short, the steps required are:

• Have a hosted version of the web application you want to crawl, this site needs to have ALL of the data you have in production
• Write a JavaScript application (PhantomJS Script) to load your website
• Add index.html ( or “/“ ) to the list of URLs to crawl
  • Pop the first URL added to the crawl-list
  • Load page and render its DOM
  • Find any links on the loaded page that links to your own site (URL filtering)
  • Add this link to a list of “crawlable” URLS, if its not already crawled
  • Store the rendered DOM to a file on the file system, but strip away ALL script-tags first
  • At the end, create a Sitemap.xml file with the crawled URLs

Once this step is done, its up to your backend to serve the static-version of your HTML as part of the noscript-tag on that page. This will allow Google and other search engines to crawl every single page on your website, even though your app originally is a single-page-app.

Link to the screencast with the full details:

http://www.devcasts.io/p/spas-phantomjs-and-seo/#