I'm using ng2-metadata with my angular version 4 app and google only seems to show the default title and description

Question

I'm using ng2-metadata with my angular app and google only seems to show the default title and meta description.

My tech: Angular version 4, webpack, typescript and firebase for hosting.

I'm deploying an AOT build and I have added the ng2-metadata aot function like the below link suggests.

This is the package I'm using: https://www.npmjs.com/package/ng2-metadata

Current issue:

The code seems to work in the browser visually but the google bots don't seem to show the other pages title and meta tags in the google search results.

*I've done a webmaster tools crawl request to index the pages even though its a SPA.

This is one of my routes for my blog page (I've removed some of the text):

import { Route} from '@angular/router';
import { BlogComponent } from './blog.component';

export const BlogRoutes: Route[] = [
 {
    path: 'blog',
    component: BlogComponent,
    data : {
      metadata : {
        title : 'My Website | Blog',
        override : true,
        description : "The latest news & blog post....",
        keywords: "blog, reading, posts"
      }
    }
  }
];

Answer 1

Many of the crawlers do not work well with Single Page Apps. You can use a prerender solution like https://prerender.io/ or https://www.prerender.cloud/. I am using https://www.prerender.cloud/ with Netlify and it works well.

If you want to stay with Firebase Hosting, try to minimize the code that is called when a bot hits the page. Don't load any libraries or run anything expect what is necessary to render the tags and data you need for the bots and crawlers. Example below.

index.html

<script>
  (function(w,d){
    w.myApp = w.myApp || {}; w.myApp.robot = false;
    var AM_I_ROBOTS = ['googlebot', 'twitterbot', 'facebookexternalhit', 'google.com/bot.html', 'facebook.com/externalhit_uatext.php', 'tweetmemebot', 'sitebot', 'msnbot', 'robot', 'bot', 'spider', 'crawl'];
    var ua = navigator.userAgent.toLowerCase(); w.myApp.userAgent = ua;
    for (var i = 0, len = AM_I_ROBOTS.length; i < len; i++) { if(ua.indexOf(AM_I_ROBOTS[i]) !== -1  ) { w.myApp.robot = true; break; }}
    })(window,document);
 </script>
 <script>
    if(!window.myApp.robot){
    // Google Analytics code
    }
 </script>
 <script>
    if(!window.myApp.robot){
    // Facebook Connect code
    }
 </script>

app.component.ts

export class AppComponent implements OnDestroy, OnInit, AfterViewInit {

  ...

  public webRobot: boolean = false;
  private static AM_I_ROBOTS:[string] = ['googlebot', 'twitterbot', 'facebookexternalhit', 'google.com/bot.html',
    'facebook.com/externalhit_uatext.php', 'tweetmemebot', 'sitebot', 'msnbot', 'robot',
    'bot', 'spider', 'crawl'];

  ... 

  constructor(private auth: Auth,
              private localStorage: LocalStorageService,
              private meta: MetaService,
              ...
              private otherService: OtherService, 
  ) {
  }

  ngOnInit(): void {
    this.init();
  }

  init() {
    const robots = AppComponent.AM_I_ROBOTS;
    const ua = navigator.userAgent.toLowerCase();
    for (var i = 0, len = robots.length; i < len; i++) {
      if(ua.indexOf(robots[i]) !== -1  ) {
        this.webRobot = true;
        break;
      }
    }

    // for service that should be informed to 
    // run minimally with robots
    this.otherService.init(this.webRobot);

    // for service that should not be called with robots
    if (!this.webRobot) {

      this.auth.init();

      // etc.

    }
  }

Answer 2

Angular 4 come with meta service and Angular Universal, you can try it.