Metadata & SEO in angular +5

Jair Diaz
Jair Diaz
Sep 6, 2018 · 2 min read

Metadata is data (information) about data.

The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.

Further information about metadata: https://www.w3schools.com/tags/tag_meta.asp

It’s possible to add metadata in angular with the new “Meta” service added to the @angular/platform-browser library.

In this tutorial we will see how to use the meta service to improve the SEO of our page.


First, check if the “BrowserModule” is included in our main module.

Go to the .ts file of the component where the metadata will be added. Then, import the service at the top of the file and inject the service in the constructor.

All the metadata should be included within the constructor. Besides, the meta service include the next methods:

  • addTag: Add a new metadata by its name and content.
  • addTags: Add an array of metadata by its name and content.
  • getTag: Return the metadata by its name.
  • getTags: Return an array of metadata by its name.
  • updateTag: Update the content of an existing tag.
  • removeTag: Removes a tag by its name.
  • removeTagElement: Removes a tag by its HTMLTagElement.
All methods used in the constructor in order to include, update and remove metadata.

These are all the steps to correctly setup the metadata for each component in angular.

For further information about the meta service, the official angular documentation: https://angular.io/api/platform-browser/Meta#getTags

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade