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 don't know if it still an issue, but...

For each project there could be different reasons. First of all I would recommend you try to run you project in Dev mode (including console logs) and test it with PhantomJS v2.1.1. Result can show you some useful errors.

next you can see my phantomjs sample (called website.js):

var system = require('system')
var page = require("webpage").create();
var homePage = "http://<link to your localhost>";
var captureName = "result.png";

page.onConsoleMessage = function(msg) {
  system.stderr.writeLine('console: ' + msg);
};

page.onError = function(msg, trace) {
  var msgStack = ['PHANTOM ERROR: ' + msg];
  if (trace && trace.length) {
    msgStack.push('TRACE:');
    trace.forEach(function(t) {
      msgStack.push(' -> ' + (t.file || t.sourceURL) + ': ' + t.line + (t.function ? ' (in function ' + t.function +')' : ''));
    });
  }
  console.log(msgStack.join('\n'));
  phantom.exit(1);
};

page.onLoadFinished = function(status) {
  var url = page.url;
  console.log("Status:  " + status);
  console.log("Loaded:  " + url);
  window.setTimeout(function () {
    page.render(captureName);
    phantom.exit();
  }, 5000);
};

page.open(homePage);

btw, as result you will get result.png snapshot in the same directory as website.js located

Answer 2

For google to see your page as is, you should be implementing server side rendering. Here by looking at your code it is client side rendering, here browser uses java script to load your DOM.