How do you use React.js for SEO?

Question

React.js articles like to point out that React.js is great for SEO purposes. Unfortunately, I never read how you actually do this. You just implement _escaped_fragment_ , as in https://developers.google.com/webmasters/ajax-crawling/docs/getting-started , and let React display the page on the server when the url contains _escaped_fragment_ , or there are even more

The ability to not rely on _escaped_fragment_ would be great, because perhaps not all potentially crawling sites (for example, in sharing functions) implement _escaped_fragment_ .

Answer 1

I am pretty sure that everything you saw promotes React as useful for SEO, because it can display the requested page on the server before sending it to the client. Thus, it will be indexed in the same way as any other static page, in relation to search engines.

Server creation was made possible thanks to ReactDOMServer.renderToString . The visitor will receive an already processed markup page, which the React application will detect after loading and starting it. Instead of replacing the contents when calling ReactDOM.render it will simply add event bindings. For the rest of the visit, the React app will take over, and further pages will be displayed on the client.

If you are interested in learning more about this, I suggest looking for “Universal JavaScript” or “Universal React” (formerly known as the “isomorphic answer”), as this becomes the term for JavaScript applications that use the same base rendering code as on a server, so on the client.

Answer 2

As another respondent said, you are looking for an isomorphic approach. This allows the page to come from a server with processed content, which will be analyzed by search engines. As another commentator mentioned, this may give the impression that you are stuck using node.js as the server-side language. Although it’s true that running javascript on the server is required for this to work, you don’t need to do everything in the node. For example, this article discusses how to create an isomorphic page using Scala and respond:

Isomorphic Web Design with React and Scala

This article also describes the benefits of UX and SEO of this kind of isomorphic approach.

Answer 3

Two beautiful implementations of examples:

• https://github.com/erikras/react-redux-universal-hot-example : uses Redux , my favorite public application management infrastructure
• https://github.com/webpack/react-starter : uses Flux and has a very complicated webpack setup.

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

Answer 4

Also possible through ReactDOMServer.renderToStaticMarkup :

Similar to renderToString , except for this, no additional DOM attributes are created, such as data-react-id , which React uses internally. This is useful if you want to use React as a simple static page generator, since disabling additional attributes can save a lot of bytes.

Answer 5

Now we need to disagree with a lot of answers, since I managed to get the React client-side application to work with googlebot with absolutely no SSR.

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

Answer 6

You don’t have to do anything if you care about your site ranking on Google, because the Google crawler does very well with JavaScript! You can check the result of your SEO search for site:your-site-url .

If you are also not indifferent to the rating of your site, for example, Baidu , and your server-side side is implemented by PHP , you may need the following: react-php-v8js .