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

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

In this post we will give you information about Angular 9/8 SEO – How to Add Page Title and Meta Tags?. Hear we will give you detail about Angular 9/8 SEO – How to Add Page Title and Meta Tags?And how to use it also give you demo for it if it is necessary.

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…

Hope this code and post will helped you for implement Angular 9/8 SEO – How to Add Page Title and Meta Tags?. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

  +  74  =  80

We accept paid advance and paid guest Posting on our Site : Contact US