How to make your Angular app SEO friendly

Let's see how we can add SEO to our Angular app easily using following steps

1. First open your app.component.ts file and import meta and title service. The example is below..

import { Meta, Title } from '@angular/platform-browser';

2. Then you can find the "export class LayoutComponent implements OnInit {}" line and add the following code inside the curly brases.

constructor(private titleService: Title, private meta: Meta) {

this.titleService.setTitle('Add Your Title Here - Learn Angular Fast');

this.meta.addTag({ name: 'description', content: 'Add your website description here' });

this.meta.addTag({ name: 'keywords', content: 'Add your website seo keywords here' });
}

3. Now the app.component.ts file output will be look like this.

import { Component, OnInit } from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';

export class LayoutComponent implements OnInit {

constructor(private titleService: Title, private meta: Meta) {

this.titleService.setTitle('Learn Angular Fast - This is my blog title');

this.meta.addTag({ name: 'description', content: 'This is my blog description' });

this.meta.addTag({ name: 'keywords', content: 'How to learn angular Fast - This is my blog description' });

}

ngOnInit() {

}
}

4. Then repeat the same step for the remaining component files to add multiple keywords, title and description.