用途
og-image 用于实现动态 Open Graph 图片和完整的社交元标签栈，让一个路由覆盖所有页面。当分享链接缺少准确或专业的预览时使用，可解决链接被分享时预览显示异常的问题。
主要能力
该技能按阶段推进：
阶段 1：检测技术栈 检查代码库，确认框架类型（Next.js App Router / Pages Router / Astro / Remix / 静态 HTML）、现有元标签（在布局文件中搜索 og:image、twitter:card）、以及需要逐页 OG 的动态页面（博客文章、产品页、技能页等）。如果元标签已存在，先审计再修改。
阶段 2：框架专属配置
Next.js App Router（推荐路径）：创建 app/api/og/route.tsx，使用 next/og 的 ImageResponse，设置 runtime 为 edge，通过 searchParams 读取 title 和 description，返回 1200×630 的图片。在 app/layout.tsx 中配置 metadata，包括 metadataBase、openGraph 和 twitter 字段。动态页面通过 generateMetadata 逐页覆盖。
Next.js Pages Router：创建 pages/api/og.tsx，使用相同的 ImageResponse 逻辑，通过 next/head 在 _app.tsx 或各页面添加元标签。
Astro：安装 satori 和 @resvg/resvg-js，创建 src/pages/og/[...slug].png.ts 端点，用 satori 生成 PNG buffer 并以 image/png 返回，在 src/layouts/Layout.astro 的 head 中添加元标签。
静态 HTML：生成一张静态 og-image.png（1200×630）并引用。对于多页静态站点，可考虑在构建时生成逐页 OG 图片。
阶段 3：必需元标签 每个页面都需要 Open Graph 标签（og:type、og:url、og:title、og:description、og:image、og:image:width、og:image:height）和 Twitter/X 标签（twitter:card、twitter:title、twitter:description、twitter:image）。常见错误包括：og:image 使用相对 URL、设置了 og:image 但未设置 twitter:image、缺少 og:image:width 和 :height、Next.js 中未设置 metadataBase。
阶段 4：设计规则 图片在桌面端以 1200×630 渲染，移动端会被缩略图裁剪。文字需在 300px 宽度下可读，内容保持在中心 80% 以内，推荐深色背景，标题 48-64px 粗体，描述 24-32px 低透明度，对比度至少 4.5:1。
阶段 5：验证 部署后将 URL 粘贴到 Twitter Card Validator、LinkedIn Post Inspector、Facebook Debugger 等工具验证，也可在 Slack 频道中快速检查。验证清单包括：OG 图片路由返回有效图片、基础布局中设置了 og:title/og:description/og:image、设置了 og:image:width 和 :height、twitter:card 设为 summary_large_image、twitter:image 已设置、og:image URL 为绝对路径、动态页面有逐页 og:image、图片在 300px 缩略图宽度下可读、已在验证工具中确认。
使用方式
根据项目框架选择对应配置路径，按阶段逐步实施：先检测技术栈，再进行框架专属设置，然后注入必需元标签，遵循设计规则，最后部署并验证。
适用场景
适用于需要为分享链接提供专业预览图的网站，包括博客、产品页、技能页等需要逐页 OG 图片的动态页面，以及静态站点。
限制
资料未提供关于收费、价格、平台支持范围或效果保证的具体信息。