使用 facebook 分享动态更新元标记 - Angular 6

Question

我需要动态更新 og:title、og:description 和 og:image 等元标记并在 facebook 上共享相同的内容，我已经尝试了所有方法，但没有任何效果。

所以首先我尝试使用 javascript 设置元标记，如下所示：

var meta = document.createElement('meta');
meta.httpEquiv = "X-UA-Compatible";
meta.content = "IE=edge";
document.getElementsByTagName('head')[0].appendChild(meta);

然后我尝试使用如下的角度元标记：

添加：-

this.meta.addTag({ name: 'og:description', content: 'How to use Angular 6 meta service' });

要更新：-

this.meta.updateTag({ name: 'og:description', content: 'Angular 6 meta service' });

但这一切都失败了，最后我尝试了下面的元包，

https://github.com/vinaygopinath/ng2-meta

但我在分享我的网站网址到 facebook 时仍然遇到动态字段问题，如果有人在帖子上发布网址，它应该显示动态内容。

如果有人知道，请告诉我！

Answer 1

您尝试过的所有方法都发生在客户端。您需要了解一件事：当您在 Facebook 上共享 URL 时，它会向您的服务器发出请求，读取元标记，然后更新 facebook.com 中的卡片。 Javascript 稍后出现。因此，无论您尝试什么方法，如果它在浏览器中执行，都不会在这里工作。我建议您尝试以下方法之一：

使用 Angular 通用的服务器端渲染，它就是为此而构建的。可以在以下位置找到文档：https://angular.io/guide/universal。此解决方案的缺点是您的 HTML 页面必须由节点服务器提供。