时间戳

首页 > 解决方案 > 在 Angular 9 的 Facebook 共享预览中显示某个网页的元数据

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

问题描述

我正在尝试使用此共享网址在 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 分享预览中显示我更新的元数据？

标签： typescriptfacebook-graph-apimeta-tagsangular9

解决方案

您必须启用服务器端渲染才能解决此问题。Facebook 不会运行你的 JavaScript 代码，他们使用他们的爬虫来收集你共享链接的数据。而且，如果您没有服务器端渲染，它们将无法抓取数据，并且将始终显示您的主页元数据。所以启用 ssr 并试一试。

推荐阅读