How to Set Dynamic Page Title and Meta Tags in Angular 6 / Angular 7 for SEO

Posted at: December 22, 2018 1:00 PM

Angular provides Meta and Title services for set and get dynamic HTML meta tags and page title.

Page Title

A service that can be used to get and set the page title of a current HTML document. This service can be used to set and get the current page title value. In title service availables method are setTitle() and getTitle()

Using Title service import @angular/platform-browser into your component for set and get page title.

setTitle

Here is an example where we set page title.

getTitle

You can get current page title using getTitle

Here is an example where we get current page title.

Meta Tags

Meta tag service that can be used to get and add meta tags of current active route. Available methods for meta tags. Tags are charset, content, httpEquiv, id, itemprop, name, property, scheme, url

  • addTag()
  • addTags()
  • getTag()
  • getTags()
  • updateTag()
  • removeTag()
  • removeTagElement()

Using Meta service import @angular/platform-browser into your component for set and get meta tags.

addTag

You can add one by one meta tag using method addTag(). Here is example of addTag() for meta keywords and meta description.

addTags

With multiple meta tags like example above. You can use method addTags

In addTag and addTags have second arugment optional boolen. Default is false. You can set force creation for meta tag enable set true.

getTag

You can get meta tag using method getTag() by takes argument as attribute selector string and return html element. Here is example of getTag.

getTags

Using method getTags also takes argument as attribute selector and return array of html element.

updateTag

Using method updateTag update any meta tag.

You can use updateTag method for update meta tags of each page or route dynamically.

Here is example of updateTag for update meta keywords and meta description.

In updateTag second argument is optional and default value is undefined. You can set second arugment string of attribute selector for update this meta tag.

removeTag

Using method removeTag, remove any meta tag by takes argument html attribute as string. Here is example of removeTag for remove author meta tag.

removeTagElement

removeTagElement is similar of removeTag but it takes html element directly instead of taking attribute string selector. First we get meta tag html element then pass html element as argument in removeTagElement method. Here is example of removeTagElement for remove meta tag author.

This lesson also available on YouTube
Page TItle Get Page Title Set Page Title Meta Tags Add Meta Tag Update Meta Tag Get Meta Tag Remove Meta Tag

Please leave comments

8 Comments