CURRENT ARTICLE:  Using Prerender.io for SEO
NEXT ARTICLE:   How to Submit to China's Top 15 Mobile App Stores

Using Prerender.io for SEO

Ervin Musngi MCSD // Last Updated: 13 September 2016

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.

 

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

  <IfModule mod_rewrite.c>
    RewriteEngine on

    RewriteCond %{HTTP_HOST} ^www\.(.+)$  [NC]
    RewriteRule ^(.*)$ http://%1/$1 [L,R=301]

    # Don't rewrite files or directories
    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^ - [L]

    # If the requested pattern is file and file doesn't exist, send 404
    RewriteCond %{REQUEST_URI} ^(\/[a-z_\-\s0-9\.]+)+\.[a-zA-Z]{2,4}$
    RewriteRule ^ - [L,R=404]

    # Prerender.io stuff
    <IfModule mod_proxy_http.c>
        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]

    </IfModule>

    # otherwise use history router
    RewriteRule ^ /index.html [L]

</IfModule>-

 

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.

ABOUT THE AUTHOR

Ervin
Musngi MCSD

Lead Developer of Seirim, Ervin focuses on project structure and architecture. Adding to that role, he monitors, assists and supervise ongoing projects to make sure we only release and deploy quality projects.

RECENTLY

Hot New China Websites

Great websites recently launched for the Chinese audience

Open Source Cybersecurity

Check the open source options first to save your company money!

Our Favorite Quality Assurance Tools and Processes

QA takes work! We use the best tools and processes to make it easier.

SEO Audit Tools - Our favorites at SEIRIM and Why

Get in touch with your website's SEO health with the best auditing tools

Ten Steps to China SEO Success

Gather a new perspective, tools and methodology.

Embrace a Powerful Password Paradigm

Better security is within reach!