How To Set HTML Meta Tags In Angular

Introduction

Meta tags are simply a small amount of HTML code that is used to describe the content of your web page. Meta tags provide metadata about the HTML document and are typically used to provide information about webpage content, author, keywords, viewport settings, etc. Meta tags usually go inside the <head> section of your HTML document and are not visible on the webpage. These tags are primarily used by web browsers, search engines, and other web services to understand the content of the webpage e.g. The viewport tag is used by web browsers to gather information about the webpage's dimensions and scaling.

Angular comes bundled with Meta service which we could use to work with the meta tags. In this article, we'll understand how we could utilize this service to add, remove, and update meta tags in your Angular application.

Importing the meta service

Before using the meta service, we need to import it from the platform browser package.

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

Next, we'll inject it inside our component using via the constructor.

constructor(private meta: Meta) {}

Adding Meta Tags

To add new meta tags, the Angular Meta service provides two methods addTag and addTags.

this.meta.addTag({ name: 'description', content: 'This is an article about Angular Meta service' });

The addTag method accepts a meta definition object as a parameter that is used to describe the meta tag.

The above code will result in following HTML meta tag element.

<meta name="description" content="This is an article about Angular Meta service">

You could also use addTags to add multiple meta tags at the same time.

this.meta.addTags([
{ name: 'description', content: 'This is an article about Angular Meta service' },
{ name: 'keywords', content: 'angular, javascript, typescript, meta, seo' }
]);

The above code will result in the following HTML meta tag elements:

<meta name="description" content="This is an article about Angular Meta service">
<meta name="keywords" content="angular, javascript, typescript, meta, seo">

One thing to keep in mind is both addTag and addTags methods also accept a second parameter forceCreation, which forces the methods to create a new meta tag element without checking if it already exists.

Retrieving Meta Tags

To read the meta tags from the DOM we could use the getTag or getTags methods provided by the Meta service. The getTag and getTags method accept a string that represents an attribute selector and returns the matching element based on that string:

const keywords = this.meta.getTag('name=keywords');
console.log(keywords.content);
// Output: angular, javascript, typescript, meta, seo

The getTag method returns an HTMLMetaElement while getTags returns array of HTMLMetaElements.

One thing to keep in mind is getTag returns the first instance of matching meta tag described in the selector argument whereas the getTags method returns all the instances of meta tags that match the selector.

let tags = this.meta.getTags('name');

In the above code, getTags will return all the instances of meta tags that contains the name attribute and will save those instances in form of an array inside the tags variable.

Updating Meta tags

To update existing meta tags we could use the updateTag method that comes bundled with the Angular Meta service.

this.meta.addTag({ name: 'keywords', content: 'angular, javascript, typescript, meta, seo' });
setTimeout(() => {
this.meta.updateTag(
{ name: 'keywords', content: 'angular, javascript, typescript, meta' },
'name=keywords'
)
}, 4000)

In the above code snippet, we're first adding a new meta tag with name keywords. Next, we're updating the tag after 4 seconds using the updateTag method. One thing to keep in mind is if the tag with name keywords doesn't exist in the DOM, the updateTag method will create a new element.

Removing Meta Tags

The removeTag method accepts a selector string as an argument and removes the tag if the element matching the selector is found.

this.meta.removeTag('name=keywords');

The above code searches for meta tag with name as keywords, and if the match is found it'll simply remove that meta tag from the DOM.

The Meta service also provides a removeTagElement method that could be used to remove a meta tag. However, unlike the removeTag method, it accepts HTMLMetaElement and removes that element from the DOM.

const keywords = this.meta.getTag('name=keywords')
this.meta.removeTagElement(keywords);

The above code first selects the keywords meta tag element from the DOM and then passes it as an argument to the removeTagElement method which removes the element from the DOM.

And that's it!

For more information,

Meta Tags: https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag
Meta service: https://angular.io/api/platform-browser/Meta
Meta Definition: https://angular.io/api/platform-browser/MetaDefinition

I hope you found this article useful. In case you've any queries or feedback regarding the same feel free to drop a comment in the comment section.