reactjs - 谷歌获取仅显示空白页面答案

【问题标题】：reactjs - fetch as google displays blank page onlyreactjs - 谷歌获取仅显示空白页面
【发布时间】：2018-07-31 19:19:00
【问题描述】：

我刚刚使用 reactjs 编写了我的第一个网站，但是当我检查 google 如何查看我的网站时，我收到以下结果：

我的 HTML 文件如下所示：

<!DOCTYPE html>
<html>
<head>
    <title>MySite</title>
</head>
<body>
    <div id="root"></div>
    <script async type="text/javascript" src="index.browser.js"></script>
</body>
</html>

我已停用所有用于测试的 AJAX 调用，并且 ReactDOM.render 在其 js 文件加载后立即执行。 JS 文件本身经过编译、压缩，大小不到 300 KB（包括所有库，如 react 本身）。

此时，我不明白我可以做哪些更改来让谷歌正确呈现我的页面？据我了解，reactjs 的谷歌渲染问题通常来自 AJAX 调用或在网站本身被渲染和 DOM 更改之前在应用程序代码中完成的其他长时间工作。但是在删除大型库（除了 i18next 和 react 本身），最小化和压缩代码之后，我看不出我可以做些什么来显着提高性能或渲染时间。 PageSpeed Insights 是 99/100 点（桌面，只抱怨我可以最小化 html 以节省 110 个字节）。

我的错误可能在哪里？服务器端渲染对我来说并不是一个合适的选择。

您可以在此处查看演示页面：http://comparo.com.mx

如您所见，没有太多内容 - 但显示的 HTML 内容在加载 index.browser.js 后立即呈现，这是一个

编辑：我的服务器位于欧洲，而谷歌服务器从美国抓取。这可能是个问题吗？

【问题讨论】：

您确定您的index.browser.js 工作正常吗？
是的，我确定。我从中删除了所有 AJAX 调用，这就是为什么结果看起来如此尴尬并且没有被翻译的原因——但我的观点是：谷歌应该显示那几个 HTML 元素，而不是空白页面。

标签： javascript reactjs google-search google-search-console i18next

【解决方案1】：

尝试添加浏览器填充程序。请注意，是否使用 Babel 编译代码并不重要，您仍然需要为旧版浏览器和无头浏览器（如 Google Bot 或 PhantomsJS）使用 polyfill。

npm install --save es5-shim es6-shim

// in your frontend/index.js, as early as possible
import 'es5-shim';
import 'es6-shim';

您可以阅读更多here

【讨论】：

【解决方案2】：

我不知道这是否仍然是个问题，但是...

每个项目可能有不同的原因。首先，我建议您尝试在开发模式下运行您的项目（包括控制台日志）并使用PhantomJS v2.1.1 对其进行测试。结果可以显示一些有用的错误。

接下来你可以看到我的 phantomjs 示例（称为 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);

顺便说一句，您将在 website.js 所在的同一目录中获得result.png 快照

【讨论】：

【解决方案3】：

在“Fetch as Google”中遇到了同样的空白页问题，上面使用 babel-polyfill 的建议并没有解决问题，所以我做了更多的研究：

花费数小时搜索便携式 Google Chrome v.41（据称是 Google Search Bot 的渲染引擎）以查看停止 Google Crawler 的错误。建投，https://rutracker.org/forum/viewtopic.php?t=4817317
Chrome 拒绝在 Windows 10 中运行，所以我不得不找到 Windows 7 VM，最后我发现有 2 个 API 是 babel-polyfill 没有解决的：URLSearchParams 和 fetch( )
我无意中发现完全相同的错误停止了 IE11（Windows 10 的一部分），我可以通过立即在 IE11 中调试网站来节省几个小时，而不是搜索/排除 Chrome v.41 的问题。
找到并添加了所有必需的 polyfill，并使应用在“Fetch as Google”下呈现。

长话短说，这是对我有用的修复方法：

安装 3 个 polyfill：

npm install --save babel-polyfill
npm install --save url-search-params-polyfill
npm install --save whatwg-fetch

在我的入口点 JS 文件 (index.js) 的顶部导入这 3 个：

import 'babel-polyfill';
import 'url-search-params-polyfill';
import 'whatwg-fetch'

import React from 'react';
import ReactDOM from 'react-dom';*
...

【讨论】：

【解决方案4】：

将 babel polyfill 添加到您的项目中：

npm install --save babel-polyfill

然后将其导入你的 index.js（入口点）：

import 'babel-polyfill';

希望这能解决您的问题。

【讨论】：

【解决方案5】：

这似乎是 Google Bot 的 JS 引擎的一个已知问题。我仍在尝试了解究竟是什么问题，但似乎在您的应用中添加“babel-polyfill”可以解决问题。

Medium post detailing a fix

【讨论】：

【解决方案6】：

在我的一个遗留项目中，我运行 Angular.js 将动态内容插入到后端呈现的页面中。 Google 爬虫足够聪明，可以渲染动态 javascript 内容并对其进行索引（例如，表格完全是从 Ajax 数据动态渲染的）。

所以我强烈认为它与服务器端渲染问题有关。

我不建议像@AlexGvozden 建议的那样花时间做 SSR - 这很乏味，尤其是 Webpack 设置。甚至可能使用 Next.js 和 Create React App。

【讨论】：

【解决方案7】：

要让 google 按原样查看您的页面，您应该实现服务器端呈现。这里通过查看你的代码是客户端渲染，这里浏览器使用 java 脚本来加载你的 DOM。

【讨论】：

【解决方案8】：

我不确定 Google 是如何看待您的网站的，因为大多数模拟器只是去掉了 Javascript。

你用过https://www.google.com/webmasters/tools/googlebot-fetch吗？

一般来说，搜索引擎对 Javascript 的支持是有限的，所以如果你真的想让爬虫索引你的网站，你就必须为 React 实现服务器端渲染。

我使用https://github.com/kriasoft/react-starter-kit 生成http://gifhub.net 这是一个有点复杂的经历，但最终奏效了。

还有像 NextJS https://github.com/zeit/next.js/ 这样的框架，您可以利用它们来确保您拥有服务器呈现的内容。

第三种选择是使用 Google Headless Chrome 浏览器为爬虫生成内容https://github.com/GoogleChrome/puppeteer

实施上述选项之一可确保抓取工具看到您想要的所有内容。依赖 Javascript 渲染不会给你预期的结果。

【讨论】：