reactjs - fetch as google displays blank page only

Question

I\'ve just coded my first website using reactjs, but when I check how google sees my website, I receive the following result:

My HTML file looks like this:

Answer 1

I would not be sure that is exactly how Google sees your website, as most simulators just strip off Javascript.

Did you use https://www.google.com/webmasters/tools/googlebot-fetch ?

In general Javascript support is limited for search engines so if you really want to have crawlers index your site you would have to implement server side rendering for React.

I've used https://github.com/kriasoft/react-starter-kit to generate http://gifhub.net It was a bit complicated experience but it worked at the end.

There are also frameworks like NextJS https://github.com/zeit/next.js/ that you can leverage to ensure you have server rendered content.

Third option is to use Google Headless Chrome browser to generate content for crawlers https://github.com/GoogleChrome/puppeteer

Having one of these options above implemented makes sure crawlers see everything you wanted. Relying on Javascript rendering will not give you expected results.