FB OpenGraph og:image 能否使用相对路径指向本地图片文件夹资源

结论 #

og:image 不支持相对路径，必须传入完整的绝对URL，这是OpenGraph的明确规范要求。

失效原因 #

社交平台、搜索引擎等抓取OpenGraph标签的第三方爬虫，在抓取到你的页面后，不会保留当前页面的上下文路径信息，无法将相对路径拼接为可访问的完整资源地址，所以你写的相对路径写法无法被正确识别。

正确写法 #

对应你给出的项目结构，public 目录为部署后的根目录，所以只需要把路径补全为你的站点部署地址+资源路径即可，示例如下：

<!-- 生产环境替换为你实际的站点域名 -->
<meta property="og:image" content="https://www.your-site.com/images/staticimage.png" />

<!-- 本地开发测试可使用本地服务地址 -->
<meta property="og:image" content="http://localhost:端口号/images/staticimage.png" />

优化建议 #

如果你的项目使用了前端构建工具，可以配置环境变量自动区分开发、生产环境的站点域名，构建时自动拼接为完整路径，无需手动修改适配不同环境。

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