By suyesh


2017-02-21 03:33:16 8 Comments

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.

2 comments

@WillHua 2017-07-18 01:31:00

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")

@mikegeyser 2017-03-15 17:51:31

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.

Related Questions

Sponsored Content

23 Answered Questions

[SOLVED] How does JavaScript .prototype work?

15 Answered Questions

[SOLVED] Can you force a React component to rerender without calling setState?

  • 2015-06-03 16:44:58
  • Philip Walton
  • 522979 View
  • 432 Score
  • 15 Answer
  • Tags:   reactjs react-jsx

21 Answered Questions

[SOLVED] How does the "this" keyword work?

  • 2010-06-27 13:12:56
  • Maxim Gershkovich
  • 360793 View
  • 1125 Score
  • 21 Answer
  • Tags:   javascript this

15 Answered Questions

[SOLVED] How do search engines deal with AngularJS applications?

25 Answered Questions

86 Answered Questions

[SOLVED] How do JavaScript closures work?

14 Answered Questions

[SOLVED] How does data binding work in AngularJS?

17 Answered Questions

[SOLVED] How to decide when to use Node.js?

6 Answered Questions

[SOLVED] Ukkonen's suffix tree algorithm in plain English

28 Answered Questions

Sponsored Content