Javascript reactjs-fetch作为google只显示空白页面_Javascript_Reactjs_Google Search_Google Webmaster Tools_I18next

Javascript reactjs-fetch作为google只显示空白页面

javascript reactjs

Javascript reactjs-fetch作为google只显示空白页面,javascript,reactjs,google-search,google-webmaster-tools,i18next,Javascript,Reactjs,Google Search,Google Webmaster Tools,I18next,我刚刚使用reactjs编写了我的第一个网站，但当我检查google如何看待我的网站时，我收到了以下结果：我的HTML文件如下所示： <!DOCTYPE html> <html> <head> <title>MySite</title> </head> <body> <div id="root"></div> <script async type="tex

我刚刚使用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文件本身经过编译、压缩，大小不到300KB（包括所有像react本身这样的库）

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

你知道我的错误在哪里吗？服务器端渲染对我来说不是一个真正合适的选项

您可以在此处查看演示页面：

正如您所看到的，虽然没有太多内容，但显示的HTML内容在加载index.browser.js后立即呈现，index.browser.js是一个小于300KB的文件，因此不应阻止google搜索控制台正确呈现页面

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

我不确定谷歌对你的网站的看法是否准确，因为大多数模拟器只是剥离了Javascript

你用过吗

一般来说，Javascript对搜索引擎的支持是有限的，所以如果您真的想让爬虫为您的站点编制索引，那么您必须为React实现服务器端呈现

我曾经创造过这是一次有点复杂的经历，但最终还是奏效了

还有一些框架，比如NextJS，您可以利用它们来确保服务器呈现内容

第三种选择是使用谷歌无头Chrome浏览器为爬虫程序生成内容

实现上述其中一个选项可以确保爬虫程序看到您想要的一切。依靠Javascript呈现不会给您预期的结果。

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

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

因此，我强烈认为这与服务器端渲染问题有关

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

这似乎是Google Bot的js引擎的一个已知问题。我仍在努力理解到底是什么问题，但似乎在你的应用程序中添加“babel polyfill”可以解决问题

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

npm install --save babel-polyfill

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

希望这能解决您的问题。

在“以谷歌方式获取”的空白页面上也有同样的问题，上面关于babel polyfill的建议并没有解决问题，所以我做了更多的研究：

花了数小时搜索便携式谷歌Chrome v.41（据称是谷歌搜索机器人的渲染引擎），以查看停止谷歌爬虫时出现的错误。JIC

Chrome拒绝在Windows 10中运行，因此我必须找到Windows 7虚拟机，最后我发现有两个API是babel polyfill无法解决的：URLSearchParams和fetch（）

我意外地发现，完全相同的错误使IE11（Windows 10的一部分）停止运行，我可以立即在IE11中调试站点，而不是搜索/排除Chrome v.41的故障，从而节省几个小时。

找到并添加了所需的所有polyfills，并使应用程序在“以谷歌身份获取”下呈现

长话短说，以下是对我有效的修复方法：

安装3个polyfills：

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

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

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

phantomjsv2.1.1

对其进行测试。结果可以显示一些有用的错误

接下来您可以看到我的phantomjs示例（名为

website.js

）：

var system=require（'system'））
var page=require（“网页”）.create（）；
var homePage=“http://”；
var captureName=“result.png”；
page.onConsolleMessage=函数（msg）{
system.stderr.writeLine（'console:'+msg）；
};
page.onError=函数（消息，跟踪）{
var msgStack=['PHANTOM ERROR:'+msg]；
if（trace&&trace.length）{
msgStack.push（'TRACE:'）；
trace.forEach（函数（t）{
msgStack.push（'->'+（t.file | | t.sourceURL）+'：'+t.line+（t.function？'（在函数'+t.function+'）：''）；
});
}
console.log（msgStack.join（'\n'））；
幻影。出口（1）；
};
page.onLoadFinished=功能（状态）{
var url=page.url；
控制台日志（“状态：+状态”）；
日志（“加载：+url”）；
setTimeout（函数（）{
页面呈现（captureName）；
phantom.exit（）；
}, 5000);
};
页面打开（主页）尝试添加浏览器垫片。请注意，如果您使用Babel编译代码，这并不重要，但对于较旧的浏览器和无头浏览器，您仍然需要polyfills
import 'babel-polyfill';

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

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

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

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