Overcoming SEO challenges with AngularJS 1-based Applications

Building a completely AngularJS based frontend can be really fun. Frontend developers enjoy having complete control of the routing, views, reusability of components and testing the frontend as a stand-alone entity. At the same time, backend developers provide the frontend app with APIs and effectively invest the time into building reliable and cleaner API structures with having a clear separation of frontend and backend.

However a lot of SEO specialists are still arguing about the impact of SEO with AngularJS. The core differences are routing and runtime content generation.

Google has confirmed that their bots are able to crawl and render javascript on the pages. For better compatibility a lot of SEO optimization techniques relies on the concept of pre-rendering to assure full compatibility with any search engine crawler.

The concept of pre-rendering is pretty straight-forward. It mainly relies on a simple concept of detecting search engines and serving snapshots (pre-generated html pages), while users can still enjoy the AngularJS frontend. To achieve this we need:

1. Generate snapshot pages

There are several tools to achieve this. You can simply google, or try out:

  • https://github.com/cburgdorf/grunt-html-snapshot
  • https://github.com/yearofmoo-articles/AngularJS-SEO-Article

2. Serve snapshot pages to search engine crawlers

Here you need to play with your Apache or NGINX configurations:

Apache:

RewriteEngine On
RewriteCond %{REQUEST_URI} ^/$
RewriteCond %{QUERY_STRING} ^_escaped_fragment_=/?(.*)$
RewriteRule ^(.*)$ /snapshots/%1? [NC,L]

NGINX:

server {
   # ... your config for your server daemon
   # listen 80;
   # server_name localhost;
   # root /path/to/root/
   # index index.html;
   if ($args ~ "_escaped_fragment_=/?(.+)") {
      set $path $1;
      rewrite ^ /snapshots/$path;
   }
}