Dynamic page titles in Angular / Dynamic meta tags in Angular / Set dynamic keywords in Angular / Set dynamic description in Angular.
Page titles and Meta tags are key to SEO. Angular provides two important services that we can inject in our components to dynamically set page title and meta tags.
These two services are Title and Meta service, which can be found under @angular/platform-browser
Three steps for adding dynamic title in Angular
- import { Title } from ‘@angular/platform-browser’;
- constructor(private titleService: Title)
- this.titleService.setTitle(“YourTitle”);
First step is to import Title Service from @angular/platform-browser. After importing the Title Service, we need to inject Title service in the constructor . After this we can use this injected instance to set title to any value which suits the content of the page. Having different title for each page is very important for SEO.
Three steps for adding dynamic keywords in Angular
- import { Meta } from ‘@angular/platform-browser’;
- constructor(private metaService: Meta)
- this.metaService.addTag({name: ‘keywords’, content: ‘Dynamic page title in angular, Dynamic keywords in angular’});
First step is to import the Meta service from @angular/platform-browser, after this we can inject this service in our constructor. Than we can use addTag method of the service to add keywords for our angular pages. In add tag we provide name of the tag which we would like to add in meta tags and than the content we are adding to that tag.
Three steps for adding dynamic description in Angular
- import { Meta } from ‘@angular/platform-browser’;
- constructor(private metaService: Meta)
- this.metaService.addTag({name: ‘description’, content: ‘Dynamic page title in angular, Dynamic keywords in angular’});
There are other methods in these service as well which we can use as per our needs. We are giving a snippet of the important part of adding dynamic title, keywords and description in our pages.
For our articles on Ionic , Please visit Ionic section of our website