Dynamic Meta Tags in Angular

In this tutorial, we learn how to add Dynamic Meta Tags in Angular. First, we will define the Meta Tags in the Angular Routes. Then use the Meta Service and NavigationEnd router event to listen to the route change. When the route changes, we will update the Meta Tags.

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

Meta Tags

We use the Meta Service in Angular to add/remove meta tags. It provides the following methods

  1. addTag()
  2. addTags()
  3. getTag()
  4. getTags()
  5. updateTag
  6. removeTag
  7. removeTagElement

To use Meta Service, we first need to import it root module and inject it in Angular Providers as shown below

And in the component class, first, inject the Meta Service using Angular Dependency Injection. Use any of the methods of the Meta Service to manipulate the Tags.

Dynamic Meta Tags

Adding Meta tags in component class is little inconvenient. The better way is to define all the meta tags at a central place preferably when we define the routes. Whenever the route changes, we can read the Tags from the router and update Mega tags.

Example App

Create a new Angular Application. Add HomeComponent, FirstComponent, SecondComponent, SecondAComponent & ThirdComponent as shown below.


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

home.component.ts

first.component.ts

second.component.ts

secondA.component.ts

third.component.ts

Meta Tags in Route

The next step is to add the Meta tags in the route

Open the app-routing.module.ts and the routes as shown below. Add the Meta Tags property in route data. We can use the Route data to pass the static data or dynamic data to routed components. The title is also added to the Route Data.

Listen to Navigation Changes

Whenever a user navigates to a new route (or page), the router fires the navigation events. The Router raises the NavigationEnd event, when it successfully completes the navigation.

We must listen to every NavigationEnd event and the best place to listen is in our root component. i.e. app.component.ts. The code is as shown below.

The following code subscribes to the router change event. The filter RxJS Operator filters out NavigationEnd event. We subscribe to it.

In the next line, we recursively traverse through the ActivatedRoute tree to get to the current route.

Once we have the ActivateRoute of the currently loaded component, we subscribe to the data property to read the Route Data.

Now, we can set the title using title service

Update the Meta Description if one is defined on the route. Else we can remove the description set for the previous component.

In cases like robots tag, it is better to set it to follow,index as a default, if not tags were not defined.

app.component.html

app.module.ts

Angular Dynamic Meta Service
Angular Dynamic Meta Service

Reference

  1. Meta
  2. Meta Definition
  3. Facebook Meta Tags
  4. Twitter Meta Tags
  5. 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