MCQ

Add Page Title and Meta Tags using Angular 9/8 SEO

In this section, we are going to learn about adding page titles and Meta tags. We will use Angular 9/8 to do this. Here we will explain the universal dynamic Meta tag. Here, we will also learn about the setting of SEO Meta tags. Meta services and titles are offered by Angular. These tags and HTML Meta tags are similar to each other. They are used to make our Angular app SEO-friendly. Angular has a service named Meta, which belongs to a class family. Angular provides a facility to update, add, remove and read HTML Meta elements by offering a lot of Meta services. Using the Angular Meta tag, we can quickly set different Meta tags to different pages.

Meta tags and page titles are the parts of HTML code, which contains in all web pages. Meta tags are used to show the details of our page content to search engines. For our Angular SEO, it is very important to set the right Meta tags. The <head> section of HTML will only show the Meta Tags, and it can't be seen by the uses. It can be used by social media sites or search engines so that they can search more about our page. The title of the HTML page is described by the page title. It is also known as a title tag. As the result of a search engine, the page title will display at the title bar of a browser. The page title can be used by the search engine to recognize the information contained by the browser. The search term is included by the page title. Using this, website has been optimized.

In our Angular application, we will add a Meta tag and page title by using the Meta service. We will use @angular/platform-browser to get the Title and Meta service. Here, we will explain many functions such as addTag(), getTag(), updateTag(), and removeTag(). We can also use these functions to manipulate Meta tags. In order to add Meta tags and page title, the step by step process is described as follows:

Step 1:

In this step, we are going to Add Tags. It is used to add one Meta tag. For this, we will use a file named app.component.ts and add the following code into it like this:

import { OnInit, Component } from '@angular/core';
import { Title, Meta } from '@angular/platform-browser';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular';
  
  constructor(
    private titleService: Title,
    private metaTagService: Meta
  ) { }
  
  ngOnInit() {
    this.titleService.setTitle("Example of SEO Meta Tag using Angular");
  
    this.metaTagService.addTags([
      { name: 'keywords', content: 'Angular SEO Title, Meta Description, Meta Keyword Example' },
      { name: 'robots', content: 'index, follow' },
      { name: 'writer, content: 'John Smith' },
      { charset: 'UTF-8' }
    ]);
      
  }
}

Step 2:

In this step, we are going to use getTag(). It is used by the specified Meta selector to get HTMLMetaElement like this:

src/app/app.component.ts

ngOnInit() {
	this.titleService.setTitle("Example of SEO Meta Tag using Angular");
  
	this.metaTagService.addTags([
	  { name: 'keywords', content: 'Angular SEO Title, Meta Description, Meta Keyword Example' },
	  { name: 'robots', content: 'index, follow' },
	  { name: 'writer', content: 'John Smith' },
	  { charset: 'UTF-8' }
	]);
  
	const writer = this.metaTagService.getTag('name=writer');
	console.log(writer.content); //John Smith
  
}

Step 3:

In this step, we are going to use updateTag(). It is used in the Angular element to update the Meta tag like this:

src/app/app.component.ts

ngOnInit() {
	this.titleService.setTitle("Example of SEO Meta Tag using Angular");
  
	this.metaTagService.addTags([
	  { name: 'keywords', content: 'Angular SEO Title, Meta Description, Meta Keyword Example' },
	  { name: 'robots', content: 'index, follow' },
	  { name: 'writer', content: 'John Smith' },
	  { charset: 'UTF-8' }
	]);
  
	this.metaTagService.updateTag({ name: 'writer', content: 'Harry Potter' });
  
}

Step 4:

In this step, we are going to use removeTag(). It is used by the specified selector to delete the Meta tag like this:

src/app/app.component.ts

ngOnInit() {
	this.titleService.setTitle("Example of SEO Meta Tag using Angular");
  
	this.metaTagService.addTags([
	  { name: 'keywords', content: 'Angular SEO Title, Meta Description, Meta Keyword Example' },
	  { name: 'robots', content: 'index, follow' },
	  { name: 'writer', content: 'John Smith' },
	  { charset: 'UTF-8' }
	]);
  
	this.metaTagService.removeTag('name="writer"');
  
}

Now our above code is ready to run. When we run this code, the following output will be generated: