DEV Community

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

Posted on • Edited 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)