Hello Devs,

In this tutorial, we will learn How to Set Dynamic Page Title and Meta Tags in Angular?

We will use Meta service for adding page title and meta tags in our angular 9/8 project. we can use Title and Meta service from @angular/platform-browser.

Follow this step by step guide below. 


Add Tags:

src/app/app.component.ts

import { OnInit, Component } from '@angular/core';

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

  

@Component({

  selector: 'my-app',

  templateUrl: './app.component.html',

  styleUrls: [ './app.component.css' ]

})

export class AppComponent implements OnInit {

  name = 'Angular';

  

  constructor(

    private titleService: Title,

    private metaTagService: Meta

  ) { }

  

  ngOnInit() {

    this.titleService.setTitle("Angular SEO Meta Tag Example - rathorji.in");

  

    this.metaTagService.addTags([

      { name: 'keywords', content: 'Angular SEO Title, Meta Description, Meta Keyword Example' },

      { name: 'robots', content: 'index, follow' },

      { name: 'author', content: 'Hardik Savani' },

      { charset: 'UTF-8' }

    ]);

      

  }

}


getTag()

src/app/app.component.ts

ngOnInit() {

	this.titleService.setTitle("Angular SEO Meta Tag Example - rathorji.in");

  

	this.metaTagService.addTags([

	  { name: 'keywords', content: 'Angular SEO Title, Meta Description, Meta Keyword Example' },

	  { name: 'robots', content: 'index, follow' },

	  { name: 'author', content: 'Hardik Savani' },

	  { charset: 'UTF-8' }

	]);

  

	const author = this.metaTagService.getTag('name=author');

	console.log(author.content); //Hardik Savani

  

}


updateTag()

src/app/app.component.ts

ngOnInit() {

	this.titleService.setTitle("Angular SEO Meta Tag Example - rathorji.in");

  

	this.metaTagService.addTags([

	  { name: 'keywords', content: 'Angular SEO Title, Meta Description, Meta Keyword Example' },

	  { name: 'robots', content: 'index, follow' },

	  { name: 'author', content: 'Hardik Savani' },

	  { charset: 'UTF-8' }

	]);

  

	this.metaTagService.updateTag({ name: 'author', content: 'Paresh Savani' });

  

}


removeTag()

src/app/app.component.ts

ngOnInit() {

	this.titleService.setTitle("Angular SEO Meta Tag Example - rathorji.in");

  

	this.metaTagService.addTags([

	  { name: 'keywords', content: 'Angular SEO Title, Meta Description, Meta Keyword Example' },

	  { name: 'robots', content: 'index, follow' },

	  { name: 'author', content: 'Hardik Savani' },

	  { charset: 'UTF-8' }

	]);

  

	this.metaTagService.removeTag('name="author"');

  

}


May this example help you.