Meta service in Angular. Add/Update Meta Tags Example

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.

Applies to: Angular 2 to the latest edition of i.e. Angular 8. Angular 9, Angular 10

Why Set Meta Tags

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

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.

Next, we need to register it in the Angular Providers metadata as shown below

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.

Meta Definition Class

Meta definition class represents a meta element.

We create objects of type MetaDefinition and add them using the Meta Service. For Example

and it results in the following HTML

Similarly,


Best Angular Books
The Top 8 Best Angular Books, which helps you to get started with Angular  

Adding Tags with addTag() & addTags()

To add a new tag or Tags, we make use of methods addTag() or addTags().

addTag() allows us to add a single tag

Syntax

Example

This results in the following HTML.

while addTags() allows us to add more than one tag

Syntax

Duplication of Meta tags

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

While the following code results in both meta tags in the rendered HTML.

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.

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

Reading the Tags

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

Examples

Add the following Meta Tags.

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.

Use it to compare any of the attributes. The following example uses the content attribute to read the data.

The getTags() method returns all instances of the meta in an array

The following will return all the meta tags with the name attribute

You can also check out the following.

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

updateTag inserts the tag if matching meta element is not found

updateTag replaces only the first instance of the search criteria.

Removing the Tag

Use removeTag() or removeTagElement() element to remove the meta tag.

Syntax

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

Removes the first matching tag.

You can use any attribute of the meta. The following example uses the content attribute to remove it.

You can also use removeTagElement() to remove the meta. You need to pass the HTMLMetaElement , which you want to remove. For example,

References

Meta
MetaDefinition
Platform-browser
Facebook sharing Meta Tags
Twitter Meta Tags
Guide to Meta Tags

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top