seo Question posted in
Some basic information to get you started with this can be found here.

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

I am working on Angular2 based web app. I used Angular CLI to generate app and then to build it for prod. I have hosted website on AWS S3 & Cloudfront. When I use ‘Fetch as Google’ tool from the webmaster, it shows only Loading....

enter image description here

Isn’t Googlebot able to crawl my website?

Tags:

3

Answers


  1. 0

    Since your frontend isn’t being served by any server side language, I’d recommend using Angular2-Universal to serve a static HTML site on initial load.

    You can checkout their quickstart guide and get it working pretty fast.

    Login or Signup to reply.
  2. 0

    had a similar issue. I believe Google-Bot do not support modern JS. I simply activated all shims recommended by angular.io see https://angular.io/docs/ts/latest/guide/browser-support.html and added in the script header:

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

    If you really need all of them I’m not sure, but I need support for older IE anyway.

    If this works for all Searchbots is very unclear, if you have to support them you can try https://prerender.io/. However they are also just able to render it with the shims

    Hope this helps.

    Login or Signup to reply.
  3. 0

    First this was talked about at NG-Conf 2018 Apr
    For the slides click here

    Looking at the source code of the Angular.io here is how the angular guys do this according to the slides

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

    Add the above script in the HEAD section of your index file.

    Worth to mention that if you go with the answer of just adding a CDN you most probably are loading a script that is not needed for most of the modern browsers to those browsers as well and should be avoided.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search