时间戳

首页 > 解决方案 > 动态添加元标记 - Angular

angular - 动态添加元标记 - Angular

问题描述

我正在将 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 内容）？还是只坚持“第一种方式”？最佳做法是什么？

标签： angularseoangular7angular-universal

解决方案

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

推荐阅读