Learn how to add/update HTML Meta tags using the Meta Service in Angular. The Angular Meta Service makes it easier to set different meta tags to different pages. It provides methods such as addTag(), addTags(), getTag(), getTags(), updateTag(), removeTag(), removeTagElement() etc. We can use them to manipulate meta tags. Let us find out how to use Meta service using an example.
Table of Contents
Meta tags describe details about your page content to search engines. Hence setting the right Meta tags is very important for SEO. These tags appear only in the <head> section of the HTML and not visible to the user. But search engines / social media sites use them to find more about your page. Meta tags in a typical <head> section might look like this
1 2 3 4 5 6 7 8 9 10 | <head> <title>Setting HTML Meta Tags Angular Meta service Example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name=”description” content=”Angular Meta service Example” /> <meta name=”robots” content=”Index,follow” /> <meta property="og:title" content="Content Title for social media"> <meta charset="UTF-8"> </head> |
Meta service
The Meta service in Angular provides the following methods to manipulate the HTML Meta tags.
How to Use Meta Service
Importing Meta Service
To use meta service, we first need to import it in the Root module. The Meta service is part of the @angular/platform-browser library as it is applicable only apps running on the browser.
1 2 3 | import { BrowserModule, Meta } from '@angular/platform-browser'; |
Next, we need to register it in the Angular Providers metadata as shown below
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule ], providers: [Meta], bootstrap: [AppComponent] }) export class AppModule { } |
To make use of the service in components, all you need to do is to inject it using Dependency Injection.
Then call any of the methods of the Meta Service to manipulate the Tags. You can either use ngOnInit or constructor.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | import { Component, OnInit } from '@angular/core'; import { Meta, MetaDefinition } from '@angular/platform-browser'; @Component({ template: `<h1>Home Component</h1>` }) export class HomeComponent implements OnInit { title = 'Home Component Title'; constructor(private metaService:Meta){ } ngOnInit() { this.metaService.addTag( { name:'description',content:"Article Description"}); } } |
Meta Definition Class
Meta definition class represents a meta element.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | type MetaDefinition = { charset?: string; content?: string; httpEquiv?: string; id?: string; itemprop?: string; name?: string; property?: string; scheme?: string; url?: string; } & { [prop: string]: string; }; |
We create objects of type MetaDefinition and add them using the Meta Service. For Example
1 2 3 | {name: 'description', content: 'Title and Meta tags examples'} |
and it results in the following HTML
1 2 3 | <meta name=”description” content=”Setting HTML Meta Tags Angular Meta service Example” /> |
Similarly,
1 2 3 4 5 6 7 8 9 10 | {charset: 'UTF-8'} => <meta charset="UTF-8"> {meta name="robots" content="Index,follow"} ====> <meta name=”robots” content=”Index,follow” /> {meta name="viewport" content="width=device-width, initial-scale=1"} ====> <meta name="viewport" content="width=device-width, initial-scale=1"> |
To add a new tag or Tags, we make use of methods addTag() or addTags().
addTag() allows us to add a single tag
Syntax
1 2 3 | addTag(tag: MetaDefinition, forceCreation: boolean = false): HTMLMetaElement | null |
Example
1 2 3 4 5 6 7 8 9 10 11 | constructor(private metaService: Meta) { this.addTag(); } addTag() { this.metaService.addTag({ name: 'description', content: 'Article Description' }); this.metaService.addTag({ name: 'robots', content: 'index,follow' }); this.metaService.addTag({ property: 'og:title', content: 'Content Title for social media' }); } |
This results in the following HTML.
1 2 3 4 5 | <meta name="description" content="Article Description"> <meta name="robots" content="index,follow"> <meta property="og:title" content="Content Title for social media"> |
while addTags() allows us to add more than one tag
Syntax
1 2 3 | addTags(tags: MetaDefinition[], forceCreation: boolean = false): HTMLMetaElement[] |
1 2 3 4 5 6 7 8 9 10 11 12 13 | constructor(private metaService: Meta) { this.addTags(); } addTags() { this.metaService.addTags([ { name: 'description', content: 'Article Description' }, { name: 'robots', content: 'index,follow' }, { property: 'og:title', content: 'Content Title for social media' } ]); } |
The angular does check if the meta tag already exists. If already exists, then it won’t allow you to add the meta tag. You can force it to add the tag by making the forceCreation=true
Although the angular checks for the duplicate meta tag, You should not rely on it.
The Meta tags are equal only if values of all the attributes are equal
The following code results in only one HTML meta tag in the rendered HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | constructor(private metaService: Meta) { this.duplicateTags(); } duplicateTags() { this.metaService.addTag( { name: 'description', content: 'Article Description' }) this.metaService.addTag( { name: 'description', content: 'Article Description' }) } //output <meta name="description" content="Article Description"> |
While the following code results in both meta tags in the rendered HTML.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | constructor(private metaService: Meta) { this.duplicateTags(); } duplicateTags1() { this.metaService.addTag( { name: 'description', content: 'Article Description' }) this.metaService.addTag( { name: 'description', content: 'A different Article Description' }) } //output <meta name="description" content="Article Description"> <meta name="description" content="A different Article Description"> |
Only the first instance is checked
While checking for duplicates, angular checks only the first instance of the meta tag. It uses either name or property to look for the first instance of the meta tag and check for duplication.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | duplicateTags2() { this.metaService.addTag( { name: 'description', content: 'Article Description' }) this.metaService.addTag( { name: 'description', content: 'A different Article Description' }) this.metaService.addTag( { name: 'description', content: 'Description of the Article' }) //Not Inserted this.metaService.addTag( { name: 'description', content: 'A different Article Description' }) //Inserted } ****output <meta name="description" content="Article Description"> //Appears only once <meta name="description" content="A different Article Description"> <meta name="description" content="A different Article Description"> //Not checked for duplication |
will result in the following HTML. Note that Angular does not duplicate the Description of the component, but generates the duplication of A different Description of the component
You can read the meta tags using the getTag() & getTags() method. getTag() reads the first instance, while getTags() reads all instances of the meta tag.
Syntax
1 2 3 4 | getTag(attrSelector: string): HTMLMetaElement | null getTags(attrSelector: string): HTMLMetaElement[] |
Examples
Add the following Meta Tags.
1 2 3 4 5 6 7 8 | getTag() { this.metaService.addTag({ name: 'description', content: 'Article Description' }); this.metaService.addTag({ name: 'robots', content: 'index,follow' }); this.metaService.addTag({ property: 'og:title', content: 'Content Title for social media' }); this.metaService.addTag({ name: 'description', content: 'Another Article Description' }); } |
The getTag() method returns the first instance of the matching meta tag. You need to pass the name of the attribute and value in the format attributeName='value'. You can search for only one attribute. Searching for Multiple attributes are not supported.
1 2 3 4 5 6 | this.metaService.getTag("name='description'") ***output in console window <meta name="description" content="Article Description"> |
Use it to compare any of the attributes. The following example uses the content attribute to read the data.
1 2 3 4 5 6 | console.log(this.metaService.getTag("content='Article Description'")); ***output in console window <meta name="description" content="Article Description"> |
The getTags() method returns all instances of the meta in an array
1 2 3 4 5 6 7 8 | console.log(this.metaService.getTags("name='description'")); ***output <meta name="description" content="Article Description"> <meta name="description" content="Another Article Description"> |
The following will return all the meta tags with the name attribute
1 2 3 4 5 6 7 8 9 | console.log(this.metaService.getTags("name")); ***output. Returns an array of the following meta tags <meta name="viewport" content="Article Description"> <meta name="description" content="width=device-width, initial-scale=1"> <meta name="robots" content="index,follow"> <meta name="description" content="Another Article Description"> |
You can also check out the following.
1 2 3 4 | console.log(this.metaService.getTags("property")); console.log(this.metaService.getTags("content")); |
Update the Tag
updateTag() method updates the existing meta tags with the new one (first argument) based on search criteria. Specify the search criteria as the second argument in the form attributeName='value' similar to getTag method
Syntax
1 2 3 | updateTag(tag: MetaDefinition, selector?: string): HTMLMetaElement | null |
1 2 3 4 5 6 7 8 9 10 11 12 13 | //Add the Tag this.metaService.addTag({ name: 'robots', content: 'index,follow' }); //output <meta name="robots" content="index, follow"> //Now update the Tag this.metaService.updateTag( { name:'robots', content:'index, nofoloow'},"name='robots'"); //Output <meta name="robots" content="index, nofoloow"> |
updateTag inserts the tag if matching meta element is not found
1 2 3 4 5 6 | this.metaService.updateTag( { name:'description', content:'Article Description'},"name='description'"); //Will insert the Meta if it is not found <meta name="description" content="Article Description"> |
updateTag replaces only the first instance of the search criteria.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | this.metaService.addTag({ property: 'og:title', content: 'Social Media descripton'}); this.metaService.addTag({ property: 'og:title', content: 'Duplicate Social Media descripton'}); //output <meta property="og:title" content="Social Media descripton"> <meta property="og:title" content="Duplicate Social Media descripton"> //Now run this this.metaService.updateTag( { property:'og:title', content:Social Media 'Description of the component'},"property='og:title'"); //output <meta property="og:title" content="Description of the componen"> //Updated <meta property="og:title" content="Duplicate Social Media descripton"> //Not touched |
Removing the Tag
Use removeTag() or removeTagElement() element to remove the meta tag.
Syntax
1 2 3 4 | removeTag(attrSelector: string): void removeTagElement(meta: HTMLMetaElement): void |
The following example adds the robots metatag and then uses the removeTag to remove it. removeTag removes the first instance of the matching meta tag. You need to pass the name of the attribute and value in the format attributeName='value'. You can search using only one attribute.
Example
1 2 3 4 5 6 7 8 9 10 | //Adding the Meta Tag this.metaService.addTag({ name: 'robots', content: 'index,follow' }); //Output <meta name="robots" content="index,follow"> //Remove it this.metaService.removeTag("name='robots'"); |
Removes the first matching tag.
1 2 3 4 5 6 7 8 | //Adds tow meta tags this.metaService.addTag({ property: 'og:title', content: 'Social Media descripton'}); this.metaService.addTag({ property: 'og:title', content: 'Duplicate Social Media descripton'}); //This will remove the first one this.metaService.removeTag("property='og:title'"); |
You can use any attribute of the meta. The following example uses the content attribute to remove it.
1 2 3 4 5 6 7 8 9 10 | //Adds the meta tag this.metaService.addTag({ property: 'og:title', content: 'Duplicate Social Media descripton'}); //Output <meta property="og:title" content="Duplicate Social Media descripton"> //This will remove it this.metaService.removeTag("content='Duplicate Social Media descripton'"); |
You can also use removeTagElement() to remove the meta. You need to pass the HTMLMetaElement , which you want to remove. For example,
1 2 3 4 5 6 7 8 | //Ads two meta property this.metaService.addTag({ property: 'og:title', content: 'Social Media descripton'}); this.metaService.addTag({ property: 'og:title', content: 'Duplicate Social Media descripton'}); //Removes the first instance of the 'og:title' this.metaService.removeTagElement(this.metaService.getTag('property')); |
References
Meta
MetaDefinition
Platform-browser
Facebook sharing Meta Tags
Twitter Meta Tags
Guide to Meta Tags
It’s helpful but while Server Side rendering all tags are added after Style links or cdn.
This was really helpful! Some of the syntaxes are really confusing, and this article nicely points out all the possible examples. Thank you 🙂
very useful.