Tutorial

Getting & Setting HTML Meta Tags in Angular

Angular

While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.

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';


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.

Creative Commons License