Question

我刚刚使用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调用，并且在加载js文件后立即执行ReactDOM.render。 JS文件本身是经过编译，压缩的，大小不到300 KB（包括所有库，比如反应）。

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

我的错误可能是什么想法？服务器端渲染对我来说不是一个合适的选择。

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

正如您所看到的，没有太多 - 但显示的HTML内容在加载index.browser.js之后立即呈现，该文件是＆lt; 300KB，因此不应该使Google搜索控制台无法正常呈现页面。

编辑：我的服务器位于欧洲，并且谷歌服务器从美国爬行。这可能是一个问题吗？

Answer 1

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

npm install --save babel-polyfill

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

import 'babel-polyfill';

希望这能解决您的问题。

Answer 2

我不确定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渲染不会给你预期的结果。

Answer 3

在我的一个遗留项目中，我运行Angular.js将动态内容插入到后端呈现的页面中。 Google抓取工具非常智能，可以让它呈现动态javascript内容并对其进行索引（例如，表格是从Ajax数据中完全动态呈现的）。

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

我不建议花时间做SSR，因为@AlexGvozden建议 - 这非常繁琐，尤其是Webpack设置。甚至可能使用Next.js和Create React App。

Answer 4

这似乎是Google Bot的JS引擎的一个已知问题。我仍然试图了解究竟是什么问题，但似乎添加了“babel-polyfill＆＃39;到您的应用程序解决了问题。

Medium post detailing a fix

Answer 5

“ Google抓取”中的空白页也有同样的问题，上面关于babel-polyfill的建议并没有解决问题，所以我做了更多的研究：

花了几个小时搜索便携式Google Chrome v.41（据称是Google Search Bot的呈现引擎），以查看导致Google Crawler停止运行的错误。 JIC，https://rutracker.org/forum/viewtopic.php?t=4817317
Chrome拒绝在Windows 10中运行，所以我不得不找到Windows 7 VM，最后我发现babel-polyfill无法解决两个API： URLSearchParams 和 fetch（）
我偶然发现完全相同的错误使IE11（Windows 10的一部分）停止运行，并且我可以通过立即在IE11中调试站点来节省几个小时，而不是对Chrome v.41进行搜索/故障排除。
找到并添加了所需的所有polyfill，并在“以Google身份获取”下呈现了该应用。

长话短说，这是对我有用的解决方法：

安装3个polyfills：

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

将这3个导入我的入口点JS文件（index.js）的顶部：

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

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

Answer 6

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

Answer 7

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

对于每个项目，可能有不同的原因。首先，我建议您尝试在开发模式下运行项目（包括控制台日志），并使用public class VuforiaCustomBehaviour: MonoBehaviour, ITrackableEventHandler public TrackableBehaviour mTrackableBehaviour; void Start() { mTrackableBehaviour = GetComponent<TrackableBehaviour>(); if (mTrackableBehaviour) { mTrackableBehaviour.RegisterTrackableEventHandler(this); } } public void OnTrackableStateChanged(TrackableBehaviour.Status previousStatus, TrackableBehaviour.Status newStatus) { if (newStatus == TrackableBehaviour.Status.DETECTED || newStatus == TrackableBehaviour.Status.TRACKED || newStatus == TrackableBehaviour.Status.EXTENDED_TRACKED) { if (mTrackableBehaviour.TrackableName == "marker1") { DoSmth(); } } else { OnTrackingLost(); } }对其进行测试。结果可以显示一些有用的错误。

接下来，您可以看到我的phantomjs示例（称为PhantomJS v2.1.1）：

website.js

顺便说一句，结果您将在与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);快照

Answer 8

尝试添加浏览器垫片。请注意，使用Babel编译代码并不重要，对于较旧的浏览器和无头浏览器（例如Google Bot或PhantomsJS），仍然需要使用polyfill。

npm install-保存es5-shim es6-shim

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

您可以阅读更多here

reactjs - 谷歌只显示空白页面

8 个答案: