We are rendering static instances of our blog using Angular Universal or Scully and we wish to set the header meta description, 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.

Open 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.

Demo