Angular Universal - 动态元标签不适用于社交媒体共享答案

【问题标题】：Angular Universal - Dynamic Meta tags not working on social media sharingAngular Universal - 动态元标签不适用于社交媒体共享
【发布时间】：2018-11-10 04:58:28
【问题描述】：

我有一个基于 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" });
}

那么任何人都可以帮助我解决我在这里做错了什么吗？

【问题讨论】：

因此，如果您查看特定页面的页面源 (ctrl+U)，您的元数据有误吗？
@David 在页面上的元标记已正确更新，但是当我转到 facebook 社交调试器时，不会获取这些标记。
如果您在查看源代码时有正确的标签，那么角度不是问题。
@David 任何关于在哪里寻找此解决方案的指针。如果不是角度的话，其他原因可能是什么？如果你能帮忙，我可以分享我的测试服务器网址吗？
您能否显示源页面中看到的元数据的屏幕截图（ctrl+u）？

标签： angular angular5 angular-universal

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

通用集成后我也面临同样的问题。只需创建 Universal-interceptor.ts 文件并添加到您的 appServerModule.ts 文件中。你可以看下面的链接看看它是如何实现的https://angular.io/guide/universal#using-absolute-urls-for-server-requests它将解决这个问题

【讨论】：