DEV Community

loading...
Cover image for Add Meta Tags and Title Dynamically for SEO using Angular Component

Add Meta Tags and Title Dynamically for SEO using Angular Component

slk5611 profile image shivlal kumavat ・1 min read

The blog is all about Meta Tags. In a simple way meta tags are used for search engine optimization to describe the page content. Meta tags always inside the <head> section.

We are going to set the most common three header meta description, title and tag content dynamically.

Import the predefined Meta Service in your component :

import { Meta, Title } from '@angular/platform-browser';
Enter fullscreen mode Exit fullscreen mode

Inject the Service in Constructor :

constructor(private title: Title, private meta: Meta) {}
Enter fullscreen mode Exit fullscreen mode

Add title and meta tag in ngOnInit() using setTitle and updateTag :

ngOnInit()
{ 
  this.title.setTitle('Angular Overview'); 
  this.meta.updateTag({ 
  name:'author',content:'angulartpoint.com'}); 
  this.meta.updateTag(
  {
    name:'keyword',
    content:'angular overview, features'
  }); 

  this.meta.updateTag(
    {
      name:'description',
      content:'It contains overview of angular application'
    }); 
}
Enter fullscreen mode Exit fullscreen mode

Happy coding!!!

Discussion (0)

pic
Editor guide