Latest 2015 method to make your Angular projects SEO friendly

Question

I build a large angularJS website and made it multi languages by partial loading json files. My website is full of these strings:

{{ 'TITLE' | translate }}

I'm not sure how to make them SEO friendly. I found many solutions on the internet, but also many people that stated that it wasn't needed anymore because Google and Bing can scan angular projects.

So I set my project to html5 = true, but it created an error that <base> was missing. So I implemented a <base href="/"> but my project was later on deployed to a subfolder /staging/ so all links where broken. (my dev and live environment have different base)

I'm not happy with relying on 3th parties like prerender.io

What is the most recent method to get your Angular projects SEO friendly. And is there also a localhost solution? Can Grunt maybe prerender all my pages so I can implement it in my build script?

Answer 1

You can actually create your own service similar to Prerender.io. It relys on using PhantomJs to render the pages.

First you add the following meta tag to the head of your site:

<meta name="fragment" content="!" />

Jesse Lawson created an SEO module you add to your site, and then you just need to set up PhantomJs on your webserver.

Here are the full details:

http://lawsonry.com/2014/05/diy-angularjs-seo-with-phantomjs-the-easy-way/