Angular2 App：Fetch as Google 不加载页面内容

Question

我正在开发基于 Angular2 的网络应用程序。我使用 Angular CLI 生成应用程序，然后为产品构建它。我在 AWS S3 和 Cloudfront 上托管了网站。当我使用网站管理员的 'Fetch as Google' 工具时，它只显示 Loading....

Googlebot 不能抓取我的网站吗？

Answer 1

由于您的前端未由任何服务器端语言提供服务，我建议使用 Angular2-Universal 在初始加载时为静态 HTML 站点提供服务。

您可以查看他们的 quickstart 指南并快速使用它。

Answer 2

有类似的问题。我相信 Google-Bot 不支持现代 JS。我只是激活了 angular.io 推荐的所有垫片，请参阅 https://angular.io/docs/ts/latest/guide/browser-support.html 并在脚本头中添加：

<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/shim.min.js">
</script>

我不确定你是否真的需要所有这些，但无论如何我都需要对旧版 IE 的支持。

如果这适用于所有 Searchbots 还不清楚，如果您必须支持它们，您可以尝试 https://prerender.io/。然而，他们也只能用垫片渲染它

希望对您有所帮助。

Answer 3

首先这是在 NG-Conf 2018 Apr 上讨论的对于幻灯片，请单击 here

查看 Angular.io here 的源代码 angular 伙计们如何根据幻灯片

 <script>
    if (window.document.documentMode) {
      // polyfill IE11 in a blocking way
      var s = document.createElement('script');
      s.src = 'generated/ie-polyfills.min.js';
      document.head.appendChild(s);
    } else if (!Object.assign) {
      // polyfill other non-evergreen browsers in a blocking way
      var polyfillUrl = "https://cdn.polyfill.io/v2/polyfill.min.js?features=default,Array.prototype.find&flags=gated&unknown=polyfill";
      // send a blocking XHR to fetch the polyfill
      // then append it to the document so that its eval-ed synchronously
      // this is required because the method used for IE is not reliable with other non-evergreen browsers
      var xhr = new XMLHttpRequest();
      xhr.addEventListener("load", function() {
        var s = document.createElement('script');
        s.type = 'text/javascript';
        var code = this.responseText;
        s.appendChild(document.createTextNode(code));
        document.head.appendChild(s);
      });
      xhr.open("GET", polyfillUrl, false);
      xhr.send();
    }
  </script>

将上述脚本添加到索引文件的 HEAD 部分。

值得一提的是，如果您选择仅添加 CDN 的答案，那么您很可能正在将大多数现代浏览器不需要的脚本加载到这些浏览器，并且应该避免。

Angular2 App：Fetch as Google 不加载页面内容

Angular2 App: Fetch as Google doesn't load page content

seo

googlebot

angular