Setting Angular Component Title and Meta Tags Dynamically

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.

Demo

Related

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