获取Google不会呈现Angular.js应用程序

Question

获取Google不会呈现Angular.js应用程序

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

由Fetch作为Google服务返回的代码:!doctype html>

<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>

Run Code Online (Sandbox Code Playgroud)

有没有做错的事情,还是我应该为爬虫做好准备？

Answer 1

Max*_*lin 0

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

Reactjs - 当谷歌仅显示空白页面时获取

归档时间：	9 年，12 月前
查看次数：	1006 次
最近记录：	7 年，1 月前