DEV Community

Cover image for Add Meta Tags and Title Dynamically for SEO using Angular Component
shivlal kumavat
shivlal kumavat

Posted on

Add Meta Tags and Title Dynamically for SEO using Angular Component

#seo #angular #100daysofcode #typescript

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!!!

Top comments (0)