Getting & Setting HTML Meta Tags in Angular

Angular’s Meta service makes it easy to get or set different meta tags depending on the current active route in your app. Let’s go over its use and the available methods.

The Angular Meta service is available for Angular 4 and greater.

addTag & addTags

Using the Meta service is as easy as importing it from @angular/platform-browser and injecting it in a component or service of yours.

Here’s an example where we add meta tags for a Twitter card when the home component is loaded:

home.component.ts

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {
  constructor(private meta: Meta) {
    this.meta.addTag({ name: 'twitter:card', content: 'summary_large_image' });
    this.meta.addTag({ name: 'twitter:site', content: '@alligatorio' });
    this.meta.addTag({ name: 'twitter:title', content: 'Front-end Web Development, Chewed Up' });
    this.meta.addTag({ name: 'twitter:description', content: 'Learn frontend web development...' });
    this.meta.addTag({ name: 'twitter:image', content: 'https://alligator.io/images/front-end-cover.png' });
  }
}

With multiple meta tags like the example above, you can use the addTags method instead to set them all in the same call:

this.meta.addTags([
  { name: 'twitter:card', content: 'summary_large_image' },
  { name: 'twitter:site', content: '@alligatorio' },
  // ...
]);

Note that both addTag and addTags can take a second boolean argument to indicate if the tag should be created even if it already exists. Here for example the tag will be added twice:

constructor(private meta: Meta) {
    this.meta.addTags([
      { name: 'twitter:site', content: '@alligatorio' },
      { name: 'twitter:site', content: '@alligatorio' }
    ], true);
  }
}

getTag & getTags

Analogous to the addTag and addTags methods, there are also the getTag and getTags methods. Here’s an example of how getTag can be used:

constructor(private meta: Meta) {
  const viewport = this.meta.getTag('name=viewport');
  console.log(viewport.content); // width=device-width, initial-scale=1
}

getTag takes an attribute selector string and returns an HTMLMetaElement. getTags also takes an attribute selector, but returns an array with potentially multiple HTMLMetaElements that match the selector.

updateTag

Given a new meta tag definition and a selector, the updateTag method will update any tag that matches the selector. In the following somewhat contrived example, we first set a meta tag with a content of summary_large_image and then update it to just summary:

constructor(private meta: Meta) {
  this.meta.addTag(
    { name: 'twitter:card', content: 'summary_large_image' }
  );

  this.meta.updateTag(
    { name: 'twitter:card', content: 'summary' },
    `name='twitter:card'`
  );
}

In a real app you’ll probably instead want to update meta tags that are present globally in the app, but that should take different values depending on the active route.

removeTag & removeTagElement

The removeTag method takes a string for an attribute selector and removes the tag. Not that you’d ever want to do this, but here’s how you could remove the charset meta tag:

constructor(private meta: Meta) {
  this.meta.removeTag('charset');
}

The removeTagElement is similar, but instead takes an HTMLTagElement directly instead of a string selector. Here’s the same example, but here we first get the charset meta tag element:

constructor(private meta: Meta) {
  const chartsetTag = this.meta.getTag('charset');
  this.meta.removeTagElement(chartsetTag);
}

👾 And that's it! Now you know how to add, remove or update meta tags dynamically. If you want to dig deeper, have a look at our guide on updating the page title declaratively using ngrx.

  Tweet It
✖ Clear

🕵 Search Results

🔎 Searching...