Hello Devs,

In this tutorial, we are going to learn about the demonstration of angular 10 seo meta tags.

We will use Meta service for adding page title and meta tags in our angular 10 project.

See the simple example given 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"');

  

}


I hope this example helps you.