reactjs - 获取谷歌只显示空白页

IT技术 javascript reactjs google-search google-search-console i18next
2021-05-02 14:13:48

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

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

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

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

如您所见，内容不多 - 但显示的 HTML 内容在加载 index.browser.js 后立即呈现，这是一个 < 300KB 的文件，因此不应阻止谷歌搜索控制台正确呈现页面。

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

4个回答

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

npm install --save babel-polyfill

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

import 'babel-polyfill';

希望这能解决您的问题。

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

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

在此处输入图片说明

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

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

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

详细说明修复的中等帖子

其它你可能感兴趣的问题
上一篇手持绘图仪的 G 代码固件 (Arduino) 下一篇在加载 Ramps 1.4 的测试固件时，我应该注释掉我没有测试的代码吗？