Hi Dev,
In this tutorial we will go over the demonstration of angular 10 seo meta tags. i explained simply about seo meta tags angular 10. I’m going to show you about seo meta tags for website angular 10. Here you will learn angular 10 meta tags. Alright, let’s dive into the steps.
it's simple example of angular 10 universal meta tags. Let's get started with how to set seo meta tags in angular 10.
We will use Meta service for adding page title and meta tags in our angular 10 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 - HDTuto.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 - HDTuto.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 - HDTuto.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 - HDTuto.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...
Do you like below Tutorials ?
- Laravel 7.x and 6.x Ajax Multiple Image Upload with Preview Example
- Laravel select with count(*) using db raw example
- PHP Laravel select with join subquery example
- PHP Laravel Ajax Form Submit Example
- How to create events for created/updated/deleted model task in Laravel 5?
- Angular JS Form Validation Example Code
- AngularJS - Confirm Password Validation Example
- Laravel Ajax Request using X-editable bootstrap Plugin Example