Updated Version
There is an updated version of this article here:
Scenario
We are rendering static instances of our blog using Angular Universal or Scully and we wish to set the header meta description and title and tag content dynamically.
This also enhances SEO as search engines index title and description tags.
Approach
Imports
import { Meta, Title } from '@angular/platform-browser';
import { Component, OnInit } from '@angular/core';Initialization
Inject Title and Meta services:
constructor(
private title: Title,
private meta: Meta
) {}Implementation
ngOnInit() {
this.title.setTitle('Dynamic Hello Angular Lovers Title');
this.meta.updateTag({ name: 'description', content: 'Dynamic Hello Angular Lovers description!' });
}
}Review
Click on this Stackblitz Fullpage Demo below open the the developer console and find the title and meta tags. Note that the description and title have been set dynamically .
If we search for this page with Google we should see that Google uses the title as the header for the displayed search result.
