Fixing blank result in Fetch as google

by William Mcmurray

Does your SPA (single page application) looks like this in "Fetch as google" ?

Well, before throwing yourself into SSR (server side rendering), there is stuff you should check first :

1. No asynchronous requests

Your website should not rely on asynchronous requests to display it's content (AJAX requests). Otherwise google may not wait for your ajax content to finish loading.

2. Polyfills !!

Almost no one on the internet is mentioning this one but it's the most important thing to do. I've read somewhere that google bot is built uppon an older version of Google Chrome (maybe version 26 or 36, can't remember). But the fact is, it's an older browser so the fancy stuff used in your SPA may not run at all, explaining why your website renders as blank squares !

You need to install a polyfill.

Here is an example with babel-polyfill (it works even if you don't use babel for transpiling) :

npm install --save babel-polyfill

Then import it at the very begining of you application's entry point :

import "babel-polyfill";

That's it ! Your website should show up now :

:)