How does Search Engine indexing work for JavaScript web applications like REACT?

Question

I am planning to implement react.js for my application. As I am new to react I have a doubt that, how google will index the react components? And what are the best practice needed to make application properly visible in google search.

Any one has any idea please help me on this.

Deduct

@andy As we are rendering react in the client side I am wondering how the indexing will be done? As the html page will only have one div where the react component will render. Do you have any link where it is explained that client side react will do proper indexing? Thanks for help. – Deduct

@AndyRay, that's not always true, it's not that simple. – Whirlybird

@AndyRay I would really like to see your research on this. It will help many new to react developer like me. Thanks – Deduct

Andy Ray did not do research on the topic. He merely lashed out from frustration, most likely because someone else did the same to him. Please do not be dismayed and I hope you bite your tongue before doing the same to someone else. We're a community a builders and solvers, contempt does nothing but make our collective journey to solutions more difficult. Cheers. – Lorant

Answer 1

So I can safely say that I have gotten a react SPA with API calls to render perfectly in googlebot (Fetch and Render). So this is not an impossible task but I will say there isn't much documentation to help you along the way.

Since it sounds like you've got a new app, I'll outline both avenues you can potentially go down.

Server Side Pre-rendering (SSR)

Start with Server side pre-rendering (SSR) and stick to it. There are a lot of ways to do this in react and this ultimately means you'll need to stick with isomorphic libraries which support SSR.

However, by going down the SSR path the chances of being indexed by google are significantly higher since you don't have to rely on the googlebot working with your JS at all.

Client Side Rendering (A normal JS app)

Just build a normal React App with no SSR.. basically business as usual. The benefits are that you don't have to deal with any added complexity of SSR and you aren't restricted to libraries that are isomorphic. Basically this is the easiest but you have to hope your JS compiles and is run correctly by the Googlebot.

My observations

I will say server side pre-rendering is incredibly hard to get working sometimes since a lot of libraries might not support it and this in turn introduces a lot of complexity that you don't want to deal with.

The client side rendering route is just business as usual really and I can confirm that it does in fact work with Googlebot. Heres what I did to get client side rendering working:

1. Added 'babel-polyfill' to my imports list as early as possible

2. Inlined my Javascript to reduce the overall load time and minimise unnecessary calls. I did this with Razor (C#) but you can do this any way you want.

3. Added an external call to the Financial times polyfill (not sure if this ones necessary)

4. NODE_ENV=production will also help here. It'll cut the overall size of your bundle down

For anyone on C#, this is what it looks this might look like:

clientWithRender.jsx (the entry point of my jsx)

import React from "react";
import ReactDOM from "react-dom";
import 'babel-polyfill';

import App from "./App/App.jsx";
import { Router, Route, indexRouter, hashHistory } from "react-router";

ReactDOM.render(
<App></App>,
document.getElementById('App'));

Index.cshtml

<script src="https://ft-polyfill-service.herokuapp.com/v2/polyfill.min.js"></script>
@Html.InlineScriptBlock("~/Scripts/react/react.clientWithRender.bundle.js")

Cabe

Answer 2

If you take a look at this article from 2015 on the Google Webmaster Central Blog you can see that google recommends not doing anything different for SEO on a single page (or as they called it AJAX) application - which would include react.

They don't go into a lot of detail there about how they do it, but as long as your application is built semantically and renders very quickly - it should rank.

They place a lot of emphasis on performance, with faster render time leading to higher rankings. This puts all single page applications at a major disadvantage over server side rendering.

If you want some more specific guidance - this seems like a really good place to start.

Dicta

The second link is dead. – Churning