Angular 14 SEO: Add SEO Page Title, Meta Tags and Canonical URL

Angular SEO tutorial, a bit by bit comprehensive guide about adding SEO page title and Meta tags in angular to make the angular application SEO friendly.

SEO process strengthens the crawl accessibility, which directly elevates your web application’s chances to appear in Google search results. This is the essential technique that makes the consensus between your website and the users.

A better SEO brings tons of free web traffic to your site and gives you more leads.

Throughout this tutorial, you will find out the simple methods to add SEO meta tags in angular, add or set SEO page title in angular.

Not just that, we will start from the beginning, which consists of installing angular CLI, creating a new angular project.

Meta is a class offered by angular, and it helps in handling the HTML meta tags. Here are the meta service lists that help you add similarly update Meta tags in angular on the fly.

  • addTag(): Add particular meta tag within HTML document.
  • addTags(): Add multiple meta tag in HTML document.
  • updateTag(): Transform the current meta tag element within the HTML document.
  • removeTag(): Removes an existing meta tag from the existing HTML document.
  • getTag(): Fetch meta tag from the current markup document.
  • getTags(): Get multi meta tag from the HTML document.
  • removeTagElement(): Pull out meta tag from the HTML document.

Angular 13 Dynamic SEO Page Title and Meta Tags Example

  • Step 1: Install Angular App
  • Step 2: Register Meta Service
  • Step 3: Adding Tags in Angular
  • Step 4: Remove Duplicate Meta Tags
  • Step 5: Add SEO Title in Angular
  • Step 6: Set Canonical URL in Angular
  • Step 7: Update Tags
  • Step 8: Remove Tag

Install Angular App

First, ensure to install angular CLI to get along with angular, use the recommended command to commence the installation:

npm install -g @angular/cli

Thereafter, begin the angular project installation:

ng new ng-demo

Move into the project folder:

cd ng-demo

Disable Strict Angular TypeStrict Errors

The latest version of Angular comes with strict mode, you have to manually disable the strict mode you can set “strict”: false, "noImplicitReturns": false and "strictTemplates": false inside the compilerOptions and angularCompilerOptions in tsconfig.json file.

Register Meta Service

For making SEO friendly angular app, you first need to import meta-services from the @angular/platform-browser package. Not only but also, inject Meta module in providers array.

However, BrowserModule comes predefined with the new angular application, hence keep it intact.

Thereupon, open the app.module.ts file, update the suggested code recklessly.

import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [Meta],
  bootstrap: [AppComponent]
})

export class AppModule { }

Meta Service with addTag() and addTags()

Setting up Meta service in angular is easier than you think; head over to angular typescript template. Import Meta class from ‘@angular/platform-browser’ package, inject Meta in constructor method, it will be available throughout the component.

Afterward, set the addTag() method, pass description to the name property, also define the description in the content property as suggested.

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

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

export class AppComponent implements OnInit {
  
  constructor( private meta:Meta ){ }

  ngOnInit() {
    this.meta.addTag( { name: "description", content:"Add page description" } );
  }

}

Adding SEO Meta with Add Tags

Likewise, you can add multiple meta properties for making your angular app SEO friendly. For instance, you can define the keywords, robots, author, viewport, date, plus the charset properties.

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

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

export class AppComponent implements OnInit {
  
  constructor( private meta:Meta ){ }

  ngOnInit() {
    this.meta.addTags([
      { charset: 'UTF-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { name: 'date', content: '2020-02-10', scheme: 'YYYY-MM-DD' },
      { name: 'keywords', content: 'Add SEO Meta in Angular.' },
      { name: 'author', content: 'D 5' },
      { name: 'robots', content: 'index, follow' }
    ]);    
  }

}

Remove Duplicate Meta Tags

Angular meta service solves the duplicate meta tag issue pretty comfortably, it intercepts meta tag, and if it found it again, it doesn’t let you add it also. However, in my opinion, you should trust least on angular’s duplicate meta tag mechanism.

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

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

export class AppComponent implements OnInit {
  
  constructor( private meta:Meta ){ }

  ngOnInit() {
    this.meta.addTag( { name: "description", content:"Meta description goes here." } );
    this.meta.addTag( { name: "description", content:"Meta description goes here." } );
  }

}

Add SEO Title in Angular HTML Template

Import Title from ‘@angular/platform-browser’ inject into the constructor, access the setTitle() method, pass the SEO title for an angular HTML document. We add the SEO title statically; nonetheless, you can make it dynamically.

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

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

export class AppComponent implements OnInit {

  title = 'Angular SEO Title Example';
  
  constructor( private titleMeta: Title ){ }

  ngOnInit() {
    this.titleMeta.setTitle(this.title);

  }

}

Set Canonical URL in Angular

Canonical URL is a gateway to relive from the duplicate URL problems, and it helps in search engine optimization by stipulating the “canonical” or “preferred” version of a web page.

You are about to learn how to create a canonical service for adding canonical URL in an angular application.

Create service for handling canonical URL:

ng generate service canonical

Open and add the code in the recently generated 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) { }

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

}

Furthermore, you have to import CanonicalService, insert it into the constructor, and set the canonical link with added service in the app.component.ts file.

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


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

export class AppComponent implements OnInit {

  constructor(
    private canonical: CanonicalService
  ) { }

  ngOnInit() {
    this.canonical.createCanonicalLink();
  }

}

You can now check out the canonical link inside the head section of your angular app.

Update Tags

If you want to know how to update the current meta tag by replacing it with the latest meta tag in similarities with matched meta tag, check out the updateTag() method example.

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

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

export class AppComponent implements OnInit {
  
  constructor( private meta: Meta ){ }

  ngOnInit() {
    // add new tag
    this.meta.addTag({ name: "description", content:"Meta description goes here." });

    // update meta tag
    this.meta.updateTag( { name: "description", content:"No meta found." }, "name='description'");
  }

}

In the above example, we added the meta description first and updated it using the updateTag(). Hence the updated meta description is visible within the head section of the HTML document.

Remove Tag

You added the new meta with the addTag method that holds the name description, so we used the removeTag() and passed the name of the addTag() meta in it. Consequently, you can see there are no meta description in the head area.

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

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

export class AppComponent implements OnInit {
  
  constructor( private meta: Meta ){ }

  ngOnInit() {
    // add new tag
    this.meta.addTag({ name: "description", content:"Meta description goes here." });

    // delete meta tag
    this.meta.removeTag("name='description'");
  }

}

Conclusion

Angular SEO tutorial is finished; this tutorial explained in detail about adding page title, meta tags with meta service and adding canonical URL.

Also, this unique guide shared with you reading, updating, and removing the tags with meta service.