如何为带参数的动态URL配置Facebook动态预览图片

• 动态生成对应参数的og:image元标签
  核心是让不同参数的URL返回的HTML里，<meta property="og:image">的content值跟当前页面内容匹配。

  • 如果是服务器端渲染的页面（比如PHP、Node.js后端），直接读取URL里的p参数，根据参数值输出对应的图片地址。比如：
    当p=ja时，输出：

    <meta property="og:image" content="https://seaofpo.vispo.com/images/ja-preview.jpg">
    

    当p=mp时，输出：

    <meta property="og:image" content="https://seaofpo.vispo.com/images/mp-preview.jpg">
    

  • 如果是前端单页应用（SPA），纯前端JS动态修改meta标签没用——Facebook的爬虫不会执行JS，得做服务端渲染（SSR）或者预渲染，让每个动态URL对应的页面在服务器端就生成好正确的og:image标签。

• 符合Facebook的图片要求
  用来做预览的图片得满足：尺寸至少1200x630像素，格式用JPG或PNG，文件大小不超过8MB，不然Facebook可能会忽略或者用默认图。

• 处理缓存问题
  Facebook会缓存抓取到的页面元数据，哪怕你已经改了og:image，旧的预览图可能还会显示。这时候用Facebook的分享调试工具刷新一下对应URL的缓存，就能看到新的预览图了。

内容的提问来源于stack exchange，提问作者Jim Andrews