Defeating the SPA Blank Page BluesPublished: 10-Jun-2018
I recently deployed a Conversion Calculator to a static page server. And I've been biting my nails trying to get Google search to index it properly.
I was already aware that Google was supposed to be able to index a Single Page Applications (SPA), without the need for server-side-rendering. But, that's not the entire story. The research I has performed suggested that all I needed to do was perform a "Fetch as Google" in the Google Search Console, and all would be well. That's not quite true if you're not able to implement server-side-rendering for one reason or another.
In my case, Google Search Console was returning a blank page, which was supposed to be representation of my SPA. And since this was not resolving itself, I decided to research it further. My research led me to this article on medium: https://medium.com/@gajus/react-application-seen-as-a-blank-page-via-fetch-as-google-afb11dff8562.
This helped me determine (by deduction) that some code in my application was causing "Fetch as Google" to fail.
So, the solution in my case was to:
- include babel-polyfill in my react application's vendor packages. You can figure out how to install babel-polyfill here: https://babeljs.io/docs/usage/polyfill/.
- import the library into my react app. The root of my react app is 'index.js'.
- According to the instructions, this line should be added right at the top, to ensure all necessary polyfills are loaded first:
And that's it for the coding.
I'm using yarn in my application, so, the next step for me is to perform a 'yarn build' in the terminal, and wait for the application to be built. And then deploy the build code.
The final step is to then circle back to the Google Search Console and do a "Fetch as Google". This will then index your updated web site (which has now been babel-polyfilled).
If you give it about 24 hours or so, you should find that your website now appears in Google Search.