How to set HTML meta tags in angular , Angular universal

In this article we are going to talk about how you can add seo tools in angular application. Angular provides server side rendering where you can make an angular application fully seo friendly.

ng add @nguniversal/express-engine

I have a complete article on angular universal setup here. please have a look before proceeding as it is necessary to enable angular universal in your app in order to make your angular application seo friendly. 

Angular SEO Meta Services

To use angular meta services we need to import meta and title from @angular/platform-browser angular library where we can file functions to implement seo meta services. lets create a new component called universal in my case by using this command

ng g c universal

And import Meta and title from this library.

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

Now lets import Meta and Title from plateform-browser and add them in the constructor to use the services. now see how we can add the title and meta description for this individual page.

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

@Component({
  selector: 'app-universal',
  templateUrl: './universal.component.html',
  styleUrls: ['./universal.component.css']
})
export class UniversalComponent implements OnInit {
  pageTitle =  'This is Universal Page';
  constructor( private title: Title,
    private meta: Meta) { }

  ngOnInit(): void {
    this.title.setTitle(this.pageTitle);
    this.meta.updateTag(
      { name: 'description', content: 'This is universal desciption here!' }
    );
  }
}

Now lets create a build to see if the desired changes are relected on browser? For that we need to create angular universal bundle using the following command:

npm run build:ssr

After you see the universal bundle generated successfully now we need to serve it on browser by using this command:

npm run serve:ssr

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

@Component({
  selector: 'app-universal',
  templateUrl: './universal.component.html',
  styleUrls: ['./universal.component.css']
})
export class UniversalComponent implements OnInit {
  pageTitle =  'This is Universal Page';
  constructor( private title: Title,
    private meta: Meta) { }

  ngOnInit(): void {
    this.title.setTitle(this.pageTitle);
    this.meta.addTags([
      { name: 'keywords', content: 'Angular Universal, SSR,HTML Tags, Meta tags, Angular Universal' },
      { name: 'robots', content: 'index, follow' },
      { name: 'description', content: 'This is universal desciption here!' },
      { name: 'author', content: 'Akash Chauhan' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { name: 'date', content: '2021-05-06', scheme: 'YYYY-MM-DD' },
      { charset: 'UTF-8' }
    ]);
  }
}

And here is the result we get in view source of the page:

Functions in Meta Service 

Now lets have a look on functions that meta service provides, we have all functions we need to complete our requirement while building angular seo friendly application with universal.