Fetch as Google doesn't render Angular.js application
Asked Answered
F

1

6

I have an Angular app that i'm trying to set up in production enviroment. As i have read, Google now is able to crawl through AJAX pages. I'm checking how i'd work with Fetch as Google service. Though the home page is correctly rendered in all major browsers, Fetch as Google returns blank page with none of Angular's directives compiled and no errors. I am using HTML5 mode and ui-router. Files are served by node.js app server (I have tried to serve files from nginx and result was the same) and all files are allowed by robots.txt. Scripts are concatenated and minified. There are no errors in console.

Code returned by Fetch as Google service: !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>

Is there something that was done wrong or should I just go with prerendering for crawlers?

Frentz answered 22/1, 2016 at 21:7 Comment(3)
I'm having the same issue, the strange thing is, when I fetch and render google does show me the pages "as google sees it", which is confusing because when it just fetches (and stores in cache btw...) without the template loading.Wheresoever
Possible duplicate of Fetch as Google Webmaster toolsInerney
The best solution for this is render angular on server side. (Angular SSR)Ermentrude
S
0

Same issue with React app was discussed in another tread, basically you might want to use polyfills and do some debugging in IE11/Chrome v41 to see which APIs might be broken under Google Crawler rendering engine

reactjs - fetch as google displays blank page only

Soerabaja answered 27/11, 2018 at 15:45 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.