Angular Meta Service for HTML Meta Tags

Angular Meta Service For HTML Meta Tags

HTML meta tags are used to provide metadata about the HTML web page such as page description, author name, important keywords or other metadata. Meta tags play an important role in search engine optimization.

Angular comes bundled with Meta service which allows us to deal with these HTML meta tags. In this post, we’re going to understand how we can leverage various methods available within this service to manage the meta tags more efficiently.

Usage

To use this service first you need to import it from @angular/platform-browser.

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

Once the service is imported you need to inject it inside your component via the constructor like any other service.

constructor(private meta: Meta) {

}

Adding Meta Tags

Meta service comes bundled with two methods which allow you to add meta tags to your web page i.e. addTag and addTags.

addTag method accepts only a single object at once and generates only one meta tag.

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

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.scss']
})
export class MainComponent {
  constructor(private meta: Meta) {
    this.meta.addTag({ name: 'author', content: 'Harshal Limaye' });
  }
}

If you wish to create multiple tags using addTag you need invoke it multiple times.

constructor(private meta: Meta) {
  this.meta.addTag({ name: 'author', content: 'Harshal Limaye' });
  this.meta.addTag({ name: 'description', content: 'Front-end developer' });
}

You could use addTags method to set multiple tags in a single call. This method accepts array of objects that describes the meta tags.

constructor(private meta: Meta) {
  this.meta.addTags([
    { name: 'author', content: 'Harshal Limaye' },
    { name: 'description', content: 'Front-end developer' }
  ]);
}

Note: You could pass a second parameter as a boolean value to both addTag or addTags methods to determine if tag needs to be added even if it already exists. The default value is false.

this.meta.addTag({name: 'author', content: 'Harshal Limaye'}, true);

Retrieving Meta Tags

You can use getTag and getTags methods to retrieve the values of existing meta tags. the getTag method returns a single element whereas the getTags method returns an array of the element.

constructor(private meta: Meta) {
  const author: HTMLMetaElement = this.meta.getTag('name=author');
  console.log(author.content); // Harshal Limaye
}

If no meta tag is found for specified selector method returns null.

Updating Meta Tags

updateTag method could be used to update the value of a HTML meta tag.

constructor(private meta: Meta) {
  this.meta.updateTag({name: 'keywords', content: 'Angular, React, Vue, D3'});
}

The above code will update the value of keywords meta tag to “Angular, React, Vue, D3”

Removing Meta Tags

removeTag method could be used to remove existing HTML meta tags.

constructor(private meta: Meta) {
  this.meta.removeTag('name=author');
}

The above code removes author meta tag from the web page.

removeTagElement method could also be used to remove a meta tag. Unlike removeTag which accepts attribute selector it accepts HTMLTagElement as a parameter.

constructor(private meta: Meta) {
  const author: HTMLMetaElement = this.meta.getTag('name=author');
  this.meta.removeTagElement(author);
}

Conclusion

The Angular Meta service allows us to add, retrieve, update and remove HTML meta tags from the web page. This could be very helpful to dynamically update meta tags based on the currently active route in your application.

Must Read: Using Custom Pipes in a Component Class in Angular

2 thoughts on “Angular Meta Service for HTML Meta Tags”

Leave a Reply

Your email address will not be published. Required fields are marked *