Angular SEO : how to add dynamic titles and meta tags for each route

How to set dynamic titles and metatags in angular by using meta, title service from angular/platform-browser package.
Meta tags and page titles provide information about each Page/Angular route.where search engines like [googleBot](https://support.google.com/webmasters/answer/182072) and other web crawlers use it to automatically discover and scan websites and archive pages. which also help in ranking the page and display part of the page content on search result page.

Examples on title and some meta tags :


<title>page title</title> <!-- - The title of your page as it should appear in google search result -->
<meta name="description" content=""> <!-- - The description of your page as it should appear in google search result -->
<meta name="og:title" content=""> <!-- The title of your page as it should appear in facebook -->
<meta name="og:image" content=""> <!-- An image URL which should represent your page -->
<meta name="og:url" content=""> <!-- The canonical URL of your page -->
<meta name="og:type" content=""> <!-- The type of your page, e.g., "Article". Depending on the type you specify, other properties may also be required. -->
<meta name="og:site_name" content=""> <!-- If your page is part of a larger web site, the name which should be displayed for the overall site. e.g., "IMDb". -->
<meta name="twitter:card" content=""> <!-- Must be set to a value of “summary_large_image”-->
<meta name="twitter:image:alt" content=""> <!--The limit is 420 characters -->


We will go through how to dynamically add/update page titles and essential meta tags for each **angular** route. to do so we will use the Angular’s [Meta service](https://angular.io/api/platform-browser/Meta#meta) part of the package platform-browser.

1- In your angular project, import ‘Meta’, ‘Title’ from **@angular/platform-browser** package in your component or service. example :


import { Meta, Title } from '@angular/platform-browser';


2- Inject both Title and Meta services via the component constructor :


constructor(private title: Title, private meta: Meta){}


3- You should set the page title and meta tags After angular has initialized all data-bound properties of a directive. so we will use the angular hook ngOnInit() and set our tags inside it :


import { Component, OnInit} from '@angular/core' ;
import { Meta, Title } from '@angular/platform-browser';

@Component({
selector: 'app-nav',
templateUrl: './nav.component.html',
styleUrls: ['./nav.component.css']
})
export class NavComponent implements OnInit{
constructor(private titleService: Title, private metaService: Meta){}
ngOnInit(){
this.titleService.setTitle(this.title);
this.metaService.updateTag({ name: 'description', content: desc });
this.metaService.updateTag({ name: 'keywords', content: keywords });
this.metaService.updateTag({ name: 'og:title', content: title });
this.metaService.updateTag({ name: 'og:description', content: desc });
this.metaService.updateTag({ name: 'og:image', content: image);
this.metaService.updateTag({ name: 'og:url', content: link});
this.metaService.updateTag({ name: 'og:type', content: type });
this.metaService.updateTag({ name: 'twitter:card', content: "summary_large_image" });
this.metaService.updateTag({ name: 'og:site_name', content: name });
this.metaService.updateTag({ name: 'twitter:image:alt', content: altDesc });
}
}


4- After adding the dynamic value in the **content property** in each meta tag you can go ahead and test your app and your dynamic tags.

For any questions please leave a comment