如何在VueJS中生成动态OpenGraph/元数据以实现链接预览效果？

问题本质 #

所有主流社交平台、预览测试工具的爬虫均不会执行客户端JavaScript逻辑，也不会等待异步API请求返回，仅会读取页面初始返回的HTML静态内容，因此纯前端在Vue中动态修改页面标题、meta标签的操作无法被爬虫识别，也不存在让爬虫等待前端接口返回后再生成预览的可行方案。

最优实现方案 #

根据你的项目改造接受度，可以选择以下三种方案：

• 方案1：服务端渲染（SSR）方案（长期最优）
  如果你可以接受项目架构小幅调整，推荐使用Vue官方SSR框架适配路由逻辑：
  1. 若可调整为history路由模式，直接在页面服务端预取数据钩子中提前调用经纬度转地址、资产点位查询的API，拿到数据后直接在服务端注入对应的title、og:title、og:description、og:image等meta标签到HTML head中，爬虫拿到的就是渲染完成的完整内容
  2. 若必须保留哈希路由模式，可在反向代理层添加规则：识别到爬虫请求时，将完整URL（含哈希部分）传递给服务端，服务端解析哈希值后调用对应API注入meta标签再返回HTML，普通用户访问时正常返回SPA包不影响使用。
• 方案2：独立预览跳转服务（改造成本最低）
  若不想改动现有Vue项目架构，可以新增一个轻量的后端预览服务：
  1. 将用户分享的链接替换为预览服务地址，格式为https://example.app/preview/MapInfoAsALongHashString，替换掉原来的哈希路由地址
  2. 预览服务接收到请求后，解析路径中的HashString，调用所需的所有API生成对应的meta标签，注入到HTML中返回给爬虫
  3. 针对普通用户的访问，预览服务直接302重定向到原来的https://example.app/#/MapInfoAsALongHashString地址，用户无感知。
• 方案3：无头浏览器预渲染（仅适合低访问量场景）
  若完全不想新增后端业务逻辑，可以部署无头浏览器预渲染服务：
  1. 反向代理识别到爬虫请求时，转发给预渲染服务，用无头浏览器工具打开对应页面，等待所有异步请求执行完成、meta标签修改完毕后，将最终的HTML返回给爬虫
  2. 该方案并发性能差、易超时，仅适合访问量极小的内部场景使用，不建议对外生产环境使用。

注意事项 #

由于URL的哈希部分默认不会被浏览器发送到服务端，所有方案都需要提前在CDN/反向代理层配置规则，识别爬虫请求时将完整URL（含哈希片段）传递给后端处理逻辑，否则无法解析得到MapInfoAsALongHashString生成对应内容。

内容的提问来源于stack exchange，提问作者BaronGrivet