Angular 12 SEO – Set Dynamic Page Title and Meta Tags in Universal App

Angular 12 SEO – Set Dynamic Page Title and Meta Tags in Universal App

Angular 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.

Home  »  Angular   »   Angular 12 SEO – Set Dynamic Page Title and Meta Tags in Universal App

Angular 12 SEO – Set Dynamic Page Title and Meta Tags in Universal App

Last updated on: August 7, 2021 by Editorial TeamLubuntu 20.04: First LTS Release With LXQt (Instead of LXDE)In this step by step Angular 12 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.https://tpc.googlesyndication.com/safeframe/1-0-38/html/container.html

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.

Table of Contents

1. Angular SEO Meta Service Methods
2. Configure Angular Universal Project
3. Set up Angular Meta Service
4. Adding SEO Title and Meta Description in Angular Component
5. Adding Canonical URL in Angular 8|9
6. Summary

Angular 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.https://tpc.googlesyndication.com/safeframe/1-0-38/html/container.html

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 app/app.component.ts file and import Angular Meta service

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

On App Component

@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: 'Cloudstar Mohan,Mohan shanmugam' },
      { name: 'robots', content: 'index, follow' },
      { name: 'author', content: 'Cloudstar MOhan' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { name: 'date', content: '2021-01-01', scheme: 'YYYY-MM-DD' },
      { charset: 'UTF-8' }
    ]);
  }
}

Adding SEO Title and Meta Description in Angular Component

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

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

export class CloudstarComponent implements OnInit {
  title = 'Cloudstarmohan - Angular Title';

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

  ngOnInit() {
    this.titleService.setTitle(this.title);
    this.metaTagService.updateTag(
      { name: 'description', content: 'Cloudstar Mohan Angular' }
    );
  }
}

Advertisement