In this step by step Angular 8/9/10 SEO tutorial, we are going to learn how to make Angular app SEO friendly by adding the page titles, meta descriptions, keywords, and other SEO attributes in an Angular Universal Server-side rendering app.

In the previous tutorial, we saw how to create an Angular Universal app from scratch with MongoDB. In this tutorial, we will take the Git clone from this Github repository and configure it to insert the SEO HTML meta tags.

Angular 8/9/10 SEO Meta Service Methods

Angular offers the Title and Meta services, and these tags are similar HTML meta tags that help in achieving the purpose of making the Angular app SEO friendly.

Meta is a service in Angular, and it belongs to a class family. Angular offers various Meta services to add, read, update, and remove HTML meta elements.

Let us check out the various Meta service methods:

addTag(): Includes one meta tag.
updateTag(): Updates meta tag in angular component.
removeTag(): Removes meta tag for the specified selector.
getTag(): Gets HTMLMetaElement for the specified meta selector.
addTags(): Includes more than one meta tag in angular component.
getTags(): Returns array of HTMLMetaElement for the specified meta selector.
removeTagElement(): Removes meta tag for the specified HTMLMetaElement

In this Angular 8|9 SEO tutorial, we will learn to add, update, HTML meta tag examples for keywords, description, robots, date, author, viewport, charset using Angular Meta service.

Configure Angular Universal Project

We are going to make Angular app SEO compatible, to enable the SEO in Angular, we are going to use Angular universal app. It’s a music app built with MongoDB server-side rendering. Let us take the Git clone from the following Github repo:

git clone https://github.com/SinghDigamber/angular-universal-crud.git

Next, get inside the project folder:

cd angular-universal-crud

Run following command to install the required packages:

npm install

Set up Angular Meta Service

Go to app/app.component.ts file and import Angular Meta service. The Meta service allow us to add keywords, robots, author, viewport, date and charset in Angular

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

Now, also add the following code in the same file. Here, we inject the private metaTagService: Meta in the constructor and then used the Meta’s addTags() method to configure the following HTML meta attributes.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {

  constructor(
    private metaTagService: Meta
  ) { }

  ngOnInit() {
    this.metaTagService.addTags([
      { name: 'keywords', content: 'Angular SEO Integration, Music CRUD, Angular Universal' },
      { name: 'robots', content: 'index, follow' },
      { name: 'author', content: 'Digamber Singh' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { name: 'date', content: '2019-10-31', scheme: 'YYYY-MM-DD' },
      { charset: 'UTF-8' }
    ]);
  }
}

Adding SEO Title and Meta Description in Angular Component

Now, we will set Title and Meta Description in Angular Universal app. First import Title, Meta from @angular/platform-browser. Go to app/components/add-song/add-song.component.ts file and add the following code in it.

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

@Component({
  selector: 'app-add-song',
  templateUrl: './add-song.component.html',
  styleUrls: ['./add-song.component.css']
})

export class AddSongComponent implements OnInit {
  title = 'Add Song - Angular Universal CRUD App';

  constructor(
    private titleService: Title,
    private metaTagService: Meta
  ) { }

  ngOnInit() {
    this.titleService.setTitle(this.title);
    this.metaTagService.updateTag(
      { name: 'description', content: 'Add song template' }
    );
  }
}

Here we defined the SEO title with the appropriate value. Then we declared the SEO title with the help of the setTitle() method inside the ngOnInit lifecycle hook.

We also declared the Meta description in Angular with the help of Meta’s updateTag() method.

Adding Canonical URL in Angular 8|9

SEO is the essential element of any site, and Canonical URLs allow search engines about duplicate content. When the site gets bigger, it becomes tedious to prevent web pages from generating duplicate URLs. This problem might lead to a duplicate content issue. A canonical URL provides a professional solution to get rid from duplicate content issues.

To know more about canonical URL checkout this awesome post: What is a canonical URL?

In Angular, we can set canonical URLs easily and save our site getting penalised.

Run command to create canonical service:

ng g s shared/canonical

Add the following code inside the shared/canonical.service.ts file.

import { Injectable, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Injectable({
  providedIn: 'root'
})

export class CanonicalService {

  constructor(@Inject(DOCUMENT) private dom) { }

  setCanonicalURL(url?: string) {
    const canURL = url == undefined ? this.dom.URL : url;
    const link: HTMLLinkElement = this.dom.createElement('link');
    link.setAttribute('rel', 'canonical');
    this.dom.head.appendChild(link);
    link.setAttribute('href', canURL);
  }

}

Next, go to app.component.ts file and add the following code.

import { Component, OnInit } from '@angular/core';
import { CanonicalService } from './shared/canonical.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {

  constructor(
    private canonicalService: CanonicalService
  ) { }

  ngOnInit() {
    this.canonicalService.setCanonicalURL();
  }

}

set meta tags in angular 8