页面加载后og:image属性变更时如何通知iOS系统正常识别

苹果系统的元数据抓取器（包括信息应用、Safari分享预览用的抓取逻辑）不会执行页面的JavaScript代码，仅会读取页面初始请求返回的静态HTML内容，所以客户端异步修改og:image的content属性不会被抓取到，可通过以下方案解决：

方案1：服务端直接渲染 og:image 内容 #

这是兼容性最好的方案，所有社交平台、系统分享的抓取逻辑都支持：

• 如果你使用SSR框架（Next.js、Nuxt.js等），直接在服务端渲染阶段根据页面参数生成完整的图片URL，填充到og:image的content属性中
• 如果你使用后端模板引擎（Jinja2、EJS、PHP模板等），在HTML生成阶段就把对应图片地址写入og标签，不要留空等待客户端更新
• 动态参数依赖的图片可以直接通过服务端拼接CDN地址，比如根据商品ID生成https://cdn.example.com/og/product-12345.png直接写入标签

方案2：静态og:image地址搭配服务端重定向 #

如果无法修改现有服务端渲染逻辑，可以用固定的服务端地址作为初始og:image值：

• 初始HTML中的og:image直接填写服务端接口地址，带上页面唯一标识参数，比如https://example.com/api/og-image?pageId=123
• 服务端收到该接口请求时，先判断请求UA是否为苹果元数据抓取器，符合条件则直接302重定向到对应的实际图片地址，苹果抓取器支持重定向后的图片读取
• 普通用户访问该地址时可以返回占位图或者直接重定向到站点首页

方案3：纯静态站点使用预渲染 #

如果你的站点是纯前端SPA，没有服务端渲染能力：

• 可以使用SSG（静态站点生成）功能，在构建阶段就把所有页面的og:image值预填充到静态HTML中
• 也可以接入预渲染服务，针对爬虫的请求返回已经注入好og标签的静态HTML内容，普通用户访问还是走正常的客户端渲染逻辑

注意事项 #

• og:image需使用HTTPS协议的绝对地址，不能使用相对地址、HTTP地址或者本地调试地址，否则苹果抓取器会直接忽略
• 建议图片尺寸保持1200*630px（1.91:1比例），符合苹果分享预览的尺寸要求，避免出现裁剪或者渲染失败的问题
• 可以通过服务端日志筛选UA包含AppleWebKit和facebookexternalhit的请求，确认苹果抓取器是否拿到了正确的图片地址

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