Ad

Google Friendlier Angular URLs?

- 1 answer

I'm making an entire site using angular. Using routes the urls come out to www.mysite.com/#/mypage. I'd like this to change to www.mysite.com/mypage without navigating away from the page and do screenshots for google bots. How can I do this with angular?

Ad

Answer

You need to follow Google rules regarding SPA crawling.

1) Enable Angular HTML5 mode and hashbang prefix with :

$locationProvider.html5Mode(true).hashPrefix('!');

So you will have standard urls (www.mysite.com/mypage) on modern browser for your users, and hashbangs urls (www.mysite.com/#!/mypage) for old browsers and crawlers.

2) Add <meta name="fragment" content="!" /> to your head

3) For each angular pretty url ( #!/mypage/key=value) your server also need to serve ugly urls (#!/mypage?_escaped_fragment_=key=value) with an HTML snapshot. You can use PhantomJS for this.

And you are done, but for best results also implement canonical urls.

Ad
source: stackoverflow.com
Ad