用途:在 Nuxt 应用中为页面生成社交分享图(Open Graph / Twitter 卡片图),把 Vue 组件渲染为 PNG,并自动写入 og:image、twitter:image 元数据。需要 Nuxt ^4.6.1 || ^5.0.0、Unhead 3.4.2+,且必须开启 SSR(ssr:false 只警告不生效)。文档见 https://nuxtseo.com/docs/og-image。
主要能力:仅调用 defineOgImage() 的页面才会生成图片元数据;defineOgImage、defineOgImageScreenshot、getOgImagePath 自动导入,服务端自动导入 getOgImageUrl。components/OgImage/ 下的 .vue 文件即模板,文件名后缀决定渲染器:Card.takumi.vue、Card.satori.vue、Card.browser.vue,无后缀无效。默认尺寸 1200×600,可用 ogImage.defaults.height 修改。运行时 URL 带签名,篡改或无签名返回 403;查询参数覆盖会被忽略。预渲染页面输出静态文件到 /_og/s/,服务端渲染走 /_og/d/。内置 Inter 400/700 与 emoji 字体。
使用方式:若使用 @nuxtjs/seo v6 已内置,只需配置 ogImage 键,勿重复添加;否则运行 npx nuxt module add nuxt-og-image,并自行安装渲染器:@takumi-rs/core(推荐)或 satori + @resvg/resvg-js,边缘运行时用 Wasm 包,可用 pnpm exec nuxt-og-image enable takumi。必须设置 site.url,否则预渲染页得到相对 og:image,爬虫需要绝对 URL。在页面 setup 中调用 defineOgImage('Card', { title: 'Hello' }),第二个参数是组件 props,第三个参数放 width、alt、cacheMaxAgeSeconds 等选项;用 route rules 按路径组配置,ogImage: false 可移除图片。自定义字体须经 @nuxt/fonts 且每个 family 设 global: true。Cloudflare Workers 需注意 ASSETS 绑定与缓存配置,参考 https://nuxtseo.com/docs/og-image/guides/cloudflare。
适用场景:博客、站点等需要社交分享预览图的 Nuxt 项目。
限制:模板 renderer 未安装会导致生产构建失败;社区模板(如 NuxtSeo)仅开发可用,需 eject 后才能进生产;zeroRuntime 会移除运行时处理,需预渲染所有相关页面;defineOgImageScreenshot 需开启 ogImage.browser 并安装 playwright-core;客户端组件中调用 defineOgImage 会报错或不渲染;滚动或多实例部署需稳定密钥,设置 NUXT_APP_SECRET(生成命令 pnpm exec nuxt-og-image generate-secret,缺少或短于 32 字符时请求返回 500);通配 route rule 搭配 swr/isr/cache 会破坏 /_og/ 路由。v7 与 v6 存在多处不兼容变更,如旧 secret 配置移除、Satori 布局变化、Takumi v1 移除等。