使用 Angular 9/8 SEO 添加页面标题和元标记

2025年3月17日 | 阅读 3 分钟

在本节中，我们将学习如何添加页面标题和 Meta 标签。我们将使用 Angular 9/8 来完成此操作。这里我们将解释通用的动态 Meta 标签。在这里，我们还将学习 SEO Meta 标签的设置。 Angular 提供了 Meta 服务和标题。这些标签和 HTML Meta 标签彼此相似。它们用于使我们的 Angular 应用程序对 SEO 友好。 Angular 有一个名为 Meta 的服务，它属于一个类家族。 Angular 提供了通过提供许多 Meta 服务来更新、添加、删除和读取 HTML Meta 元素的工具。使用 Angular Meta 标签，我们可以快速为不同的页面设置不同的 Meta 标签。

Meta 标签 和页面标题是 HTML 代码的一部分，它包含在所有网页中。 Meta 标签用于向搜索引擎显示我们页面内容的详细信息。对于我们的 Angular SEO，设置正确的 Meta 标签非常重要。 <head> 部分的 HTML 将只显示 Meta 标签，并且不能被用户看到。社交媒体网站或搜索引擎可以使用它，以便他们可以搜索更多关于我们页面的信息。 HTML 页面的标题由 页面标题 描述。它也称为标题标签。作为搜索引擎的结果，页面标题将显示在浏览器的标题栏中。搜索引擎可以使用页面标题来识别浏览器包含的信息。搜索词包含在页面标题中。使用它，网站已经过优化。

在我们的 Angular 应用程序中，我们将使用 Meta 服务添加 Meta 标签和页面标题。我们将使用 @angular/platform-browser 来获取 Title 和 Meta 服务。在这里，我们将解释许多函数，例如 addTag()、getTag()、updateTag() 和 removeTag()。我们也可以使用这些函数来操作 Meta 标签。为了添加 Meta 标签和页面标题，按步骤描述如下

步骤 1

在此步骤中，我们将 添加标签。它用于添加一个 Meta 标签。为此，我们将使用一个名为 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("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' }
    ]);
      
  }
}

步骤 2

在此步骤中，我们将使用 getTag()。它被指定的 Meta 选择器使用来获取 HTMLMetaElement，如下所示

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
  
}

步骤 3

在此步骤中，我们将使用 updateTag()。它用于 Angular 元素中以更新 Meta 标签，如下所示

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' });
  
}

步骤 4

在此步骤中，我们将使用 removeTag()。它被指定的选择器用于删除 Meta 标签，如下所示

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"');
  
}

现在我们的上述代码已准备好运行。当我们运行此代码时，将生成以下输出

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

下一个主题卸载并重新安装 Angular cli

使用 Angular 9/8 SEO 添加页面标题和元标记

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

选择题

AngularJS 教程

Angular 7 教程

Angular 其他

Angular + Spring

面试题

AngularJS 指令

使用 Angular 9/8 SEO 添加页面标题和元标记

相关帖子

Angular 9/8 路由和嵌套路由

Angular 常见路由任务

在 Angular 中动态添加和删除表单字段

创建 Angular 项目

什么是 Angular 服务

Angular vs React

卸载并重新安装 Angular cli

Angular 版本和版本控制

设置 Angular 组件的样式

Angular 图像上传，带裁剪、缩放、缩放

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器