在 Angular 9 中显示 Facebook 中某个网页的元数据共享预览

Question

我正在尝试使用此分享 url:

在 Facebook 上分享我的 angular 9 项目的某个网页

<a target="_blank" href='{{ "https://www.facebook.com/sharer/sharer.php?u="+recipeDetails?.web_link }}'>

我也在使用 Meta 更新组件中的元标记：

this.metaService.updateTag({ property: "og:title", content: "Title goes here"});
this.metaService.updateTag({ property: "og:description", content: "Description goes here"});
this.metaService.updateTag({ property: "og:url", content: "Url goes here"});
this.metaService.updateTag({ property: "og:image", content: "Image url goes here"});

当我在浏览器中检查元素时，网页向我显示元标记。但是由于 angular 是单页应用程序，当我从浏览器查看页面源代码时，浏览器向我显示从 index.html 分配的初始元数据。因此，当我在 Facebook 上共享某个网页时，Facebook 共享预览向我显示了从 index.html 分配的初始元数据，而不是更新后的元数据。

我的问题是：如何在 Facebook 共享预览中显示更新后的元数据？

Answer 1

您无法在 Facebook 共享预览中显示更新后的元数据，因为它只接受您设置的初始元数据。为什么？因为 Facebook 分享预览不会运行您的 javascript 代码

Answer 2

您必须启用服务器端呈现才能解决此问题。 Facebook 没有运行你的 JavaScript 代码，他们使用他们的抓取工具收集你分享的数据 link。如果您没有服务器端渲染，他们将无法抓取数据，并且将始终显示您的主页元数据。所以开启ssr试试吧

在 Angular 9 中显示 Facebook 中某个网页的元数据共享预览

show meta data of a certain web page in Facebook share preview in Angular 9

typescript

facebook-graph-api

meta-tags

angular9