JavaScript实现Facebook分享轮播当前图时og:image缓存问题咨询

• 核心原因：Facebook的Open Graph缓存机制会对每一个og:url对应的元数据做最长30天的持久化缓存，仅在FB.ui参数中传入动态的og:image但og:url不变的情况下，Facebook会优先读取已缓存的该URL对应元数据，不会使用接口传入的动态参数。就算给页面URL加了GET参数，只要该带参数URL本身的页面OG标签和传入参数不一致，或是Facebook已经爬取过该带参数URL，依旧会出现缓存问题。
• 修复方案1：绑定唯一og:url与对应OG元数据
  每个轮播激活图对应唯一的og:url，比如当前激活轮播图ID为2时，og:url设置为https://example.com/?carousel_id=2，同时该带参数的URL对应的页面HTML中，内置的og:url、og:title、og:description、og:image标签要和FB.ui中传入的参数完全一致，确保Facebook爬取页面时能拿到最新的对应内容。
• 修复方案2：给图片资源加唯一标识参数
  给og:image的地址末尾加上和当前轮播图绑定的唯一参数，比如https://assets.codepen.io/1072415/amy-humphries-moOMLIZlUaM-unsplash.jpg?carousel_id=2，让Facebook识别为全新的图片资源，跳过旧的图片缓存。
• 修复方案3：替换分享接口类型
  如果不想修改页面OG标签，可以将share_open_graph方法替换为feed方法，该方法支持直接传递动态的分享内容，不会依赖Facebook的OG缓存，示例代码如下：

FB.ui({
  method: 'feed',
  link: 'https://example.com/?carousel_id=2', // 分享落地页链接
  name: 'test title',
  description: 'test description',
  picture: 'https://assets.codepen.io/1072415/amy-humphries-moOMLIZlUaM-unsplash.jpg?carousel_id=2'
});

优化后完整代码示例（保留share_open_graph方案） #

// currentCarouselId为当前激活轮播图的唯一ID
const currentCarouselId = 2;
FB.ui({
  method: 'share_open_graph',
  action_type: 'og.shares',
  action_properties: JSON.stringify({
    object: {
      'og:url': `https://example.com/?carousel_id=${currentCarouselId}`,
      'og:title': 'test title',
      'og:description': 'test description',
      'og:image' : `https://assets.codepen.io/1072415/amy-humphries-moOMLIZlUaM-unsplash.jpg?carousel_id=${currentCarouselId}`
    }
  })
});

内容的提问来源于stack exchange，提问作者Maxym Yurchenko