我们有一个 VueJS Web 应用程序，它显示地图位置，并在地图上添加了资产。
URL结构是 htts://example.app/#/MapInfoAsALongHashString
如果共享 URL，则处理 HashString 并相应地生成地图/资产的位置。
到目前为止，一切都很好 - 但是当人们共享 URL 时，我们希望页面元数据/OpenGraph 信息能够反映地图位置。例如，页面标题可能包括地图位置的名称，或有关正在显示的资产的信息。
因此，当 URL 被共享时，任何自动生成的预览（即 Slack、Facebook Messenger、Twitter 等）都会提供足够有用的上下文来准确描述链接。
我们遇到的问题是应用程序需要进行大量 API 调用（即从纬度/经度坐标获取位置名称），并且在完成此操作时已生成预览，而忽略了动态信息。
作为参考，我们使用此服务来测试预览：https : //metatags.io/
无论如何要推迟预览的生成，直到返回相关信息？
到目前为止，链接预览似乎只使用作为应用程序容器加载的初始 HTML。即使在没有任何 API 调用的情况下动态更改 VueJS 应用程序中的页面标题也不会被以下网站接收：https ://metatags.io/
通过 VueJS 显示动态元数据/OpenGraph 信息以进行链接预览的最佳方式是什么？
你的猜测是正确的。大多数预览仅使用初始 HTML。SPA 的一大缺点。
归根结底，这是服务器端的问题。您需要检测请求是否由机器人发出（谢天谢地，他们没有隐藏它）并以某种方式在响应中包含 opengraph 元标记。
它可以与 vue 应用程序分开完成（毕竟不需要渲染主体，但你仍然需要从你的服务中实现数据聚合），或者你可以在 vue 路由器/页面组件挂钩中使用带有头部更改逻辑的服务器端渲染。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句