ReactJS & SEO ReactJS & SEO

ReactJS & SEO

by ,
on 21 September 2015


It’s official. Everybody is talking about React but even after making a real effort and consulting reference materials, it’s difficult to understand this technology’s impact on SEO. Allow me to shed a little light on the subject.

What is React? What’s it used for? Why is it a good thing?

With the rise of SPA, “real time” web applications such as Gmail, Airbnb, Soundcloud or even Netflix, frameworks and JS libraries have never been so popular.

nerd seo

On the one hand, users are more and more mature and asking for these types of applications which are extremely satisfying in terms of use. On the other hand, most developers are looking for better performance (seamless interface, scalability and cost reduction) and they enjoy writing beautiful code (the joy of coding, legibility, power and maintenance).

Hard not to see technologies such as AngularJS (the Google framework), Backbone.js,  Ember.js or KnockoutJS.

The massive use of JavaScript means a whole new ball game for SEO.

So… What’s the deal with JavaScript?

The main issue with these frameworks is that content is inserted on the client side after loading the page from the server side (the opposite, for example, of PHP): if you look at the source code, there’s a void.

Under these circumstances, Googlebot cannot crawl and index the content inserted after the fact: catastrophic from an SEO point of view! (or so it’s said…)

Recently, Google announced that Googlebot would now try to interpret the crawled pages by executing JavaScript… “would try to…”

“We decided to try to understand pages by executing JavaScript”

In a post dated May 23, 2014, Google stated that GoogleBot can render pages with JavaScript and consequently index content that was invisible heretofore (because generated on the client side and not the server side… you following me?). However, as you can imagine, at the web’s scale, this is colossal work:

“It’s hard to do that at the scale of the current web, but we decided that it’s worth it.”

On the developer side, there have been numerous development initiatives for crawling and indexing content generated in this manner but they remain costly or at a minimum, restrictive in a project’s life cycle.

That’s where React, aka THE solution, comes in! Still with me?

What’s React?

React is a library (a collection of methods and functions) that allow the development of interfaces that have the particularity of constantly changing: one can imagine a “real time” comments module or the Facebook Ticker (that summarizes your friends’ actions, here again in quasi “real time”).


React’s strength is to always find the best way of updating and rendering these changes [rapidly], without having the user reload the page.

This library’s development as well as its publication is the result of collaboration by a good hundred developers working in different companies including, initially, Facebook and Instagram: so pretty serious stuff!

React’s strengths

“React is so fast because it never talks to the DOM directly.”

  1. Understandability: the product code is “clean” (easy to ready, easy to understand and easy to maintain), reading the code means immediately seeing what the application will be used for and what it will look like.
  2. Performance: the Virtual DOM is one of React’s key functions. React endeavors to process and display the view’s changes only (by setting aside the rest of the view, which doesn’t change).
  3. Community: ReactJS rapidly convinced the community of JS developers. And that’s before talking about React Native which allows rendering of native iPhone applications (Android coming soon) by writing JavaScript; Which results in considerable development time savings.
  4. [HOT SEO] Isomorphism and server-side rendering: through the use of a Node server, code can be generated on the client side AND the server side (so kinda like PHP but without reloading!) as compared to other traditional JS libraries and frameworks (Backbone.jsAngularJSEmber.js, etc.) which execute native code only on the client side (in the browser). This strength is the one that is most interesting from an SEO perspective as it solves the issue of indexing context (ability to be crawled and indexed) created on the client side.

Isomor… Huh?

You need only remember that the code between the client (your browser) and the server is the same! In other words, “The backend and frontend share the same code.”  (as diagrammed below on the right)


Besides, React is not the only library to bring this technology “on board”. To date, we have already identified a good twenty such as Brisket, Cassis, CatberryChaplinDerbyEzel, Este, Flatiron, Fluxible, Invisible, jsblocks, Loopback, Lazojs, Loopback, Mojito, Sara.js, San Stack and Taunus.

And concerning vocabulary, some prefer the use of Universal JavaScript rather than isomorphism. You have to admit that the expression is easier to understand.

“… this is purely anecdotal evidence, but when we use the word universal instead of isomorphic everyone gets it.”

ReactJS ≠ AngularJS

“Lots of people use React as the V in MVC.”

Don’t waste time comparing them, React, as opposed to AngularJS, is not a framework.

But if you’re obsessed by the difference between frameworks and libraries, don’t hesitate to take a look at the conversations. For you others, just remember that React does not impose a specific architecture on your application and so can be appended to any project using other web technologies (including AngularJS) in a completely autonomous manner.

“React is just the VIEW” 

How do we do this?

You pay, or you do-it-yourself!

If you don’t have the means, you will present an alternative HTML version (a snapshot) of the pages to the exploration bots by using a Phantom.js (you can take a look at the tutorial; it’s a bit dated but the idea is there). Yes, cloaking! Purists will say that’s “dirty” and difficult to maintain but it works and rather well.

However, if you have a little money (or an economic model that is roadworthy), it’s pretty powerful and easy to put in place: to name but two, Prerender or BromBone. If you find the topic “How to make your JavaScript apps SEO-friendly interesting, the article below is good.

brombone seo

Advantages of ReactJS for SEO

  1. The ability of robots to natively crawl and index content: all the advantages of JS without the inconveniences!
  2. Favorable loading times create good user experience. Happy users = Happy Google.

That’s it?! Yes, as far as SEO is concerned. It all depends on what you will then do with implementation on the back-office side. And to complete this theme’s analysis, I recommend that you take a look at the following article by Zack Argyle, a developer @Pinterest: “Stop Using React for EVERYTHING”.

“If you have a highly dynamic application that needs to rerender frequently, and you want to avoid the heavy weight of template diffing, you’re looking at a grass-type opponent and ReactJS’s virtual DOM will be super effective. However, if your site doesn’t have those needs, CHOOSE SOMETHING ELSE!”

React inconveniences?

Simply put, none. But with a little digging, we found:

  • Reference materials are increasing but in the not too distant past, it was not easy to muddle through with only Facebook’s Get started.
  • Facebook reserves the right to withdraw the license, the right to use React. This is a topic for debate although quite innocently one can ask what possible interest Facebook would have to adopt this type of attitude.

Who uses React?

More and more companies! To talk about the best known, of course we’ll cite Facebook, Instagram but also Yahoo, Adobe, Airbnb, AdRoll, Asana, BBC, Century 21, Club Med, Dropbox, Feedly, Github, Khan Academy, KissMetrics, Netflix, Reddit, Salesforce, Twitter, WhatsApp and many others.


Did you enjoy reading this article? Please share or tell us about your experience (good or bad) with frameworks and JS libraries by leaving a comment.

And if you want more, I recommend reading our previous article Demandware: SEO advantages and inconveniences.

PS: Thanks to AnneGeorges, Jérémy, Blandine, François and Audrey  for the proofing!

Sources & inspirations

  1. React vs AngularJS – How the two Compare [EN]
  2. Facebook ReactJS – Ressources pour bien commencer [FR]
  3. Awesome React, a collection of awesome React tools, resources, videos and shiny things [EN]

Articles ignored

  1. React Native, a framework for building native apps using React [EN]
  2. JSX, a JavaScript syntax extension that looks similar to XML [EN]
  3. Reusable Components [EN]
  4. Add-ons React, some useful utilities for building React apps [EN]
  5. Flux, the application architecture for building client-side web applications [EN]


, ,

to read next...

Leave a Reply

Your email address will not be published. Required fields are marked *