Setting Up a Local Prerender.io Instance

If you've developed a website within the last 7 or 8 years, you know how important SEO optimization is. With the rise of client-side routing, this posed some interesting challenges as search engine crawlers are not to fond of. So instead of pulling our hair out, let's take advantage of some awesome open source tools available for use.

The node plugin we will be using is Prerender.io (https://github.com/prerender/prerender). Here's a brief description of what it is from their github page.

Node server that uses phantomjs to render a javascript-rendered page as HTML. To be used in conjunction with prerender middleware.

Hopefully you are fimiliar with NodeJS and Linux, because this blog will not walk you through setting up NodeJS, NPM or Linux. We will be using CentOS. Here's a brief list of prerequisites.

  • CentOS
  • Node(and NPM)
    • Forever
  • GIT

Let's navigate to our HTML directory and get prerender.io downloaded.

Next, we'll install the node dependencies.

It's very common for httpd NodeJS applications to run on port 3000. Let's set some environment variables that not only changes that, but tells the prerender middleware to use the local installation of the Prerender.io software.

Make sure to figure out what host address and port number will be used. We will be using a host address of 192.168.1.11 with port number 62000.

Finally, let's start the application and see what we get.

Go ahead and test it out! The URL for testing will be http://[Your-Host]:[Your-Port]/http://www.google.com. I will be navigating to http://192.168.1.11:62000/http://www.google.com within my browser for testing. The webpage will not be displayed or behave as to be expected since Prerender.io is meant to be used as a middleware/proxy.

Here is what you should see within the command line.

And Here is the webpage result.

Need to run the instance even while logged out?

So how does this help with SEO? In short, when a search engine visits an AngularJS application with client-side routing, it will change all #! symbols to ?_escaped_fragment_=. This will give Prerender.io the opportunity to serve up a static page that will normally be unaccessible to a search engine crawler.

Here's an example of how the page is normally accessed, and how the search engine crawler will access it. Make sure to take note of the URL at the top.

Questions? Comments? See any errors? Let us know!

Verron Knowles

Tech Coordinator with broad experiences in most aspects of I.T. Direct experience developing web-based applications with Laravel and NodeJS, and very interested in open-source projects.

comments powered by Disqus