51

Articles on React.js like to point out, that React.js is great for SEO purposes. Unfortunately, I've never read, how you actually do it. Do you simply implement _escaped_fragment_ as in https://developers.google.com/webmasters/ajax-crawling/docs/getting-started and let React render the page on the server, when the url contains _escaped_fragment_, or is there more to it?

Being able not to rely on _escaped_fragment_ would be great, as probably not all potentially crawling sites (e.g. in sharing functionalities) implement _escaped_fragment_.

sk904861
  • 1,247
  • 1
  • 14
  • 31
  • 6
    Just a note for the upcoming visitors: the [ajax crawling recommendation article](https://developers.google.com/webmasters/ajax-crawling/docs/getting-started) linked in the question is [officially deprecated as of October 2015](https://webmasters.googleblog.com/2015/10/deprecating-our-ajax-crawling-scheme.html). – falsarella May 03 '16 at 18:21

6 Answers6

57

I'm pretty sure anything you've seen promoting React as being good for SEO has to do with being able to render the requested page on the server, before sending it to the client. So it will be indexed just like any other static page, as far as search engines are concerned.

Server rendering made possible via ReactDOMServer.renderToString. The visitor will receive the already rendered page of markup, which the React application will detect once it has downloaded and run. Instead of replacing the content when ReactDOM.render is called, it will just add the event bindings. For the rest of the visit, the React application will take over and further pages will be rendered on the client.

If you are interested in learning more about this, I suggest searching for "Universal JavaScript" or "Universal React" (formerly known as "isomorphic react"), as this is becoming the term for JavaScript applications that use a single code base to render on both the server and client.

Brigand
  • 84,529
  • 20
  • 165
  • 173
Jack
  • 9,448
  • 3
  • 29
  • 33
  • 7
    Wouldn't this mean I will be stuck on node.js? – tyteen4a03 Mar 06 '15 at 15:04
  • 2
    It only means you'll need to defer to node in order to render the markup. You can use whatever language you want to handle requests and serve the rendered markup. – Jack Mar 06 '15 at 15:48
  • 3
    I don't think you would be restricted to rely on NodeJs for this, you could defer to other Javascript Engines if you designed your scripts appropriately. For example, in the Java world you have Nashorn available. I was experimenting with calling my webpack bundled scripts using Nashorn and it does seem possible. – ctrlplusb Nov 06 '15 at 12:21
  • Reading up on related topics, I very much get the impression that Server Side Rendering is mainly a method to get your initial page loading faster and *not* an SEO requirement. Google and many other search engines can index Single Page Apps just fine if they only render on the frontend. – Micros Mar 21 '18 at 13:07
  • @Micros Google does a fair job with indexing pages from React apps, but Bing fails to index hardly any content from an SPA. – Jack Mar 21 '18 at 19:16
5

As the other responder said, what you are looking for is an Isomorphic approach. This allows the page to come from the server with the rendered content that will be parsed by search engines. As another commenter mentioned, this might make it seem like you are stuck using node.js as your server-side language. While it is true that have javascript run on the server is needed to make this work, you do not have to do everything in node. For example, this article discusses how to achieve an isomorphic page using Scala and react:

Isomorphic Web Design with React and Scala

That article also outlines the UX and SEO benefits of this sort of isomorphic approach.

Edgar
  • 6,022
  • 8
  • 33
  • 66
PFranchise
  • 6,642
  • 11
  • 56
  • 73
  • 1
    https://thebhwgroup.com/blog/isomorphic-web-design-react-scala is an excellent link. The detailed introduction is relevant for all (not only scala). – Matthias M Jan 04 '16 at 20:42
4

Two nice example implementations:

Try visiting https://react-redux.herokuapp.com/ with javascript turned on and off, and watch the network in the browser dev tools to see the difference…

w00t
  • 17,944
  • 8
  • 54
  • 62
2

Going to have to disagree with a lot of the answers here since I managed to get my client-side React App working with googlebot with absolutely no SSR.

Have a look at the SO answer here. I only managed to get it working recently but I can confirm that there are no problems so far and googlebot can actually perform the API calls and index the returned content.

WillHua
  • 433
  • 3
  • 10
  • Check this out boiler plate, In which we have included features like SSR, PWA, Code Spliting all features with SEO in mind. https://github.com/Atyantik/react-pwa/ – Ajay Patel Oct 10 '17 at 14:35
1

It is also possible via ReactDOMServer.renderToStaticMarkup:

Similar to renderToString, except this doesn't create extra DOM attributes such as data-react-id, that React uses internally. This is useful if you want to use React as a simple static page generator, as stripping away the extra attributes can save lots of bytes.

falsarella
  • 12,217
  • 9
  • 69
  • 115
  • An example with this usage is [react-static-boilerplace](https://github.com/koistya/react-static-boilerplate) (see [tools/render.js](https://github.com/koistya/react-static-boilerplate/blob/master/tools/render.js#L43), line 43). – falsarella May 03 '16 at 18:27
  • Another example can be found at [Server-Side Rendering with React](https://camjackson.net/post/server-side-rendering-with-react). – falsarella May 04 '16 at 12:54
1

There is nothing you need to do if you care about your site's rank on Google, because Google's crawler could handle JavaScript very well! You can check your site's SEO result by search site:your-site-url.

If you also care about your site's rank such as Baidu, and your sever side implemented by PHP, maybe you need this: react-php-v8js.

Alan
  • 161
  • 2
  • 6