og:image 必须使用 HTTPS 绝对 URL,图片需可公开访问、配置 CORS、符合尺寸格式要求(如1200×630px、JPG/PNG/GIF),并补充 og:image:width/height 标签以避免平台降级。

og:image 必须是绝对 URL,且图片需可被外部爬虫直接访问——否则 Facebook、Discord、LinkedIn 等平台抓取失败,显示空白或默认站标。
og:image 的 URL 必须带协议和域名
常见错误是写成相对路径或 protocol-relative 路径:
-
→ 抓取失败(无协议,无法解析) -
→ 多数平台拒绝(不支持 // 开头) - ✅ 正确写法:
微信虽部分兼容相对路径,但为保全平台一致性,一律用 HTTPS 绝对地址。CDN 域名务必配置 CORS,否则 Twitter 和 Slack 可能拒绝加载。
图片尺寸与格式的硬性要求
不同平台对 og:image 的宽高比、最小尺寸、文件大小有明确限制,不是“能显示就行”:
- Facebook / LinkedIn / Discord:推荐 1200×630 px(1.91:1),最小 600×315 px;文件 ≤ 8 MB
- Twitter:优先识别
,要求图片 ≥ 1024×512 px - 微信:实际生效依赖 JS-SDK,但 fallback 仍读
og:image,建议额外提供 300×300 px 版本(微信客户端缩放逻辑较粗暴) - 格式仅支持 JPG、PNG、GIF(不支持 WebP,即使浏览器支持)
用 imagemagick 批量转存并压缩:
convert input.png -resize 1200x630^ -gravity center -extent 1200x630 -quality 85 output.jpg
服务端动态生成时要注意缓存与响应头
如果你用 Node.js / PHP / Python 动态生成 og:image(如基于文章标题渲染封面图),必须确保:
- HTTP 响应头包含
Content-Type: image/jpeg(或image/png),不能是text/html - 禁止返回 302 重定向——Facebook 爬虫不跟随跳转,会直接放弃
- 图片 URL 需稳定可缓存,避免带 session 或临时 token 参数
- 首次部署后,用 Facebook Sharing Debugger 强制刷新缓存,否则旧图持续生效长达 24 小时
调试时直接在浏览器访问该 og:image 地址,确认能直出图片、无报错、无登录拦截。
静态站点常漏掉的两个关键点
纯前端静态博客(如 Hugo、Jekyll、VuePress)最容易忽略:
- 图片路径写死在模板里,但构建后实际资源放在
/assets/或/images/子目录下,导致og:image404 - 未启用
og:image:width和og:image:height标签,部分平台(如 Slack)会降级处理或模糊渲染
补全示例:
<meta property="og:image" content="https://example.com/images/post-abc.jpg"><br><meta property="og:image:width" content="1200"><br><meta property="og:image:height" content="630">
真正卡住人的往往不是怎么写标签,而是图片 URL 在构建、部署、CDN 缓存、跨域策略之间悄悄失效——每次改完务必用真实链接跑一遍 Facebook Debugger。











