If you have built a single page application website, you will know how hard it is to make it SEO ready.

Current practice, webmasters/developers create a “parallel universe” of content. Users with Javascript turn on will see dynamic contents, while users on non-javascript enabled browser (including crawlers) will see content that is static and created offline.

Google have been updating its algorithm on how it will support dynamic web pages (AJAX). Previously we are using the hash-bang approach. Which really doesn’t play well with other crawlers.

For our website, we will be using Prerender.io. 

What is Prerender.io?

It is a caching service, in which it creates a snapshot of every page on your website. These snapshots are created base on the final output of the page (yes AJAX is supported). This is good if you don’t have enough time to create two methods on your website that generate both dynamic and static pages.

Try to register here: https://prerender.io/signup 

 
HTACCESS

Once you’ve completed your registration, we need to change our .htaccess  file to have Prerender.io access our site.

In this line we will set our system generated token:

RequestHeader set X-Prerender-Token "YOUR_TOKEN"

If we detected that the agent that is browsing our site is one of the seo crawlers, we will forward the request instead to prerender to return the static html.

RewriteCond %{HTTP_USER_AGENT} baiduspider|facebookexternalhit|twitterbot|rogerbot|linkedinbot|embedly|quora\ link\ preview|showyoubot|MailRuConnect|Rambler|OdklBot|outbrain|msnbot|ia_archiver|pinterest|slackbot|Yahoo|Bingbot|vkShare|Feedfetcher-Google|W3C_Validator [NC,OR]
        RewriteCond %{HTTP_USER_AGENT} Yandex(Bot|Images|Video|Media) [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://%{HTTP_HOST}/$2 [P,QSA,L]

That’s it! If you have setup htaccess correctly, the website should start to be indexed by search engines.