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

shivlal kumavat
Sr. Full Stack Developer || Conflict in life rebase and go ahead.
・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)

Forem Open with the Forem app