HTML5小游戏跨平台分享需生成带状态的URL并适配各平台预览：用URLSearchParams编码状态至query，敏感数据走短链后端映射；微信需硬编码wx-open-graph meta且图片满足HTTPS/尺寸/缓存更新要求；QQ、微博依赖OG协议但细节不同；短链须用base62编码、设TTL、302重定向；必须真机测试。
HTML5小游戏无法直接“跨平台分享”——它本质是网页，靠的是链接传播，不是安装包分发。真正要解决的，是「生成可访问、可携带状态、适配各社交平台预览效果的 URL」，以及「让微信、QQ、微博等正确抓取标题/缩略图/描述」。
如何生成带游戏状态的分享链接
用户点击“分享”时，不能只返回 https://game.example.com/，否则好友打开后永远从初始关卡开始。必须把关键状态（如关卡、角色ID、道具）编码进 URL 的 query 或 hash 中。
- 优先用
URLSearchParams拼接 query：例如https://game.example.com/?level=12&char=warrior&score=8400，服务端或前端路由可直接解析 - 敏感数据（如 token、作弊标记）绝不能放 query，改用短链 + 后端映射：生成
https://s.game.example/abc123，由后端查表还原完整参数 - 避免 hash 携带大量状态（如
#state=eyJ...过长 base64 会触发微信截断），微信内置浏览器对 hash 长度有限制，实测超 200 字符易丢数据
为什么微信里点开总是显示默认标题和空白图
微信不走标准 Open Graph 协议，而是依赖其自定义的 JS-SDK 配置 + 页面静态 meta 标签双保险。仅写 不起作用。
- 必须在页面
中硬编码三组 meta：、、 - 图片必须满足：HTTPS、尺寸 ≥ 300×300 像素、格式为 JPG/PNG、大小 ≤ 5MB；微信会缓存图片，换图后需更新 URL 后缀（如加
?v=2） - 若用 JS 动态改 meta（如根据关卡换图），微信爬虫不执行 JS，无效——所有分享元信息必须服务端渲染或静态写死
QQ 和微博的分享适配要点
QQ 和微博比微信更依赖 Open Graph，但细节有差异，不能一套 meta 打天下。
立即学习“前端免费学习笔记（深入）”；
- QQ 内置浏览器识别
和，但og:description有时被忽略，建议额外加 - 微博要求
og:image必须是绝对 URL，且协议必须为 HTTPS；相对路径或 HTTP 地址会被拒载，显示默认图标 - 所有平台都要求页面响应头含
Content-Type: text/html; charset=utf-8，否则中文 meta 可能乱码，导致标题显示为方块
短链服务与状态持久化怎么配合
用户分享的链接越短越易传播，但短链本身不保存状态——必须靠后端做一层映射，并保证高可用和低延迟。
- 生成短码推荐用「非连续 ID 编码」（如 base62），避免被遍历猜出未发布关卡；不要用自增数字
id=123直接转短码 - 存储映射关系时，加上 TTL（如 30 天），防止过期分享页无限占用空间；同时记录来源渠道（微信/QQ/微博），用于后续分析点击转化
- 重定向必须用 302（临时），而非 301（永久）：否则用户修改游戏逻辑后，旧短链无法指向新逻辑，且浏览器/CDN 会强缓存 301
最常被忽略的是：分享链接生成后没做真机测试。模拟器或桌面浏览器看到的预览效果，和微信 iOS/Android、QQ 安卓/iOS 实际抓取结果可能完全不同——每个平台 UA 不同、爬虫版本不同、缓存策略不同。上线前至少要在 4 个真实终端上手动点开链接，检查标题、图、跳转是否准确。
