Angular-如何在 Facebook 上共享的链接上显示动态元标记的内容？

Question

有谁知道如何在 facebook 上显示带有图片和描述的链接预览？我已按照本指南根据 URL (https://www.tektutorialshub.com/.../dynamic-meta-tags-in.../) 使用动态元标记。我检查了浏览器控制台，实际上，元标记会根据 URL 更改，但是当我在 facebook 上共享链接（登录页面以外的 URL）时，它只显示（在链接预览中）标签的信息默认情况下，我在 index.html 上进行了设置，就好像我共享了登录页面而不是另一个 URL（当它应该向我显示相应的 URL 信息时）。我的代码与链接中的代码非常相似，这里有一些图片来说明这一点：

这是登陆页面。注意元标记。

现在，这是另一个 URL，/first，请注意元标记的变化，因为它是另一个 URL。

但是，当我使用 facebook 共享调试器在 facebook 上共享“/first” URL 时，我会得到一个链接预览，其中显示了我在 index.html 上的默认元标记（标题、图像、描述）中的数据（根 URL）而不是显示 /first 上的内容。

知道可能是什么问题，或者您有其他解决方法吗？

Answer 1

正如 WizKid 提到的，爬虫不会执行 JavaScript。如果您右键单击您的页面并执行“查看页面源代码”，您将看到服务器正在呈现的内容。

与您的应用程序的索引页面类似，您需要为所有路径创建一个索引页面，并将它们放在您的网络服务器上各自的文件夹中。幸运的是，Angular 已经创建了 Angular Universal，它具有命令“npm run prerender”，它将为您构建索引页面。

但是，如果您有动态路由，则必须获取 Angular 应该单独预渲染的所有路由。

另一种选择是使用 prerender.io 之类的东西，它会在有人访问您的网站时为您创建缓存页面。