How to set Meta tags in Angular

In this article we discuss on the How to set meta Tags for the our Angular Application. Meta tags are used for the SEO(Search Engine Optimization). Meta elements is used to specify each page title, keywords, description, author name and many more data to display in browser. It cannot display on the page but it useful for the pages seach in google search and many more.


In Angular Meta Class available for the set/get Meta data for that we need to import Meta class from the “platform-browse” like below syntax.

import { Meta } from '@angular/platform-browser';

Here we discussion on the few methods of the Meta class.

  • addTag
  • addTags
  • getTag
  • getTags

1) AddTag Method to add one by one tag add in the page. here is the example code to set mete-description,meta-keywords & meta author of the page.


import { Component } from '@angular/core';
import { Meta } from '@angular/platform-browser';

@Component({
  selector: 'first-page',
  templateUrl: './firstpage.html',
})

export class FirstPageComponent {
 constructor(private meta: Meta) {
    this.meta.addTag({ name: 'description', content: 'Education for betterment is site related to learn easily.' });
    this.meta.addTag({ name: 'keywords', content: 'eduforbetterment, Angular, Learn English' });
    this.meta.addTag({ name: 'author', content: 'Kangna' });
  }
}

HTML Output on the page like below.

<meta name="description" content="Education for betterment is site related to learn easily.">
<meta name="keywords" content="eduforbetterment, Angular, Learn English">
<meta name="author" content="Kangna"> 

Add tag also accept second parameter for true/false for the “forceCreation”. Add tag main syntax.

addTag(tag: MetaDefinition, forceCreation: boolean = false): HTMLMetaElement | null

If meta is their then also we need to create another with same then we need to create that element usinf seconf parameter to true. Example display below code.


import { Component } from '@angular/core';
import { Meta } from '@angular/platform-browser';

@Component({
  selector: 'first-page',
  templateUrl: './firstpage.html',
})

export class FirstPageComponent {
 constructor(private meta: Meta) {
    this.meta.addTag({ name: 'description', content: 'Education for betterment is site related to learn easily.' });
this.meta.addTag({ name: 'description', content: 'Education for betterment is site related to learn easily.' },true);
  }
}

HTML Output on the page like below.

<meta name="description" content="Education for betterment is site related to learn easily.">
<meta name="description" content="Education for betterment is site related to learn easily.">



2) addTags: In these method we can add array of the tags all tags added in one array.

addTags(tags: MetaDefinition[], forceCreation: boolean = false): HTMLMetaElement[]

Here is the example of the addTags.


import { Component } from '@angular/core';
import { Meta } from '@angular/platform-browser';

@Component({
  selector: 'first-page',
  templateUrl: './firstpage.html',
})

export class FirstPageComponent {
 constructor(private meta: Meta) {
    this.meta.addTags([
      {name: 'description', content: 'Education for betterment is site related to learn easily.'},
      {name: 'keywords', content: 'eduforbetterment, Angular, Learn English, Meta Service'},
      {name: 'author', content: 'Kangna'}
      
    ]);
  }

In next article we discussion on other methods of the Meta services.

Spread the love
  • 17
  •  
  •  
  •  
  • 7
  •  
  •  
  •