AngularJS is an excellent framework for building websites and apps. Built in routing, data-binding and directives among other features enable AngularJS to completely handle the front-end of any type of application. The one pitfall to using AngularJS (for now) is Search Engine Optimization (SEO) (effective SEO for AngularJS). In this tutorial, we will go over how to make your AngularJS website or application crawlable by Google.
Pre-rendering is the rendering of the page in advance at the server side for the client so when the crawlers visits site they see this rendered page and index it. However you will need to tell the crawlers to index the pre-rendered content instead of the live content. For this, you have to add a fragment meta tag to all of your pages. So when the crawlers see this tag, they pass a URL string parameter like so “?_escaped_fragment_.” This redirects the Googlebot to the server to fetch the pre-rendered version of the page.
Remove the Hashes:
You need to remove all the hashes that Angular uses by default. These hashes make a URL that should be example.com/about look like example.com/#/about. This you can achieve by making use of the $location service which parses the URL in the address bar and makes appropriate changes to your application and vice versa. You can use $locationProviders when configuring your routes to get this right. Removal of the hashes makes it easier for SE crawlers to index a URL.
Search engine bots tend to append relative links to whatever is in the address bar instead of the home URL. This can be problematic and can list an infinite number of URLs for your application with the search engine. All of which are obviously broken.
You must use html5 mode. For the html5 mode to work properly, you must configure your
webserver so that requests to directories that don’t exist get rewritten to index.html.
Once you have prerender.io configured, your single page web app is 90% configured for SEO. What’s left is to make sure that you are including all the pages that you want indexed in your sitemap.xml file.Google does not properly follow links in AngularJS apps yet, therefore you must create a sitemap for all of your routes. This sounds like a pain to do, however, with proper build processes this can be a very automated process. (gulp, grunt, etc.)
I hope these tips will help you doing effective SEO of your AngularJS based site. Keep visiting ArtzStudio for learning more hacks.