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

Top Annual Cybersecurity Threat Summary Publications

Review of the top annually produced cybersecurity threat and intelligence trends covering 2023.

How to Overcome Team Conflicts and Delays in I.T. Projects

Discussion about how to overcome team conflicts and project delays in IT and web development projects.

Step by Step Cybersecurity Defense Setup and Tools for SME's

Follow these steps and consider these tools to get your company cyber secure.

Top 12 Social Media for Businesses in China

Top 12 social media for businesses to promote with in China

Top 10 Cybersecurity Best Practices for Website Owners

As a website owner, cybersecurity should be a top priority.

Our Favorite Quality Assurance Tools and Processes

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