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

时间:2018-11-21 07:12:18

标签: javascript angular typescript angular-universal

嘿,我遇到了一个博客页面,其中包含动态数据,我想用这些数据来填充元标记,例如,我正在做类似的事情

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});
     })
}

现在所有迹象都表明这应该可行,但是在查看源代码时我看不到更新的meta标签,而在检查SEO工具时也看不到它们。

对此有解决方案吗?

预先感谢!

1 个答案:

答案 0 :(得分:1)

我有一个在Angular 7中完全实现的博客。这是我无需使用Angular Universal就能动态使用Facebook元标记的方法:

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

2)在我的HTML中,添加“转到博客文章”链接

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