Facebook share_open_graph含og:image时og:description不显示问题咨询

我之前在做Facebook分享功能时也遇到过一模一样的坑，给你几个亲测有效的排查和解决方向：

1. 先确认图片是否符合Facebook的要求 #

Facebook对分享图片的规则卡得很严，一旦图片不达标，不仅图片本身可能不显示，还会连带影响其他属性的渲染：

• 图片必须是公开可访问的，不能有防盗链、需要登录才能查看的限制
• 尺寸建议至少1200x630像素，比例1.91:1（太小或者比例不对的图片会被Facebook自动忽略）
• 格式优先选JPG或PNG，文件大小别超过8MB

你可以先把图片URL直接在浏览器打开，确认能正常加载；再用Facebook的官方共享调试工具验证图片是否符合标准（这个工具还能帮你排查其他og属性的问题）。

2. 换一种属性传递方式：用预定义的页面URL代替手动设置所有og属性 #

直接在action_properties里嵌套所有og属性很容易出现解析冲突，更稳妥的做法是：
在你要分享的目标页面（也就是og:url指向的https://myurl.com）的HTML头部，预先设置好完整的og标签：

<meta property="og:url" content="https://myurl.com" />
<meta property="og:title" content="TITLE" />
<meta property="og:description" content="DESCRIPTION" />
<meta property="og:image" content="https://image.jpg" />

然后在JS代码里只传入这个页面的URL：

FB.ui({
  method: 'share_open_graph',
  action_type: 'og.shares',
  action_properties: JSON.stringify({
    object: 'https://myurl.com'
  })
});

这样Facebook会自动抓取页面上的og属性，避免手动拼接属性时的结构问题，亲测这种方式下图片和描述都能正常显示。

3. 检查JSON字符串的语法正确性 #

有时候看起来没问题的代码，可能在JSON.stringify的时候出现了隐性的语法错误，比如引号不配对、多余的逗号等。你可以先单独打印出转换后的JSON字符串，确认格式正确：

const props = {
  object: {
    'og:url': 'https://myurl.com',
    'og:title': 'TITLE',
    'og:description': 'DESCRIPTION',
    'og:image': 'https://image.jpg'
  }
};
console.log(JSON.stringify(props));

如果JSON格式有问题，Facebook解析失败就会导致部分属性不渲染。

4. 刷新Facebook的缓存 #

Facebook会缓存页面的og属性数据，如果你之前的页面没有正确设置描述，即使现在修改了，缓存可能还没更新。用官方调试工具刷新一下缓存，确保最新的属性被抓取。

内容的提问来源于stack exchange，提问作者And Finally