Angular 10 SEO: Adding Title and Meta Tags Example

Angular 10 SEO: Adding Title and Meta Tags Example

In this Angular 10 tutorial, you will learn angular 10 meta tags. step by step explain angular 10 set page title. i explained simply about how to add page title in angular 10. I’m going to show you about angular 10 seo meta tags.

Hi Dev,

In this tutorial, you will learn angular 10 meta tags. step by step explain angular 10 set page title. i explained simply about how to add page title in angular 10. I’m going to show you about angular 10 seo meta tags.

it's simple example of angular 10 universal meta tags. Let's get started with how to set seo meta tags in angular 10.

We will use Meta service for adding page title and meta tags in our angular 10 project. we can use Title and Meta service from @angular/platform-browser.

Let's see simple example and also i will give you example of addTags(), getTag(), updateTag() and removeTag().

Add Tags:

src/app/app.component.ts

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("Angular SEO Meta Tag Example - ItSolutionStuff.com");

    this.metaTagService.addTags([
      { name: 'keywords', content: 'Angular SEO Title, Meta Description, Meta Keyword Example' },
      { name: 'robots', content: 'index, follow' },
      { name: 'author', content: 'Hardik Savani' },
      { charset: 'UTF-8' }
    ]);

  }
}

angular javascript web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

CRM Application | Angular Development | App Development

47% of corporations have 90% ready-made CRM adoption rate as it helps startups, SMEs, big brands in managing data, business relationships & grow business.

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

The Good and Bad of Angular Development

Today, we will gather some necessary information about Angular and know its pros and cons that can help you in deciding whether to use this framework for your next project or not.