Angular 9/8 SEO - How to Add Page Title and Meta Tags?

By Hardik Savani | April 4, 2020 | Category : Angular


Hi Dev,

This tutorial will give you example of angular 9/8 seo meta tags. it's simple example of how to add meta tags in angular 9/8. Here, i help with example of angular 9/8 universal dynamic meta tags.

it's simple example of angular 9/8 universal meta tags. Let's get started with how to set seo meta tags in angular 9/8.

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.

Let's see simple example and also i will give you example of addTags(), getTag(), updateTag() and removeTag().

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 - ItSolutionStuff.com");

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' }

]);

}

}

You can see layout as bellow:

getTag()

src/app/app.component.ts

ngOnInit() {

this.titleService.setTitle("Angular SEO Meta Tag Example - ItSolutionStuff.com");

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 - ItSolutionStuff.com");

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 - ItSolutionStuff.com");

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 it can help you...




Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: