Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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_.

like image 650
sk904861 Avatar asked Jan 31 '15 14:01

sk904861


People also ask

How do I make my React more SEO-friendly?

They key to make React more SEO-friendly is to make sure Google doesn't require to use Javascript to render the content on the page. That can be achieved by using Sever-Side Rendering (SSR).

Which is better for SEO React or angular?

Search Engine Optimization with Angular and React It's much easier to set up server-side rendering with React than with Angular – and server-side rendering is better for SEO. Therefore, Angular requires additional tools to implement SEO best practices.

Can Google index React websites?

Google has the ability to crawl even “heavy” React sites quite effectively. However, you have to build your application in such a way that it loads important stuff that you would want Googlebot to crawl when your app loads. Stuff to take note of include: Rendering your page on the server so it can load immediately.


1 Answers

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.

like image 99
Jack Avatar answered Oct 07 '22 15:10

Jack