All along this article, I will introduce tools and examples of this website, vickev.com (which is built with Angular.js and Node.js), to prove the relevance of the method.
So, Google came up with a solution for developers. Here are the principle concepts:
If it is not clear (I'm not sure it is, actually), please consult the official guide, which is pretty clear in my opinion. You can also try it with this website (see next sections)!
We can play a little bit with vickev.com. This website is a SPA, and is configured to be indexed by google. So, first of all, let's see what googlebot actually sees, by running a console browser such as Lynx.
We are going to try to display a previous article about Grunt. If we run in out Linux terminal this command:
We will have this result:
Now, let's do what googlebot does, by making this specific request to the server:
Now, I hope you get the idea. How to implement this...
Our program needs to respond to the correct request to generate the HTML, and to give it back to the browser. But, of course, we are developers: we are lazy (by definition). So, we want an automatic way to do it.
ExpressJS is a simple MVC framework for Nodejs. Here, we want to create a specific route to deal with the _escaped_fragment_ option, that will run PhantomJS to load the URL of our own website, and return the HTML to the client. It looks like this:
The comments in this source should be clear enough to understand what's going on. Note that in order to call phantomJS from Node.js, we use node-phantom.
This code is very simple, yet not the most efficient. An interesting improvement would be to cache the result of PhantomJS, to avoid processing the same request over and over again (which is quite expansive).
We can see that Google was able to find the proper
To double check that Google will get the proper content of our dynamic page, we can use Google webmaster tools. From here (after your website has been registered), we can go to
Fetch as Google, and give an URL for Google to query.
In this picture, I didn't print all the output, but we can see some clues that prove it actually worked: the title and meta description are correctly generated.
The method that is introduced in this article provides an exhaustive way to make your dynamic pages indexed by Google. However, I just gave the technical aspect: a good indexing is first of all done by good practices (sitemap, relevant content at the beginning, title, meta tags, etc.). I hope this tutorial helped.
I wish you a happy indexing!
April 28, 2013 5:22am