使用角度通用更新SEO的元标记

时间:2018-03-22 19:42:56

标签: angular meta-tags serverside-rendering angular-universal

我正在构建一个有角度的通用+角度2网站,我想添加社交媒体分享按钮。我实现了服务器端渲染,并且还使用以下代码更新了必要的元标记:

 constructor(private dataService: DataService,
private activatedRoute: ActivatedRoute,
private auth: AuthService,
private router : Router,
private meta : Meta) {

this.currentUrl = window.location.href;
// testing if it changes something to add that outside of the service : it didnt
this.meta.updateTag({ property: 'og:title', content: "my new title" })



let id= this.activatedRoute.snapshot.paramMap.get('id');
this.dataService.getDataById(id).snapshotChanges().take(1)
.switchMap(result => {

console.log("slug switchmap")
let payloadValue = result[0].payload.val();

// facebook meta 
this.meta.updateTag({ property: 'og:url', content: this.currentUrl })
this.meta.updateTag({ property: 'og:title', content: payloadValue.title })
this.meta.updateTag({ property: 'og:description', content: payloadValue.description })
this.meta.updateTag({ property: 'og:image', content: 
 payloadValue.photoUrl })


return result;
})
 .subscribe(params => {

console.log(params)



    });
}

我使用firebase作为我的托管并且共享无效(它只是与我输入的默认值共享)。有趣的是,如果我在浏览器中检查元素,我会看到更新的元标记,但是如果查看页面源,我会看到我的标记的默认值而不是更新的标记。知道如何动态更新元标签吗?

更新:我认为问题来自于构造函数在调用获取元结束值的subscribe方法之前结束的事实。一旦构造函数完成,我不认为你可以改变元标记。那有什么方法吗?

0 个答案:

没有答案