如何在这个 Angular 6 index.html 中添加元描述？答案

【问题标题】：How to add meta description in this Angular 6 index.html?如何在这个 Angular 6 index.html 中添加元描述？
【发布时间】：2020-04-24 18:56:46
【问题描述】：

只有一个静态页面需要进行 SEO。我在这里看到了标题，但不确定如何添加描述？

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Site Title</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

【问题讨论】：

标签： html angular angular6

【解决方案1】：

使用这些类型来更新元描述（“描述”、“我的描述”）

【讨论】：

【解决方案2】：

最简单的方法是直接在 HTML 中添加。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Site Title</title>
  <base href="/">
  <meta
     name="description"
     content=" YOUR DESCPRITION "
  />
  <link rel="manifest" href="manifest.webapp" />

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

您可以添加清单文件并支持它以进一步增强。

【讨论】：

这个解决方案是否适用于 Angular？我问它是因为默认情况下，当您使用 CLI 创建项目时它不提供任何元数据
是的，它可以正常工作。我在之前的项目中使用过它，谷歌选择了它。
现在测试。需要这条线吗？我还需要创建那个文件吗？
如果您想将网页添加到移动设备的主屏幕或将其转换为 PWA，则需要添加它。
我的意思是我应该从头开始创建该文件还是它已经在 Angular 生成的项目中？

【解决方案3】：

首先导入 Meta 和 Title 服务：

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

将服务注入组件构造函数：

constructor(private titleService: Title, private metaService: Meta) {}

添加 OnInit 方法并重建您的应用程序：

  ngOnInit() {
    this.titleService.setTitle(this.title);
    this.metaService.addTags([
      {name: 'keywords', content: 'Angular, Universal, Example'},
      {name: 'description', content: 'Angular Universal Example'},
      {name: 'robots', content: 'index, follow'}
    ]);
  }

查看此链接以了解有关元的更多信息：

Getting & Setting HTML Meta Tags in Angular

【讨论】：

【解决方案4】：

您可以在 index.html 页面的<head> 部分设置<meta name="description" content="">。

导入元：import { Meta } from '@angular/platform-browser';

在你想更改描述的组件中可以注入Meta：

constructor(private meta: Meta) { }

并更新值：

this.meta.updateTag({ name: 'description', content: 'Your new description' });

查看有关元服务的文档： https://angular.io/api/platform-browser/Meta

【讨论】：