Setting Angular Component Title and Meta Tags Dynamically

Updated Version

There is an updated version of this article here:


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.



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


Inject Title and Meta services:

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


ngOnInit() {
this.title.setTitle('Dynamic Hello Angular Lovers Title');
this.meta.updateTag({ name: 'description', content: 'Dynamic Hello Angular Lovers description!' });


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.



Brought To You By



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ole Ersoy

Ole Ersoy

Founder of Firefly Semantics Corporation