Angular 11 Add Dynamic Meta Tags & Page Title

in this article, we will talk about how to build SEO-friendly single-page apps (SPA) by adding dynamic META TAGS and dynamic page Title with Angular 11 with example.

Let’s now learn how to add dynamic meta tags and change page title  to Angular 11 Application. We will use @angular/platform-browser to get or set the Title and Meta tags in our Angular application.

Adding Angular Universal(SSR) in an existing application is as simple as these 2 steps:

  1. Add Angular Universal package ng add @nguniversal/express-engine
  2. Build application npm run build:ssr && npm run serve:ssr

How to add dynamic meta tags (SEO) in Angular Universal

Open the app.component.ts file and import “Title” and “Meta” services from “@angular/platform-browser”  and inject both services in the component constructor as follows.

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

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
export class AppComponent implements OnInit {
    private _http: HttpClient,
    private _titleService: Title,
    private _metaService: Meta) {

Next, we can mock any API JSON response data inside an assets folder. Create an empty JSON file called app-component.json with the following code.

        "name": "keywords",
        "content": "Angular 11, Universal, Dynamic Tags Example"
        "name": "description",
        "content": "Angular 11 Universal Example"

Next,  get meta tags data from the server( in this demo we are fetching data from the assets folder)

ngOnInit() {
  // get component meta data
  getMetaTagsData() {
    this._http.get<MetaDefinition[]>("/assets/metatags/app-component.json").subscribe(res => {
  // set meta data
  setMetaTags(tags: MetaDefinition[]) {

Next, build and serve the Angular application using the following commands.

npm run build:ssr 
npm run serve:ssr 

Next, run the server command, the following output will be displayed.

dynamic meta tags

How to add dynamic page title in Angular Universal

To change the title dynamically, we will use the Title service.

Next, we can mock any API JSON response data inside an assets folder app-component-title-admin.json file with the following code.

    "title": "Admin Dashboard"

Let’s see the simple example of the setTitle method of the Title service.

ngOnInit() {    
  // get component title
  getPageTitleData() {
    this._http.get<ITitle>("http://localhost:4000/assets/titles/app-component-title-admin.json").subscribe(res => {
  // set page title
  setPageTile(title: string) {

Next, run the  server command, the following output will be displayed.

dynamic page title

Source code available for download

The source code is available on GitHub for the Angular material 13 image upload.


  • Post category:Angular
  • Reading time:4 mins read