Prerender Your AngularJS Apps To Boost SEO

A Twitter subscriber of mine recently asked me if I knew how to use Prerender with my AngularJS applications to boost SEO when being crawled by search engines. My immediate answer was no, but I offered to help him figure it out and write an article on it.

Prerendering AngularJS web apps is critical for SEO because when web crawlers such as Google crawl a web page, they do not process all the AngularJS source code and curly bracket elements. With prerendering enabled, a web crawler will see the actual value found in curly brackets rather than the variables themselves.

Prerender offers a hosted solution for doing this, but in this example I’m going to show how to use the self hosted version. Of course you can use the hosted version with minimal effort, but where is the fun in that?

Let’s start by cloning the latest version of Prerender from GitHub:

git clone https://github.com/prerender/prerender.git

The self hosted version must be launched using a Node.js server. Using the Node Package Manager (NPM) and Prerender as our current working directory, we need to install all the dependencies of this project:

npm install

If you’re using Ubuntu 14.04 64-bit and are unlucky like I was, then this command will fail somewhere during the install. I had to run the following to correct this:

sudo apt-get install build-essentials
sudo npm install weak
sudo npm install phantomjs

This gave me a few tools that I was missing and installed the latest version of weak and phantomjs, both necessary tools for the Prerender software. You may not experience the problems that I did, so definitely try the basic step first before installing extra software.

With everything installed run the following command to start the Prerender server:

node server.js

You can test that this worked by navigating to http://localhost:3000/https://www.google.com. If it worked, Google should load with some minor CSS and image related page flaws.

The next step is to create an application that will make calls to your Prerender server. I’m going to stick with the Node.js trend and create a new application using Node.js with Express.

If you don’t have Express installed, continue with the following:

sudo npm install -g express
sudo npm install -g express-generator

It is time to create a template project using the Express generator that we just installed.

express exampleproject

The above command will create all our necessary files and folders. There are a few things we need to do before we can run our project though.

First we need to install all the dependencies that Express requires. With the Express project as our current working directory, run the following command:

npm install

We aren’t done though. We also need to install the Prerender Node.js dependency. Run the following command as well:

npm install prerender-node --save

All the requirements have been added. However, the Prerender server we made is already occupying port 3000 which is what Express uses by default. Open the bin/www found in your project root and change the port from 3000 to 8080.

Run the project like this:

npm start

If all went well, you should have a very simple site found at http://localhost:8080. Don’t be fooled though. Prerendering is not configured yet and neither is AngularJS.

Open views/layout.jade found in your project root and make it look like the following:

doctype html
html
  head
    title= title
    meta(name="fragment" content="!")
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(src='//ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js')
    script(src='javascripts/custom.js')
  body(ng-app="example")
    block content

We’ve included AngularJS and a custom JavaScript file that has not yet been created. The custom JavaScript file will contain our AngularJS code in it. We also included a required meta tag that Prerender and web crawlers will search for.

Create javascripts/custom.js and add the following code to it:

var example = angular.module("example", []);

example.controller("ExampleController", function($scope) {

    $scope.message = "Hello World";

});

We are almost done. Open views/index.jade and modify the code so it looks like the following:

extends layout

block content
  div(ng-controller="ExampleController")
    h1= title
    p Welcome to #{title}
    p {{message}}

Notice we added our AngularJS controller and put a tag that will display our $scope.message text. This is a perfect test of the Prerender server because if we were to crawl the page without Prerender, the source code would have {{message}} in it instead of Hello World.

Only one more line to add. Open the app.js file found at the root of the Express project and add the following line somewhere after the app.set lines:

app.use(require('prerender-node').set('prerenderServiceUrl', 'http://localhost:3000'));

Restart the Express Node.js instance if it is already running.

We are going to test what we’ve done.

Note that you should not be testing using a web browser because they will usually prerender with or without external prerender software. Web crawlers don’t have this luxury, so we are going to use a command line to test. Using a Terminal, run the following:

curl http://localhost:8080

The response should contain {{message}} because we haven’t told the application that we want to access it from the perspective of a web crawler. Most web crawlers will request the page like this:

curl http://localhost:8080/?_escaped_fragment_=

If all went well, you should see Hello World in the response.

Now of course you didn’t need to do everything that I did. If you’d rather not host your own Prerender server you can pay for one and skip many of the steps I did. If you choose the hosted solution route, replace the following line in your Express code:

app.use(require('prerender-node').set('prerenderServiceUrl', 'http://localhost:3000'));

You’ll want to use an API token instead, making the line look like this:

app.use(require('prerender-node').set('prerenderToken', 'YOUR_TOKEN'));

Although this whole process seemed long, it actually isn’t very difficult and it can drastically increase how your website ranks in the major search engines. Search engines don’t want to reward websites based on their JavaScript source, but instead the content found on the website.

A video version of this article can be seen below.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.