How do you use React.js for SEO?
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_.
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.
That article also outlines the UX and SEO benefits of this sort of isomorphic approach.
Two nice example implementations:
- https://github.com/erikras/react-redux-universal-hot-example: Uses Redux, my favorite app state management framework
- https://github.com/webpack/react-starter: Uses Flux, and has a very elaborate webpack setup.
It is also possible via
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.
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.
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.