Updating or building web app with rich user experience through AngularJs is an easy solution to implement especially if the web app is created for internal use and search engines are irrelevant. Surely, the approach provides the optimal results within the minimum time frame. What if the intended audience is public, and indexing the website is critical for the business; he solution could backfire if special attention is not paid in regard to make website crawlable.

Unlike browsers, Search engine crawlers and bots from various social media websites like Facebook, Twitter, LinkedIn etc, capture indexable information from HTML page itself and they can’t execute JavaScript which is the base of providing rich user experience. So, to assist them we need to complement a way so that they could read all required META or required HTML Tags (TITLE/H1/H2/H3…) which are tailored dynamically.

Running JavaScript on server side and serving the pre-rendered HTML containing all indexable information is the way out to address this issue. Prerender.io is one such free service that helps making it possible.

Pre-requisite for Prerender.io

It relies on implementing a URL strategy that have either of below approach:

• Hash Bang (#!) URLs In case your current url strategy include hash (#) based URLs, change it to Hash Bang URLs.

  angular.module('myApp').config([  
      '$locationProvider',
      function($locationProvider) {
          $locationProvider.hashPrefix('!');
      }
  ]);

• HTML5 Push State

Integration

In order to integrate the Prerender.io make sure below steps are configured on web server or code:

1. Add below META Fragment tag to page header:

    <meta name="fragment" content="!">

2. Make sure below modules are enable on your Apache web server:

   mod_headers.c
   mod_rewrite.c
   mod_proxy_http.c

3. Prerender Request Token is properly added to the HEADER through web server:

   <IfModule mod_headers.c>
        RequestHeader set X-Prerender-Token "Your Token"
   </IfModule>
   

4. Add below Redirect configuration to help crawlers know the way to fetch the HTML version though Prerender.io:

    <IfModule mod_rewrite.c>
       RewriteEngine On
   
       <IfModule mod_proxy_http.c>
           RewriteCond %{HTTP_USER_AGENT} baiduspider|facebookexternalhit|twitterbot|rogerbot|linkedinbot|embedly|quora\ link\ preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator [NC,OR]
           RewriteCond %{QUERY_STRING} _escaped_fragment_
           
           # Only proxy the request to Prerender if it's a request for HTML
           RewriteRule ^(?!.*?(\.js|\.css|\.xml|\.less|\.png|\.jpg|\.jpeg|\.gif|\.pdf|\.doc|\.txt|\.ico|\.rss|\.zip|\.mp3|\.rar|\.exe|\.wmv|\.doc|\.avi|\.ppt|\.mpg|\.mpeg|\.tif|\.wav|\.mov|\.psd|\.ai|\.xls|\.mp4|\.m4a|\.swf|\.dat|\.dmg|\.iso|\.flv|\.m4v|\.torrent|\.ttf|\.woff))(.*) http://service.prerender.io/http://example.com/$2 [P,L]
       </IfModule>
   </IfModule>

   Make sure the above rules are not conflicting with any other rules in your web server configuration. Prefer adding them on top of your .htaccess file.

Testing

We can test is configuration done for prerender.io through number of ways like:

Checking view source with query string: _escaped_fragment_

1. Let say URL of the webpage is http://www.example.com/#!/about
2. Open the URL in browser and view source.
3. You won’t find any Meta information & HTML tags dynamically added to webpage rather AngularJs code intact.
4. Now update the URL with _escaped_fragment_ as query string parameter like http://www.example.com?_escaped_fragment_=/about and view source.
5. You will now see changes to Meta information & HTML tags being reflected on the webpage and are now pre-served as part of HTML itself.

Facebook debugger

Another easy way to test the integration is user Facebook Debugger . Just type the URL and fetch the see the results, it should show the dynamically tailored Meta information rather than AngularJs code snippets enclosed in curly brackets like {{Page.Title()}}