mcpField
O
og-images

og-images

github.com/richtabor设计与 UI7351 次安装29 周前更新
代码仓库

关于 og-images

这项技能介绍如何在 Next.js 中用 `next/og` 和 `ImageResponse` 生成动态 OpenGraph 与 Twitter 图片，面向制作社交分享卡片的开发者，涵盖文件路由和 API 路由。

主要功能

  1. 01文件路由与 API 路由方案
  2. 02OpenGraph 和 Twitter 图片尺寸
  3. 03动态标题与元数据接入
  4. 04布局、字体和可选品牌元素指引
  5. 05Satori 样式要求

适用场景

  1. 01为静态页面生成分享卡片
  2. 02为 CMS 内容创建图片
  3. 03通过元数据添加社交图片
  4. 04开发时预览图片路由

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/richtabor/agent-skills --skill og-images

安装后在 Claude Code 中输入/og-images确认已加载。

详细介绍

为 Next.js 创建分享图片

使用 next/og ImageResponse 生成动态 OpenGraph（1200x630）和 Twitter（1200x600）图片。

选择实现方式

  • 基于文件的路由（app/opengraph-image.tsx）：最适合标题在构建时已确定的静态页面。导出 runtime、alt、size、contentType 和默认的 Image 函数。
  • API 路由（app/api/og/route.tsx）：最适合动态内容（博客文章、CMS）。接受 slug 和／或 title 作为查询参数。在元数据中通过 generateMetadata() 引用。

这两种实现方式都使用 export const runtime = "edge"。

文件命名约定

文件用途尺寸
opengraph-image.tsxFacebook、LinkedIn、iMessage1200x630
twitter-image.tsxTwitter/X 卡片1200x600
app/api/og/route.tsx动态 API 路由1200x630

将基于文件的路由放在对应的路由目录中（例如，/about 对应 app/about/opengraph-image.tsx）。

布局模式

  • 使用 flexDirection: "column" 和 justifyContent: "space-between"，将内容与品牌标识分开
  • 标题和副标题（例如作者姓名）放在左上方，并使用纵向排列的 flex 列
  • 标题：字号较大、字重为粗体或中等、颜色较深
  • 副标题：字号相同或更小、字重较轻、颜色较淡（例如 #888）
  • 文本左对齐，使用 textWrap: "balance"，并通过 maxWidth 限制宽度
  • 大字号下使用 letterSpacing: "-0.02em"，营造紧凑的编辑风格
  • 内边距：在 1200x630 图片中，四周使用 48px 效果不错

头像／Logo（可选）

如果项目有头像或 Logo，可使用 justifyContent: "flex-end" 的 flex 容器将其放在右下角。通过 fetch + arrayBuffer 加载图片，并将其转换为 base64 数据 URI 作为 src。圆形头像使用 borderRadius: "50%"。将已加载的资源缓存到 Map 中，避免重复获取。

自定义字体

使用 new URL("../../../public/fonts/YourFont.ttf", import.meta.url) 从 public/fonts/ 加载 .ttf 文件。通过 fonts 选项将 ArrayBuffer 传给 ImageResponse。首次加载后缓存字体缓冲区。在字体配置中，将 weight 与实际字体文件的字重保持一致。

标题大小写

如果标题来自 CMS，请应用智能标题大小写规则：

  • 小写处理虚词（a、an、the、and、but、for、in、of 等），除非位于标题开头或结尾
  • 始终正确大写品牌名称（WordPress、JavaScript、GitHub、macOS 等）
  • 将已知缩写词大写（AI、API、CSS、HTML、UI、UX）
  • 处理连字符连接的单词时，分别将每个部分的首字母大写

元数据集成

在 generateMetadata() 中引用 OG 路由：

export function generateMetadata({ params }) {
  return {
    openGraph: {
      images: [`/api/og?slug=${params.slug}`],
    },
  };
}

对于静态页面，直接传入标题：/api/og?title=About。

Satori 规则

这些是 next/og 渲染引擎（Satori）的硬性要求：

  1. 每个元素都需要 display: "flex"——这是唯一可用的布局模式
  2. 仅使用内联样式——不使用 CSS 类、外部样式表或 CSS 变量
  3. 所有文本都必须放在元素中，并显式设置样式属性
  4. 使用十六进制颜色——不使用 rgb()、hsl() 或 CSS 变量
  5. 较旧版本不支持 gap——使用前先测试；必要时改用 margin

常见问题

问题解决方案
文本未渲染为文本包装元素添加 display: "flex"
布局错乱确保所有容器都设置了 display: "flex"
颜色不正确使用十六进制颜色，而非 CSS 变量
字体未加载检查路由文件到 public/fonts/ 的相对路径
图片未显示转换为 base64 数据 URI，不要使用相对路径

测试

开发期间，可直接在浏览器中访问路由进行预览：

http://localhost:3000/api/og?title=Hello+World

构建后，检查构建输出，确认路由已注册为动态路由（f 前缀）。

评论

支持 Markdown