角度-如何在Facebook上分享的链接上显示动态元标签的内容？ [英] Angular- How display the content of dynamic meta tags on a link shared on facebook?

问题描述

有人知道如何在Facebook上显示带有图片和说明的链接预览吗？我遵循了这个指南，根据URL(https://www.tektutorialshub.com/.../dynamic-meta-tags-in.../)拥有动态元标记。我查看了浏览器控制台，实际上，元标签会根据URL的不同而变化，但当我在Facebook上分享链接(除登录页面外的URL)时，它只显示(在链接预览中)我在index.html上默认设置的标签的信息，就像我共享了登录页面而不是另一个URL(当它应该显示相应的URL信息时)。我的代码与链接中的代码几乎一模一样，下面是一些图片来说明这一点：

这是登录页。请注意meta标签。

现在，这是另一个URL，/首先，注意meta标记是如何改变的，因为它是另一个URL。

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

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

WizKid

正如推荐答案提到的，爬虫程序不会执行JAVASCRIPT。如果您右击页面并执行"查看页面源代码"，您将看到服务器正在呈现的内容。

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

但是，如果您有动态路线，则必须分别预渲染所有角度的路线。

另一种选择是使用类似preender.io的内容，当有人访问您的网站时，它将为您创建缓存页面。

这篇关于角度-如何在Facebook上分享的链接上显示动态元标签的内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！