Preparing for an AngularJS AdSense and SEO Friendly Site

As I developed www.thepersonalfinancecenter.com with the joy of using AngularJS coupled with an Azure Mobile Services backend, the struggle was not with implementing a voting feature for social authority or providing identity management (thanks to Auth0), but rather how to ensure that AdSense would render properly and the site could be SEO compliant. Let’s address these separately.

AdSense and AngularJS
Since AngularJS normally acts as a Single Page Application, AdSense Ads could not be placed within Views. This created a challenge as after a few navigations on the site, the Ads would go away since AdSense saw it as one page going beyond the max of 3 Ads. I had to alter the design to have the Ads at the index.html layer housing the Views that would get routed to. For the visitor, the same Ads would stay constant through their visit, but this is a small price to pay versus no Ads!

SEO and AngularJS
While this can, and may end up, being several posts… one of the most critical aspects of SEO and AngularJS that I have found is to use a prerenderer to display static versions of your Views/pages. This was especially true in my case, since the majority of my content is retrieved via Mobile Web Services and displayed thru JavaScript. To be clear, this is much more of a JavaScript issue than a AngularJS challenge. If I had 1,000 hard coded views with plain HTML content I may not need a prerenderer.

In the end, I went with ajaxsnapshots.com/ since it had the clearest directions for integrating with IIS. Prerender.io is another strong option and integrates nicely with Node.js.

Conclusion
In short, if you are pursuing an AngularJS site with AdSense and SEO in mind, consider that AdSense may impact some of your design choices and that a good prerenderer is a must have with dynamic content.