如何在 VueJS 中为 link 预览生成动态 OpenGraph/ 元数据信息？
How to generate dynamic OpenGraph/ Metadata information in VueJS for link previews?
我们有一个 VueJS 网络应用程序，它显示了一个地图位置，并在地图上附加了资产。
URL结构是htts://example.app/#/MapInfoAsALongHashString
如果共享 URL，则会处理 HashString 并相应地生成地图/资产的位置。
到目前为止一切顺利 - 但当人们共享 URL 时，我们希望页面元数据/OpenGraph 信息反映地图位置。例如，页面标题可能包括地图位置的名称，或有关正在显示的资产的信息。
当共享 URL 时，任何自动生成的预览（即 Slack、Facebook Messenger、Twitter 等）都会提供足够有用的上下文来准确描述 link。
我们 运行 遇到的问题是应用程序需要进行多次 API 调用（即从 lat/long co-ordinates 获取位置名称) & 到此完成时，预览已经生成，省略了动态信息。
作为参考，我们使用此服务来测试预览：https://metatags.io/
有没有什么方法可以延迟生成预览，直到相关信息返回？
到目前为止，link 预览似乎只使用最初的 HTML 作为应用程序容器加载。即使在没有任何 API 调用的情况下动态更改 VueJS 应用程序中的页面标题也不会被以下人接收：https://metatags.io/
通过 VueJS 为 link 预览显示动态元数据/OpenGraph 信息的最佳方式是什么？
你猜对了。大多数预览仅使用初始 HTML。 SPA 较大的缺点之一。
归根结底，这是服务器端的问题。您需要检测请求是否是由机器人发出的（谢天谢地，他们没有隐藏它）并以某种方式在响应中包含 opengraph 元标记。
它可以独立于 vue 应用程序完成（毕竟不需要渲染主体，但您仍然需要从您的服务中实现数据聚合）或者您可以在 vue 中使用带有头部更改逻辑的服务器端渲染 router/page 组件挂钩。
我们有一个 VueJS 网络应用程序，它显示了一个地图位置，并在地图上附加了资产。
URL结构是htts://example.app/#/MapInfoAsALongHashString
如果共享 URL，则会处理 HashString 并相应地生成地图/资产的位置。
到目前为止一切顺利 - 但当人们共享 URL 时，我们希望页面元数据/OpenGraph 信息反映地图位置。例如，页面标题可能包括地图位置的名称，或有关正在显示的资产的信息。
当共享 URL 时，任何自动生成的预览（即 Slack、Facebook Messenger、Twitter 等）都会提供足够有用的上下文来准确描述 link。
我们 运行 遇到的问题是应用程序需要进行多次 API 调用（即从 lat/long co-ordinates 获取位置名称) & 到此完成时，预览已经生成，省略了动态信息。
作为参考，我们使用此服务来测试预览：https://metatags.io/
有没有什么方法可以延迟生成预览，直到相关信息返回？
到目前为止，link 预览似乎只使用最初的 HTML 作为应用程序容器加载。即使在没有任何 API 调用的情况下动态更改 VueJS 应用程序中的页面标题也不会被以下人接收：https://metatags.io/
通过 VueJS 为 link 预览显示动态元数据/OpenGraph 信息的最佳方式是什么？
你猜对了。大多数预览仅使用初始 HTML。 SPA 较大的缺点之一。
归根结底，这是服务器端的问题。您需要检测请求是否是由机器人发出的（谢天谢地，他们没有隐藏它）并以某种方式在响应中包含 opengraph 元标记。
它可以独立于 vue 应用程序完成（毕竟不需要渲染主体，但您仍然需要从您的服务中实现数据聚合）或者您可以在 vue 中使用带有头部更改逻辑的服务器端渲染 router/page 组件挂钩。