Question

我有一个Angular应用程序，我正在尝试在生产环境中设置。正如我所读到的，Google现在能够通过AJAX页面进行爬行。我正在查看我如何使用Fetch as Google服务。虽然主页在所有主流浏览器中都能正确呈现，但Fetch as Google会返回空白页面，而且没有编译任何Angular指令且没有错误。我正在使用HTML5模式和ui-router。文件由node.js应用服务器提供（我尝试从nginx提供文件，结果相同），robots.txt允许所有文件。脚本连接和缩小。控制台中没有错误。

Fetch as Google service返回的代码：！doctype html＆gt;

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <base href="/">
  <title ng-bind="$state2.current.data.pageTitle || 'xxx'"></title>
  <meta name="description" content="{{$state2.current.data.description}}">
  <meta name="keywords" content="{{$state2.current.data.keywords}}">
  <meta name="viewport" content="width=device-width">
  <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
  <link rel="stylesheet" href="app/b91daaea.vendor.css">
  <link rel="stylesheet" href="bower_components/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css" />
  <link rel="stylesheet" href="app/dbc6e533.app.css">
</head>

<body iact-set-body="{{$state2.current.name}}" ng-cloak ng-controller="IndexCtrl as Index" ng-class="{'register-page' : $state2.current.name === 'register.one'}">
  <iact-progress-bar ng-if="$state2.current.name === 'main.post'" class="progress-bar progress-bar--page"></iact-progress-bar>
  <div class="alert-block" alert-box></div>


  <loader ng-show="showLoader"></loader>
  <div class="ui-view-container">
    <div ng-cloak ui-view></div>
    <div ng-cloak ui-view="layer" class="ui-view-layer"></div>
  </div>


  <!--[if lt IE 7]>
    <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
        your browser</a> to improve your experience.</p>
  <![endif]-->
  <!--[if lt IE 9]>
    <script src="bower_components/es5-shim/es5-shim.js"></script>
    <script src="bower_components/json3/lib/json3.min.js"></script>
  <![endif]-->
  <script src="https://cdn.socket.io/socket.io-1.3.7.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB5s1GO-SwKumRL-es-SHnGYwom55LpJyM&libraries=places"></script>
  <script src="app/9b5d1095.vendor.js"></script>
  <script src="app/b49bc91c.app.js"></script>
</body>

</html>

有没有做错的事情，或者我应该为爬行器预先渲染？

Answer 1

React应用程序的同一问题在另一个方面进行了讨论，基本上，您可能要使用polyfills并在IE11 / Chrome v41中进行一些调试，以查看在Google Crawler渲染引擎下可能会破坏哪些API

reactjs - fetch as google displays blank page only

Answer 2

最近做研究，我发现在互联网上的压倒性意见是，如果你有一个AngularJS应用程序，并且你希望它被谷歌抓取并编入索引，你需要prerender或{{3}之类的东西。 }，生成HTML快照，站点的静态页面，以便搜索引擎可以为其编制索引。

如果您对SEO优化业务非常认真，我认为您应该非常小心地使用这些工具。首先，他们表示正在使用Google的一个定义Ajax抓取的规范。但是该规范已被弃用。

预渲染可能会导致隐藏真实内容。当网站向用户显示与搜索引擎不同的内容时，就会发生伪装。至少，如果你是隐形眼镜，谷歌的处罚速度很快。请测试，测试，测试您的每个网站和任何网站是否有隐藏真实内容，特别是在提供两种不同版本时！

谷歌说：在评估您的网站以查看其是否包含隐藏文字或链接时，请查找您网站访问者无法轻易查看的任何内容。

您无需向Google提供不同的或预先呈现的内容。事实上，只要您在应用程序中遵循常规SEO约定，Google就可以抓取，渲染和索引您的AngularJS应用程序。索引还需要一些时间。

免责声明：这是一个理论概念。测试表明，Google可以正确地抓取，渲染和索引纯AngularJS网站。但是，其他搜索引擎和抓取工具不太可能正确抓取您的内容。在纯JS环境中，您不会被Bing，Yahoo或Yandex索引; Facebook，Twitter，Pinterest和其他许多社交网络都不会知道你的网页是什么。在2016年，如果您关心来自外部源的流量，则不应在生产站点上实现纯JS架构。

获取Google时无法呈现Angular.js应用程序

2 个答案: