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脚本。

Answer 2

普遍集成后，我也面临着同样的问题。只需创建Universal-interceptor.ts文件并将其添加到您的appServerModule.ts文件即可。您可以查看下面的链接，以了解如何实现https://angular.io/guide/universal#using-absolute-urls-for-server-requests，它将解决此问题

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

2 个答案: