How to Set HTML Meta tags using Angular 4

The HTML meta tag provides metadata about the HTML document. Metadata aren’t displayed on the page but are machine parsable. Meta elements are typically used to specify the page description, keywords, author, last modified, and other metadata. The metadata can be used by browsers (how to display content or reload the page), search engines (keywords), or other web services. Meta tags play an important role in SEO. In Angular 4, there is a service named “Meta” that can be used to get and add meta tags. This service can help you to set relevant meta tags based on the active routes, which in turn impacts SEO of your website. This post talks about how to use this service and get/set HTML meta tags using Angular 4.

How to Set HTML Meta tags using Angular 4

Angular 4 Meta service is pretty easy to use and it has following methods and names are self-explanatory. We’ll see all the methods in action with an example.

• addTag
• addTags
• getTag
• getTags
• updateTag
• removeTag
• removeTagElement

We need to import this service from @angular/platform-browser and injecting it in a component or service of yours. Like:

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

addTag

The method name explains its purpose. This is used to add meta tags. Like:

addTags

The addTag method adds the meta tags one by one, but using addTags you can multiple meta tags in one set. Like:
Both addTag and addTags methods also accept a second parameter (forceCreation) which is bool. The value (true/false) indicates if the tag should be created even if it already exists. Like:
and below is the generated HTML.

Here, the description meta tag was added twice as force creation is set to true.

getTag

The getTag method returns the value of Meta tag. This method takes an attribute selector string and returns an HTMLMetaElement. Here’s an example of how getTag can be used.

getTags

Similar to the getTag, the getTags also takes an attribute selector string and returns an array of HTMLMetaElement. Like:

updateTag

This method updates the content of any existing tag. Like:
Here, the content of description meta tag gets updated. In this case, it is set to “Angular 4 meta service”.

removeTag

The removeTag method takes an attribute selector and removes the tag. In real application, there are hardly any situations where you would want to do this. However, if required, you can use this method to remove any meta tag. Like:

removeTagElement

Similar to the removeTag method, the removeTagElement also removes the meta tag. But it takes an HTMLTagElement directly instead of a string selector. Like:
Here, we first get the author meta tag and pass the same in removeTagElement to remove it.

That’s it. You can check the demo at plnkr.

Conclusion

Angular 4 meta service allows you to add, update, get and remove the meta tags. It helps in creating dynamic meta tags based on the Angular app active routes for better SEO. This post shows how to use Angular 4 meta service and all its method with examples.

PS: If you found this content valuable and want to return the favour, then