网站分享至Facebook时og:image无法显示求技术解决

问题背景 #

已配置符合规范的Open Graph元数据：

<meta property="fb:app_id" content="123456789"/>
<meta property="og:type" content="website"/>
<meta property="og:image" content="http://www.example.com/images/og2.jpg"/>
<meta property="og:image:secure_url" content="https://www.example.com/images/og2.jpg"/>
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:title" content="my title"/>
<meta property="og:description" content="my description."/>
<meta property="og:image:width" content="1200"/>
<meta property="og:image:height" content="630"/>

Facebook分享调试工具能抓取到正确的图片信息，但工具内及实际分享场景均不显示图片；第三方OG检查工具可正常显示图片，多次重新抓取无效。

可行解决步骤 #

• 检查图片缓存与CDN

  • 修改图片文件名（如改为og2-new.jpg）并更新OG标签路径，强制Facebook抓取新资源，避免旧缓存干扰。
  • 若使用CDN，刷新节点缓存，确保Facebook爬虫IP无访问限制。

• 验证图片可访问性

  • 用Facebook爬虫UA模拟访问图片，命令示例：

    curl -A "facebookexternalhit/1.1" http://www.example.com/images/og2.jpg
    

    确认返回正常图片内容，无404、500或跳转。
  • 检查robots.txt，确保User-agent: facebookexternalhit未被禁止抓取图片路径。

• 调整OG标签配置

  • 将og:image相关标签移至所有OG标签的最前方，优先被爬虫读取。
  • 移除og:image:type标签，仅保留og:image、og:image:secure_url、og:image:width、og:image:height。

• 测试图片格式与大小

  • 临时替换为PNG格式图片，排查JPG编码（如渐进式JPG）导致的解析问题。
  • 确保图片文件大小不超过8MB，超过则压缩后重新上传。

• 核对App ID配置

  • 确认fb:app_id对应的Facebook应用已完成验证，且网站域名已添加至应用的平台域名列表中。

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