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.

Angular does not directly provide seo tools in it for that we need to use server side rendering for it and to implement server side rendering we need angular universal. In this section we are going to implement Seo in angular and we are going to be dealing with meta tags in angular like title , description etc which are very useful tools for Google search Seo.

Angular provides various seo tools but before implementing them , First make sure you have angular universal installed in your angular application. 

Because you first need to use server side rendering in order to use meta services from angular. As we all know Platforms like Angular supports Client side rendering and it is not seo friendly by default, so to make angular seo friendly we must change it to universal.

please run a command in command line and everything will be setup for you to go with angular universal. Here is the command:

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

As you can the title and description in the View source of the page of your application.

Similarly you can add keywords, robots, author, viewport, date tags etc here with the help of Meta service in angular.

There are many other functions Meta provides in angular like updating a tag content where you have to add the tag name and content you want to update in it. 

Meta tags are allowed google to look through your application and read the content of tags so that you application can be found in google search when a user search something related to your post.

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.

• addTag(): It used to add one meta tag.
• addTags(): You can add multiple meta tags at once in angular component.
• getTag(): Gets HTMLMetaElement for the specified meta selector in angular.
• getTags(): Returns array of HTMLMetaElement for the specified meta selector in angular.
• updateTag(): It is used to update the existing meta tag by name.
• removeTag(): Used to remove meta tag for the specified selector.
• removeTagElement(): Removes meta tag for the specified HTMLMetaElement in angular

Summary

In this section we implemented HTML Meta tags in angular using Title and Meta service from platform-browser library angular. If you are not using Server Side Rendering in you application then you will not be able to see your application Seo friendly as it does not update the content in DOM. So to make your angular application fully seo friendly you first need to convert you application into Server Side Rendering using angular universal.