动态添加元标记 - Angular答案

【问题标题】：Adding Meta Tags Dynamically - Angular动态添加元标记 - Angular
【发布时间】：2019-08-30 09:51:04
【问题描述】：

我正在将 Angular Universal 集成到我的 Angular 7 应用程序中。

第一种方式（目前正在制作中）：我的（所有个人）博客作为单独的 html 文件发布，直接上传到 S3 存储桶（用于 SEO 目的），其中包括 title、description 和元标记。

第二种方式（开发阶段）：现在我正在集成 Angular Universal，我正在做的是从像 <url>/view-blog/{id} 这样的角度路由提供个人博客。我正在添加title 和使用MetaService 的元标记，如下所示

  ngOnInit() {
    this.initialize();
  }

  initialize() {
    let blogId = this.route.snapshot.params['id'];

    if (AppUtils.isUndefinedOrNull(blogId)) {
      // Return back to main blog page
      this.router.navigate([constants.pageUrl.blogs]);
      return;
    }

    this.loading = this.blogService.getBlogById(blogId).subscribe(
      (resp: any) => {
        this.blog = resp.blog;

        this.metaService.setTitle(this.blog.title, true);
        this.metaService.setTag("keywords", this.blog.metadataKeywords);
        this.metaService.setTag("description", this.blog.name);

      }, (err) => {
        // Deal with error
      }

    )
  }

使用上面的代码，我们正在等待服务返回元标签，Angular-Universal 和MetaService 会帮助爬虫找到元标签吗？

“第二种方式”也是显示博客的正确方式（记住为爬虫设置的标题、描述、关键字和所有 SEO 内容）？还是只坚持“第一种方式”？最佳做法是什么？

【问题讨论】：

标签： angular seo angular7 angular-universal

【解决方案1】：

我不建议您使用第二种方式。大多数爬虫不执行 JavaScript 代码，所以他们永远不会知道标题是什么。尝试在 HTML 中对爬虫的所有重要信息进行硬编码。

【讨论】：