reactjs - 谷歌只显示空白页面

问题描述 投票：4回答：8

我刚刚使用reactjs编写了我的第一个网站，但当我查看谷歌如何看到我的网站时，我收到以下结果： 在此输入图像描述

我的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之后立即呈现，这是一个<300KB的文件，因此不应该使谷歌搜索控制台无法正确呈现页面。

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

javascript reactjs google-search google-webmaster-tools i18next
8个回答
8
投票

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

npm install --save babel-polyfill

然后在index.js（入口点）中导入它： 

import 'babel-polyfill';

希望这能解决您的问题。

2
投票

我不确定谷歌是如何看待你的网站的，因为大多数模拟器只是剥离了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渲染不会给你预期的结果。

1
投票

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

在此输入图像描述

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

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

1
投票

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

中等帖子详细说明修复

1
投票

在“抓取谷歌”的空白页面上遇到同样的问题，上面关于babel-polyfill的建议并没有解决问题所以我做了更多的挖掘：

  1. 花了几个小时搜索便携式谷歌浏览器v.41（据称是谷歌搜索机器人的渲染引擎），看看停止谷歌抓取工具的错误是什么。 JIC， https： //rutracker.org/forum/viewtopic.php ？ t = 4817317
  2. Chrome拒绝在Windows 10中运行，所以我不得不找到Windows 7 VM，最后我发现有2个babel-polyfill没有解决的API： URLSearchParams和fetch（）
  3. 我意外地发现完全相同的错误停止了IE11（Windows 10的一部分），我可以通过立即调试IE11中的网站来节省几个小时，而不是搜索/排除Chrome v.41。
  4. 找到并添加了所需的所有polyfill，并将应用程序呈现在“Fetch as Google”下。

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

  1. 安装3个polyfill： 
 npm install --save babel-polyfill npm install --save url-search-params-polyfill npm install --save whatwg-fetch
  1. 在我的入口点JS文件（index.js）的顶部导入那些3： 
 import 'babel-polyfill'; import 'url-search-params-polyfill'; import 'whatwg-fetch' import React from 'react'; import ReactDOM from 'react-dom';* ...

在此输入图像描述

0
投票

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

0
投票

我不知道它是否还是一个问题，但......

对于每个项目，可能有不同的原因。 首先，我建议您尝试在开发模式下运行项目（包括控制台日志）并使用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快照

0
投票

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

npm install --save es5-shim es6-shim 

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

你可以在这里阅读更多

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.