Google Not Indexing Create React App
Create-react-app is a great tool for building React applications and websites. It's super simple to use and creates a whole development environment without and build configuration. You do not need to struggle with setting up webpack and other tools just to work with react. It's all there ready for you to use.
Once installed you have everything you need. A test environment, ES6 support, a local server for testing, etc. It's a great app and it is easy to add other packages such as react-router on to your app. If you end up needing to configure things you can always eject the project and get full access to all the configurations.
Most Internet traffic comes from Google. Any successful website will want Google to properly and throughly index their content.
Create React Blank In Google Fetch
One of the best ways for a webmaster to see how Google see's their website is to use Google Webmasters tools. This is a tool set that lets website owners tell Google how to crawl their website. It also provides information on search results for a website.
One thing that Webmasters Tools does is provide a "Fetch as Google" tool. This tool shows webmasters exqactly what Google's crawler sees when going to the page. This is the content that Google will index.
When I tried to "Fetch as Google" the sites rendered as blank pages. This meant that Google was seeing a blank page and did not see any content to index. That's bad news for SEO and getting any kind of traffic from a search engine!
Most online solution call for server side rendering to solve crawler issues like this. Server side rendering means that the website is first created on your server and then the created content is sent to the client in one swoop. This is the opposite of how my page currently acted. Because my page had a number of asynchronous requests, the content loaded one by one, as soon as each piece of content became available. A server side render would slow down the initial page load.
Server side rendering is not currently supported by create-react-app, and looked difficult to implement on a complicated app like mine. I was not looking forward to redoing my app to make it render from the server, but I also wanted google to index my content. What to do?
After a bit of research and some debugging I realized that the problem was not with any specific tool I was using. At first I thought the problem was that React Router and Google did not play well together, but that is not the case. I also thought maybe my asynchronous loading was too slow for Google, but that was not the problem either.
First, install babel-polyfill:
npm install babel-polyfill
Then add it to the topmost section of your react app. In my case this was my src/index.js file. Just include:
At the top of the page with all your other includes.
After performing these two steps Google was able to crawl my site without a problem. It saw all the routes and loaded all the asynchronous data without a problem.
Immediately after adding babel-polyfill I was able to Fetch as Google and see the correct contents of the site instead of a blank page.