angular - 动态添加元标记 - Angular

Question

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

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

第二种方式(开发阶段):现在我正在集成 Angular Universal，我正在做的是从像 <url>/view-blog/{id} 这样的 Angular 路线为个人博客提供服务。 .我正在添加 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 内容)？或者只是坚持“第一种方式”？最佳做法是什么？

Answer 1

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