Render static indexable pages with AngularJS for SEO purposes?

Question

I'm currently working on a social app using Angular. I'd be keen to have public, search engine indexable pages to accompany the app, such as an indexable homepage, about page and contact page.

What would be the best way to go about this? I'm undecided what my backend infrastructure is going to be, but it either going to be one of the following:

1. nginx/apache server to vend all content with an external pub/sub service for realtime.
2. Separate service for both front end and backend - nginx server vending front end content. Separate node server for backend socket stuff.

Any advice on this would great. I'm keen to figure out whether angular handles all of the routing, or whether i handle the static routes separately. This is my first time playing with Angular.

Cheers.

Answer 1

I might be wrong but I think your problem is not an AngularJS one, it's more fundamental than that.

Your issue is one where you are loading HTML content via AJAX. And how does Google etc. crawl AJAX loaded content if it can't execute JavaScript?

This might help: https://developers.google.com/webmasters/ajax-crawling/

This might help too but its geared towards .NET: http://gregorypratt.github.com/Ajax-Crawling/

If you provide a solution where you let AngularJS do the routing but you still are able to serve static content from the server when ?_escaped_fragment_= is present in the URL then you're good to go. You get single page app benefits whilst still being crawlable.

The following is an example site using AngularJS routing and static content being served for Google et al.

http://artelier.co.uk/#!/about

http://artelier.co.uk/?_escaped_fragment_=/about (turn off JS to see it work)