There’s a phase in every project when development reaches its completion and next step is to make it search engine friendly.<\/p>\n
When I had to do this task in my project, at that time I was a little bit confident that this is a very simple task and we just need to set meta tags and some other html tags so that google can crawl easily. But while setting these tags with the help of angular<\/a>, what we noticed was, crawled pages are not parsed \/rendered and have angular expressions ({{}}) for meta tags.<\/p>\n Crawlers (or bots) are designed to crawl HTML content of web pages but due to AJAX operations for asynchronous data fetching, this became a problem as it takes sometime to render page and show dynamic content on it. Similarly, AngularJS<\/a> also use asynchronous model, which creates a problem for Google crawlers<\/a>.<\/p>\n Google looks for #!<\/strong> in our site urls and then takes everything after the #! and adds it in _escaped_fragment_<\/strong> query parameter. Some developers create basic html pages with real data and serve these pages from server side at the time of crawling. So we thought that, why not we render same pages with PhantomJS<\/strong> on serve side which has _escaped_fragment_<\/strong>.<\/p>\n There are few steps which we followed in our application to make it crawlable.<\/p>\n Client Side : –<\/strong><\/p>\n 1. Adding meta tag to the head of your page.<\/p>\n [js]<\/p>\n <meta name="fragment" content="!"><\/p>\n [\/js]<\/p>\n This helps search engine crawlers that this page has dynamic JavaScript content that needs to be crawled.<\/p>\n 2. If you use hash urls (#), change them to the hash-bang (#!) by \u00a0adding<\/p>\n [js]<\/p>\n $locationProvider.hashPrefix(‘!’)<\/p>\n [\/js]<\/p>\n in your app.js.\u00a0You would not see any diffrence if you are using html5Mode.<\/p>\n