如何让含%2F的Firebase图片URL在og:image标签分享时正常显示？

问题根源 #

你的图片URL中原本的%2F（即/的URL编码）被二次编码成了%252F，导致WhatsApp、Facebook这类社交平台无法正确解析图片路径，进而无法加载预览图。

解决方法（无需修改图片名称） #

1. 确保URL仅被编码一次 #

检查你生成或输出og:image标签的代码逻辑：

• 如果你通过Firebase SDK（前端/后端）获取图片下载URL，直接使用SDK返回的原始URL即可，不要对该URL进行二次URL编码。比如Firebase的getDownloadURL()方法返回的链接已经是正确编码状态，直接嵌入meta标签即可。
• 若你手动拼接URL，仅对路径中的特殊字符（如/）进行一次编码，避免重复编码导致%2F变为%252F。

2. 使用带下载令牌的直接路径格式 #

如果你的图片需要访问权限，生成带下载令牌的URL时，可直接使用原始路径结构（无需手动编码/），示例格式：

https://firebasestorage.googleapis.com/v0/b/[你的存储桶ID]/o/[原始图片路径，包含/]/[图片名]?alt=media&token=[下载令牌]

Firebase会自动处理路径中的/编码，确保生成的URL符合规范，不会出现二次编码问题。

3. 验证并修正meta标签输出 #

查看页面源码，确认og:image标签中的URL是正确的编码状态（仅%2F而非%252F）。如果发现URL被二次编码，检查模板渲染或后端输出逻辑，移除多余的编码步骤。

验证方法 #

使用对应社交平台的调试工具输入你的网页链接，检查工具返回的og:image解析结果，确认图片路径正确且能正常加载。

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