有效og:image配置下Facebook分享不显示图片问题排查（PHP/React）

遗漏排查点 #

• 元标签渲染时机错误
  React单页应用默认走客户端渲染，Facebook爬虫不会完整执行前端JS逻辑。不要通过浏览器开发者工具的Elements面板判断og标签是否存在——该面板展示的是JS执行完成后的DOM结果，必须右键选择「查看网页源代码」，确认服务器直接返回的初始HTML中就包含完整的og配置。如果og:image标签是React hydrate完成后才动态插入head的，爬虫抓取时根本拿不到该标签。
• 图片访问规则不符合爬虫要求
  不要仅以浏览器能否打开图片作为判断依据，以下问题都会导致爬虫无法正常读取图片：
  • 图片尺寸小于200*200px，或文件体积超过8MB，或使用了Facebook不支持的格式（SVG/AVIF/特殊编码的渐进式图片）
  • 图片配置了X-Frame-Options: DENY/SAMEORIGIN响应头，或CSP规则阻止第三方域名加载
  • 站点防盗链规则拦截了无Referer、或UA为爬虫的请求——Facebook爬虫拉取图片时不会携带站点Referer，被防盗链拦截时浏览器可正常访问，但爬虫拿到的是403拦截页
  • WAF、PHP路由规则误将Facebook爬虫（UA标识为facebookexternalhit/1.1）识别为恶意流量，返回异常内容
• og标签配置不完整
  仅配置og:image不足以保证正常识别，以下问题都会触发解析失败：
  • og:image使用相对路径，未填写带https/http协议的完整绝对路径
  • 未配套声明og:image:width、og:image:height属性，爬虫无法提前感知图片尺寸，拉取校验失败概率极高
  • 页面存在多个重复的og:image标签，爬虫优先解析第一个出现的标签，若第一个标签为空或地址错误就会出现空白预览
• 分享链接格式错误
  当前使用的Facebook分享链接末尾存在多余的&符号，部分场景下会导致URL解析异常，拉取到错误的缓存版本。

对应解决方案 #

• 修正元标签渲染逻辑
  把所有og相关标签的输出逻辑移到PHP服务端，在返回初始HTML时就直接把og:title、og:image、og:description、og:url、og:image:width、og:image:height写入<head>区块，不要依赖React客户端动态插入。如果不想做全量SSR，可以单独对爬虫UA做判断，给爬虫返回带完整og标签的静态HTML，普通用户访问仍走原有CSR逻辑即可。
• 调整图片配置适配爬虫规则
  将分享预览图调整为推荐规格：1200*630px、1.91:1比例、sRGB编码的JPEG/PNG格式，文件体积控制在2MB以内；放通facebookexternalhit UA的所有访问限制，关闭该类请求的图片防盗链拦截，移除图片响应头中阻止跨站加载的配置。
• 修正标签与链接格式
  清理页面中重复、无效的og标签，所有og资源地址使用完整绝对路径，补全图片宽高声明；去掉分享链接末尾多余的&，修正后的分享链接格式如下：

  https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.wyomingforsale.net%2Fidx%2Flisting%2FWY-CCBOR%2F22-658%2F3-Pine-Cone-Ln-Moorcroft-WY-82721
  

• 强制刷新Facebook缓存
  所有配置修改完成后，到Facebook分享调试器点击「Scrape Again」按钮强制刷新抓取缓存，Facebook对URL的默认缓存最长可达30天，不手动触发重新抓取会一直使用旧的错误结果。如果多次刷新仍不生效，可以给页面URL拼接临时参数（如?v=2）生成新的地址，重新触发抓取验证。

内容的提问来源于stack exchange，提问作者Andy Wallace