Add Dynamic Meta Tags & Page Title In Angular

Meta tags and page titles play an important role in SEO optimization and website indexing. They provide a summary of the webpage content to the search engines, which helps them understand the relevance of the webpage to the search queries.

In Angular, we can dynamically add meta tags and page titles to our web pages. This means that the page title and meta tags can change based on the content of the page, which helps improve the SEO of the webpage. In this blog post, we will discuss how to add dynamic meta tags and page titles in Angular.

Page Titles:

Adding a dynamic page title to an Angular application is straightforward. We can use the Title service from @angular/platform-browser to set the page title dynamically.

To set the page title dynamically, first, we need to import the Title service from the @angular/platform-browser package in the component where we want to change the title. For example, in the app.component.ts file, we can add the following import statement:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private titleService: Title) {}

  setTitle(newTitle: string) {
    this.titleService.setTitle(newTitle);
  }
}

In the above code, we have created a function called setTitle that takes a string parameter called newTitle. This function sets the page title to the value of newTitle using the setTitle method of the Title service.

Next, we can call the setTitle function with the new page title whenever we want to update the page title. For example, in the ngOnInit method of a component, we can call the setTitle function with the new page title as follows:

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {

  constructor(private titleService: Title) { }

  ngOnInit(): void {
    this.titleService.setTitle('My Page Title');
  }
}

In the above code, we have called the setTitle function with the value of 'My Page Title' in the ngOnInit method of the MyComponent component.

Meta Tags:

 constructor(private metaService: Meta) {}

 this.metaService.addTags([
      { name: 'keywords', content: this.campaign.name + ' | Give Brite' },
      { name: 'robots', content: 'index, follow' },
      { property: 'og:title', content: this.campaign.name + ' | ' + this.campaign?.charity?.name },
      { property: 'og:site_name', content: 'Give Brite' },
      {
        property: 'og:description',
        content: `Help ${this.campaign.user.first_name} raise Amount for ${this.campaign.name}`,
      },
      { property: 'og:type', content: 'website' },
      {
        property: 'og:image',
        content: responsive(this.campaign.cover[0]?.thumbnail, 1200, 630, 'crop'),
      },
      {
        name: 'twitter:card',
        content: 'summary_large_image',
      },
      {
        name: 'twitter:title',
        content: this.campaign.name + ' | ' + this.campaign?.charity?.name,
      },
      {
        name: 'twitter:description',
        content: `Help ${this.campaign.user.first_name} raise Amount for ${this.campaign.name}`,
      },
      { charset: 'UTF-8' },
    ]);

Conclusion

Incorporating dynamic meta tags and page titles into your Angular application is crucial for enhancing SEO and ensuring your web pages are properly indexed by search engines. By leveraging Angular’s Title and Meta services, you can dynamically set page titles and meta tags based on the content of each page. This not only improves the relevance of your pages in search engine results but also enhances the user experience by providing contextually appropriate titles and metadata. Implementing these strategies helps your Angular application achieve better visibility and reach a wider audience through improved search engine optimization.