动态将meta标签添加到index.html以共享链接预览

Question

我有一个角度页面，显示丰富的内容（PDF，图像，视频等）。我需要使用正确的元标记创建指向该HTML页面的可共享链接，以便在丰富的链接预览中显示正确的标题和描述（当其他服务（如Facebook，Twitter，SMS等显示它时））。共享链接已在其中为我的项目提取HTML页面内容所需的所有数据进行了编码。如何动态地将正确的元标记添加到我的角度项目的index.html页面中，以使可共享的链接预览正确显示在其他服务上？

在其他平台上共享时如何显示链接预览的示例： https://i.stack.imgur.com/ZRJ8X.png

Answer 1

要使meta标签起作用，它们必须位于链接的HTML页面上，然后运行任何javascript。某些平台在生成链接预览时可能会在外部站点上运行一些javascript，但通常，元标记必须在html页面上，然后才能进行角度引导，因此给定页面上的客户端代码将无法实现此目的。

。

出于我的目的，我发现实现此效果的最有效方法是在HTML重定向时，将独立的共享链接与有角项目分开提供服务。

例如，您可以让您的可共享链接实际上链接到您的API，并让API在重定向时传递数据。您将拥有example.com/article?id=2&exampleParam=123而不是api.example.com/share?id=2&exampleParam=123。 /share API端点将返回带有正确元标记的HTML文件，以及将重定向到您的应用的元标记：<meta http-equiv="refresh" content="0; URL='https://example.com/article?id=2&shareableParam=123'" />

您只需要将可共享的链接引至具有正确元标记的HTML页面，并重定向到您应用上的实际URL。据我所知，没有任何更简单的方法可以这样做，因为在运行angular之前必须存在meta标签。虽然服务器端渲染的角度项目是完全不同的游戏，但是我认为大多数遇到此问题的人只会使用客户端渲染。