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"
      }
    }
  }
];

Inset

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.

    }
  }

Caskey

Thanks @Caskey I will take a look – Inset

I can't use those because my website is a full client side app and has no server side. I use firebase to then host the website – Inset

That's exactly what Netlify does -- it hosts your full client-side app. They have a great free tier and provide SSL. I recommend you check it out. It's great. I have a few apps on it. I really like the GIT continuous deployment. You connect it to your GIT repository and it will build and deploy automatically whenever you push a "master" or whatever branch you choose. Such a time saver. – Caskey

I'm using firebase for hosting and database so can't change to that. I'm looking for an angular 4 solution or plugin – Inset

By the way, I use ng2-metadata too. I tried everything. The only way to get it to work reliably (especially with Facebook crawler) was to use Netlify and prerender.cloud. – Caskey

Ok I understand. – Caskey

Yes, but I haven't upgraded yet to Angular 4. Unless I missed something, it operates the same way as ng2-metadata. Crawlers still can't properly execute the Angular javascript to get to the meta service code. – Caskey

Will this mean googles crawlers won't register my other pages title and meta tags? – Inset

Google crawlers will run your Javascript, but there are a lot of issues. If it hits code it cannot handle, it won't work. See this post... plus.google.com/u/0/+JohnMueller/posts/LT4fU7kFB8W One of the things I'm doing is detecting for bots in index.html and inside my Angular app. If it is a bot, I don't load any libraries (Google Analytics, Facebook Connect, etc.) or run any code (ex. Auth) that's not required simply to render the tags and info. I'll add my code above. P.S. If you still have issues, try host on Netlify with prerender.cloud and still use Firebase Database, etc. – Caskey

Thanks for the info. How do you detect if it's a bot and then Load your libraries – Inset

Hi Dan, I'd love to know a bit more about how you setup Netlify and Prerender.cloud. Is there an introduction setup site somewhere out there? – Porpoise

@BenCameron You can sign up for prerender.cloud and then do a chat with Netlify and ask them to set it up on their side. I tried using prerender.io with Netlify but there were use-cases (ex. Facebook) where it wasn't properly working. See netlify.com/docs/prerendering . It looks like they have a couple other options on the list now, but prerender.cloud worked well for us and we have a production app using it with some finicky crawlers like Facebook. Ask Netlify over chat to give you a quick overview of the pros and cons of each solution. They are great to work with. -- Dan – Caskey

Answer 2

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

Jyoti

Do you have an examples ? Links – Inset

all my app is client side and universal seems server side eg node – Inset

yeap, Angular Universal using nodejs to pre render from server – Jyoti

Are their any client side alternatives – Inset

Just to clarify, to use angular universal do I need a backend e.g. node server? Can I setup angular universal in my client side app and it will work? – Inset

Yes, you need a node server to render the app in the server side to take advantage of the SSR. There is an express render engine which has been used to render the angular universal app. Below is an example github.com/robwormald/ng-universal-demo – Hl