All the efforts would go in vain if the application you developed fails to reach the target audience. One of the easiest ways to make your Angular application SEO friendly is to add titles, descriptions, and tags to each page.
If you have done web development before or are aware of the SEO jargon, then you must have heard about the META tags in HTML and how they are used to boost the SEO of a page/website.
What is meta data and how it helps in improving SEO?
Data about data is termed as Meta Data. In simple terms, meta tags in HTML helps to specify:
- Title
- Description
- Keywords
- Tags
- Last modified
- Author
- and many more
This helps the web crawler (for example Google’s) to scan your web page, get relevant data and rank it appropriately.
Adding description, keywords, and author
Angular provides a subtle service to achieve this – Meta. This service is used to GET and ADD meta tags. You inject the service in the component where you want to add meta tags and then use various methods provided by the service to get desired results.
The documentation for this service is pretty straightforward (kudos to the Angular team).
I’ll be using the repo – scalable-angular-folder-structure to demonstrate the code. The repo has 3 pages:
- Landing
- Contact us
- About us
and I’ll be adding meta data – title, description, author and keywords to all three pages.
The first step will be to inject the Meta service in the component/page you want to add meta data too. Import the service `import { Meta } from ‘@angular/platform-browser’;` and inject it in the constructor.
Use the Meta service to add the title, description, keywords, and author. Now you can do it in one go using the addTags() or can fly solo with addTag(). I’ll go with the former.
Adding title
The title is one of the most important descriptions of the page. It helps to provide a hint about the page. Angular has another service called Title.
Follow the same steps to import and inject Title service in the component file and then use setTitle() method to set the title of your page.
You can validate the title, description, keywords, and author by using the developer tools. You’ll find the details within <head></head> tag.
About us
Contact Us
But, it’s not over yet!
When you look closely in the developer tools, you’ll be shocked to see that every time you re-visit the same page after visiting it once or when you visit another page like about us or contact us from landing page, you’ll see that the meta tags aren’t getting updated, instead, the meta tags keeps getting appended.
Updating meta tags on route change
The solution (which I figured) was to update the meta tags when the component is initialized. Following the Angular lifecycle:
the constructor is fired before anything else at the time of component initialization and hence the code for adding meta tags keeps on appending to the existing meta-data. This is also because we do not remove meta tags from the pages via ngOnDestroy (the lifecycle hook which is fired when the component is destroyed).
Therefore, we use updateTag() of the angular Meta service. This not only updates the tags but if the tags are not present initially, this adds the tags to the component.
The landing, about us and contact us component looks like this after replacing addTag() with updateTag().
Landing page
About us page
Contact us page
Conclusion (P.S Saved you!)
Shifting from addTags() to updateTag() will solve the problem of redundant meta tags and will update the meta data when you move from one route to another.
The repo with updated code can be found here.
Questions, suggestions, advice, or have some frontend development work to be done? Hit me up in the comments section or contact here!