具有动态内容的角度通用更新元标记答案

【问题标题】：angular universal update meta tags with dynamic content具有动态内容的角度通用更新元标记
【发布时间】：2019-04-23 17:15:30
【问题描述】：

嘿，我遇到了一个问题，我有一个引入动态数据的博客页面，我想用这些数据来填充元标记，例如我正在做这样的事情

getBlogPost() {
  this.http.get(...)
     .subscribe(result => {
         this.blogPost = result;
         this.meta.updateTag({ name: 'description', content: this.blogPost.fields.metaDescription });
         this.meta.updateTag({name: 'robots', content: 'INDEX, FOLLOW'});
         this.title.setTitle(this.blogPost.fields.blogName);
         this.meta.updateTag({name: 'twitter:image:src', content: this.blogPost.includes.Asset[0].fields.file.url });
         this.meta.updateTag({name: 'twitter:title', content: this.blogPost.fields.blogName });
         this.meta.updateTag({name: 'twitter:description', content: this.blogPost.fields.metaDescription });
         this.meta.updateTag({property: 'og:title', content:  this.blogPost.fields.blogName});
         this.meta.updateTag({property: 'og:description',  content: this.blogPost.fields.metaDescription});
         this.meta.updateTag({property: 'og:image', content: this.blogPost.includes.Asset[0].fields.file.url });
         this.meta.updateTag({property: 'og:image:secure_url', content: this.blogPost.includes.Asset[0].fields.file.url});
     })
}

现在所有迹象都表明这应该可以工作，但是当我查看源代码时没有看到更新的元标记，当我检查 SEO 工具时也没有看到它们...

有解决办法吗？

提前致谢！！

【问题讨论】：

question 的答案可能会有所帮助。

标签： javascript angular typescript angular-universal

【解决方案1】：

我有一个完全用 Angular 7 实现的博客。以下是我如何在不使用 Angular Universal 的情况下动态使用 Facebook 元标记：

1) 在我的后端（在我的情况下是 Spring Boot）中，我创建了一个服务来根据我当前的博客文章生成一个 HTML 文件。我正在根据我的博客文章（如标题、缩略图等）在此 HTML 的标题中添加所有特定的 Facebook 标记

2) 在我的 HTML 中，我添加了一个“转到博客文章”链接

3) 当我想分享博文时，我在 Facebook 上分享生成的 HTML URL。因此标题、缩略图等都是根据我当前的帖子内容。

【讨论】：