Metadata & SEO in angular +5
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.

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