Angular Universal-动态元标记在社交媒体共享上不起作用

Question

我有一个基于Angular 5和Angular Universal并带有服务器端渲染的应用程序。

对于主页，我已将标题固定为“ ABC”，并且在加载应用程序时，我调用了一个构造函数，该构造函数更新了fb和其他社交媒体应用程序的标题和元信息。

加载网站时，标签会更新，但是当我在facebook调试器工具上将网站报废时，它不会显示更新的标签。

Following code runs on ngOnInit(){
    this.title.setTitle('ABC - XYX');
    this.meta.updateTag({name: 'author',content: "ABC.com"});
    this.meta.updateTag({name: 'description',content: "ABC - XYX | ABC - XYX "});
    this.meta.updateTag({ property: 'og:type', content: 'website' });
    this.meta.updateTag({ property: 'og:site_name', content: 'ABC.com' });
    this.meta.updateTag({ property: 'og:title', content: 'ABC - XYX' });
    this.meta.updateTag({ property: 'og:description', content: 'ABC - XYX | ABC - XYX' });
    this.meta.updateTag({ property: 'og:url', content: "http://abc[dot]com" });
}

所以有人可以帮我解决我在这里做错的事情吗？

Answer 1

这些元数据在呈现页面后添加到DOM，因此大多数社交媒体都看不到这些元。

一种解决方案可能是使用Angular Universal呈现服务器端页面。

[在线阅读，我看到有人建议使用e * .htaccess *将所有请求重定向到添加元标记的php脚本。