# OG形象设计设计有效的开放图谱图像，使链接在跨社交平台共享时脱颖而出。该技能涵盖尺寸、布局、版式、颜色、品牌标记、HTML/CSS 模板和元标记集成 - 独立于任何特定的图像生成工具。 ## 品牌代币系统在生成任何 OG 图像之前，建立（或定位）项目的品牌代币。如果不存在，请定义它们。此技能中的每个模板都会引用这些标记 - 切勿直接在模板中对原始颜色值或字体大小进行硬编码。 ### 代币结构品牌代币（原始值） └── 语义标记（目的驱动的别名） └── 模板标记（OG 图像特定绑定） ### 定义品牌标记在项目级别将令牌存储为平面对象（JSON、TypeScript const 或 CSS 自定义属性）。代理应首先在代码库中查找现有令牌（CSS 变量、Tailwind 主题、设计系统配置），然后将它们映射到下面的 OG 令牌格式。常量 ogBrand = { // ──── 颜色──────────────────────────────────────────── 颜色：{ // Primitives——原始品牌调色板墨水：“#0a0a0b”，论文：“#fafaf9”，品牌：“#6d5cff”，品牌之光：“#a18aff”，口音：“#00d4aa”，静音：“rgba（255,255,255,0.6）”，危险：“#ef4444”，表面：“rgba(255,255,255,0.08)”, 边框：“rgba(255,255,255,0.12)”, // 语义——颜色的作用背景：“#0a0a0b”， bgGradientFrom: "#0f0a1a", bgGradientTo: "#1a0f2e", 文本：“#fafaf9”， textSecondary: "rgba(255,255,255,0.7)", text第三级：“rgba(255,255,255,0.45)”, 徽章Bg：“#6d5cff”，徽章文本：“#ffffff”， }, // ──── 版式 ──────────────────────────────────────── 类型：{ fontFamily: "'Inter', system-ui, -apple-system, sans-serif", // 音阶遵循模数比例（1.25 — 大三度）标题: { 大小: 56, 粗细: 800, 行高: 1.15, letterSpacing: "-0.02em" }, 字幕：{ 大小：24，粗细：400，行高：1.4，字母间距：“0” }，标签：{ 大小：16，粗细：700，行高：1，letterSpacing：“0.08em”，textTransform：“大写”}，元：{大小：18，粗细：500，行高：1，字母间距：“0”}， }, // ──── 间距──────────────────────────────────────────── 空间：{ pad: 60, // 外部填充（最小 40，最好 60） gapStack: 16, // 文本元素之间的垂直间隙 gapInline: 12, // 水平间隙（例如徽章图标+文本）徽章PadX：16，徽章PadY：8， }, // ──── 半径 ────────────────────────────────────────────── 半径：{ 徽章：6个，标志：16，卡：24， }, // ──── 尺寸 ──────────────────────────────────────── 画布：{ 宽度：1200，身高：630， }, 作为常量； ### 在模板中使用令牌模板中的每个内联样式都应该引用标记路径，而不是原始值： // ✅ 好 — 参考品牌代币 // ❌ 错误 — 硬编码值

### 使代币适应现有品牌当用户已经拥有品牌/设计系统时： 1. **扫描代码库**以获取 CSS 变量（`--color-*`、`--font-*`）、Tailwind `@theme` 块或设计令牌文件。 2. **将现有值**映射到上面的 `ogBrand` 结构中。 3. **填补空白** - OG 图像需要特定的尺寸（48-64 像素标题），这在网页设计系统中可能不存在。从品牌的字体规模中得出它们。 4. **验证对比度** — 检查“color.text”相对于“color.bg”是否通过 WCAG AA（最低 4.5:1）。 OG 图像在小预览尺寸下必须清晰可见。 ### 类别主题对于内容丰富的网站（博客、文档、课程），使用按类别覆盖扩展令牌集：常量类别 = { 工程：{badgeBg：“#3b82f6”，badgeText：“#fff”，gradientFrom：“#0c1929”，gradientTo：“#162744”}，设计：{badgeBg：“#ec4899”，badgeText：“#fff”，gradientFrom：“#1a0a14”，gradientTo：“#2e1225”}，产品：{badgeBg：“#22c55e”，badgeText：“#000”，gradientFrom：“#0a1a0f”，gradientTo：“#0f2e18”}，教程：{badgeBg：“#f59e0b”，badgeText：“#000”，gradientFrom：“#1a150a”，gradientTo：“#2e2510”}，作为常量；该代理在渲染之前将类别覆盖合并到基础“ogBrand.color”中，使所有类别的版式和布局保持相同。 ## 生成方法 OG 图像通常是从渲染为静态图像的 HTML/CSS 生成的。选择适合项目的方法：方法|何时使用 ---|--- **Next.js`ImageResponse`** (Satori + `@vercel/og`) | Next.js 应用程序 — 在边缘生成，无需浏览器 **木偶师/剧作家截图** |任何 Node.js 项目 — 完整的浏览器渲染保真度 **Satori 独立版** |无需浏览器的轻量级 JSX-to-SVG-to-PNG **HTML 到图像 CLI/API** | CI 管道、无服务器或任何语言 **静态设计工具导出** |一次性图像，手动工作流程 **人工智能图像生成** |无需考虑文本布局的摄影或说明性视觉效果无论采用哪种方法，下面的 HTML/CSS 模板和设计规则都普遍适用。 ## Satori CSS 兼容性大多数 OG 图像管道使用 Satori（“@vercel/og”和“next/og”背后的引擎）。 Satori 支持 CSS 的**子集**。了解哪些有效、哪些无效可以防止调试会话。 ### 支持（可以安全使用）类别 |属性 ---|--- **布局** | `显示`（弯曲，无），`位置`（相对，绝对），`上/右/下/左`，`溢出` **弹性盒** | `flexDirection`、`flexWrap`、`flexBasis`、`flexGrow`、`flexShrink`、`justifyContent`、`alignItems`、`alignContent`、`alignSelf`、`gap` **尺码** | `宽度`、`高度`、`minWidth`、`minHeight`、`maxWidth`、`maxHeight` **间距** | `边距*`、`填充*` **版式** | `fontFamily`、`fontSize`、`fontWeight`、`fontStyle`、`lineHeight`、`letterSpacing`、`textAlign`、`textDecoration`、`textTransform`、`textOverflow`、`textShadow`、`wordBreak`、`whiteSpace`、`textWrap`、`lineClamp` **颜色和背景** | `color`、`backgroundColor`、`backgroundImage`（线性渐变、径向渐变、url）、`backgroundSize`、`backgroundPosition`、`backgroundRepeat`、`backgroundClip`、`opacity` **边框** | `border*`、`borderRadius`、`borderColor`、`borderStyle` （实线、虚线） **效果** | `boxShadow`、`filter`、`transform`（仅限 2D）、`transformOrigin`、`clipPath`、`mask*` ### 不支持（会破坏或被忽略）特色|解决方法 ---|--- `显示：网格` |使用嵌套的“display: flex”和“flexDirection” `计算()` |预先计算值或使用固定大小 `z 索引` |具有 DOM 顺序和“位置：绝对”的图层 3D 变换 |仅使用 2D“变换” `@media` 查询 |不需要 — OG 图像固定为 1200×630 CSS 变量 (`var()`) |内联解析值 `动画`、`过渡` |静态图像——无运动高级排版（字距调整、连字、OpenType）|不可用 `显示：内联`、`显示：块` |一切都使用“display: flex” **关键规则：** Satori 中的每个元素都必须使用 `display: flex` （这是默认值）。 Satori 不支持块或内联布局。 ## 字体加载 ### 悟 / `@vercel/og` Satori 需要字体数据作为“ArrayBuffer”。在模块级别加载字体以避免每次请求时重新获取： // 在模块范围内加载一次常量 interBold = fetch( 新的 URL("./fonts/Inter-Bold.ttf", import.meta.url) ).then((res) => res.arrayBuffer()); const 间正则 = fetch( 新的 URL("./fonts/Inter-Regular.ttf", import.meta.url) ).then((res) => res.arrayBuffer()); 导出默认异步函数 OGImage() { 返回新的图像响应（ (

), { ...ogBrand.canvas, 字体：[ { 名称：“Inter”，数据：await interBold，权重：800，样式：“正常”}， { 名称：“Inter”，数据：await interRegular，权重：400，样式：“正常”}， ], } ）； } **仅**加载您的品牌令牌中引用的权重。每种字体都会向响应添加约 100–400 KB。 ### Google 字体（远程）常量字体 = 获取（ “https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap” ).then((r) => r.text()) .then((css) => { const url = css.match(/src: url$(.+?)$/)?.[1]; 返回网址？ fetch(url).then((r) => r.arrayBuffer()) : null; }); ### 木偶师/剧作家无需特殊加载 - 在系统上安装字体或在 HTML 中使用“@font-face”。完整的浏览器渲染可以访问所有 CSS 功能和字体功能。 ## 平台规格平台|尺寸|纵横比|最大尺寸 |格式 ---|---|---|---|--- 脸书 | 1200 × 630 像素 | 1.91:1 | 8MB | JPG、PNG Twitter/X (`summary_large_image`) | 1200 × 628 像素 | 1.91:1 | 5 MB | JPG、PNG、WEBP、GIF Twitter/X（`摘要`）| 800 × 418 像素 | 1.91:1 | 5 MB | JPG、PNG 领英 | 1200 × 627 像素 | 1.91:1 | 5 MB | JPG、PNG 不和谐 | 1200 × 630 像素 | 1.91:1 | 8MB | JPG、PNG 松弛| 1200 × 630 像素 | 1.91:1 | — | JPG、PNG 信息 | 1200 × 630 像素 | 1.91:1 | — | JPG、PNG **通用目标：1200 × 630 像素、PNG 或 JPG，小于 1 MB（绝对最大小于 5 MB）。** ## 模板选择当智能体需要生成OG图像时，使用这个决策树：这是产品发布还是公告？ → 产品/启动模板（居中布局）它是博客文章还是文章？ → 博客文章模板（左对齐，类别徽章）它是教程还是操作指南？ → 教程模板（徽章+步骤指示器）是 API 文档还是技术参考？ → 文档模板（图标块+版本）该品牌是否需要醒目的标志？ → 带有徽标模板（文字左，徽标右）以上都没有？ → 博客文章模板（最通用的默认） ## 黄金布局 ┌──────────────────────────────────────────────────┐ │ │ │ ┌────────────────────────────────┐ ┌────────┐ │ │ │ │ │ │ │ │ │ 标题（最多 60 个字符） │ │ 标志/ │ │ │ │ ──────────────────── │ │ 视觉│ │ │ │ 副标题（最多 100 个字符） │ │ │ │ │ │ │ │ │ │ │ │ 作者·站名 │ └───────┘ │ │ └──────────────────────────────────┘ │ │ │ └──────────────────────────────────────────────────┘ 1200 × 630 像素这是最可靠的模式：左侧以文本为主，右侧以视觉重点为主。居中单列布局也适用于公告和产品发布。 ## 设计规则 ### 版式比例品牌标记“类型”对象定义了范围。在这些范围内：角色 |尺寸范围 |重量 |用途 ---|---|---|--- 标题 | 48–64 像素 | 700–900 |主要标题。缩小长标题。字幕| 20–28 像素 | 400 |支持文字、描述。标签| 14–18 像素 | 600–700 |类别徽章、标签、大写口音。元 | 16–20 像素 | 400–500 |作者、日期、站点名称、版本。 **动态大小规则：** 如果标题超过 40 个字符，则减少到 48 像素。如果 64 像素超过 25 个字符，请减少至 56 像素。永远不要低于 44 px——而是用省略号截断。函数 getTitleSize(标题: 字符串): 数字 { const len = 标题.长度; if (len <= 25) 返回 64; if (len <= 40) 返回 56; if (len <= 55) 返回 48；返回44； } ### 安全区 ┌──────────────────────────────────────────────────┐ │ ┌────────────────────────────────────────────┐│ │ │ 所有边缘的填充为 40–60 px │ │ │ │ │ │ │ 内容在这里 │ │ │ │ │ └────────────────────────────────────────────┘│ └──────────────────────────────────────────────────┘ * 所有边缘的最小填充量为 40 像素（首选 60 像素）。 * 某些平台会裁剪边缘或添加圆角。 * 切勿将关键文本放在外部 5% 中。 ### 颜色和背景背景类型 |何时使用 ---|--- 纯色品牌色|一致的系列、企业形象渐变 |现代感十足，引人注目带有深色覆盖层的照片|博客文章、编辑内容深色背景|更好的对比度，在 Feed 中脱颖而出在社交信息流中，深色背景优于浅色背景——大多数信息流都有浅色背景，因此深色 OG 图像会产生对比度并吸引眼球。 ### 背景图案库这些模式在 Satori 中起作用，无需外部图像即可增加视觉深度。 **对角渐变（默认）：** 背景：线性渐变（135deg，var（--bg-from），var（--bg-to））； **径向聚光灯：** 背景：径向渐变（椭圆 80% 60% at 30% 50%，rgba(109,92,255,0.25)，透明），线性渐变（135deg，#0f0a1a，#1a0f2e）； **双径向发光：** 背景：径向渐变（圆形在20％40％，rgba（109,92,255,0.3），透明50％），径向渐变（圆形在80％60％，rgba（0,212,170,0.2），透明50％），#0a0a0b； **网格渐变（3 点）：** 背景: 径向渐变(at 0% 0%, rgba(109,92,255,0.4) 0%, 透明50%), 径向渐变(at 100% 0%, rgba(0,212,170,0.3) 0%, 透明50%), 径向渐变(at 50% 100%, rgba(239,68,68,0.2) 0%, 透明 50%), #0a0a0b; **微妙的噪音（通过 SVG 数据 URI — 在 Satori 中有效）：** > **注意：** SVG 滤镜噪声可能无法在所有 Satori 版本中呈现。先测试；回到纯色或渐变背景。 ## HTML/CSS 模板所有模板都使用“display: flex”来实现 Satori 兼容性。外部“div”始终恰好是 1200 × 630 像素。模板引用品牌令牌值 - 将文字值替换为项目的令牌。 ### 博客文章

工程

我们如何将构建时间缩短 80%

深入探讨 CI/CD 优化

yoursite.com

### 产品/发布公告

现已推出

产品名称 2.0

此处为标语。零配置。

### 教程/操作方法

教程

使用 Node.js 在 10 分钟内构建 REST API

包含代码示例的分步指南

### 文档/技术

文档

身份验证 API 参考

v2.0 — 2026 年 3 月更新

### 带有徽标（右侧）

此处为您的标题

支持描述文字

yoursite.com

☐

当渲染器支持时，将占位符方块替换为指向实际徽标的“”标记。 ## 调整模板自定义这些模板时： 1. **将占位符文本**替换为实际标题、副标题和品牌。 2. **交换渐变颜色**以匹配 `ogBrand.color.bgGradientFrom` 和 `bgGradientTo`。 3. **使用“getTitleSize()”函数应用动态标题大小调整**。较长的标题需要较小的尺寸。 4. **使用类别主题图将徽章颜色**与内容类别相匹配。 5. **截断长文本**而不是将字体缩小到最小尺寸以下。 60 个字符的省略号比 36 像素的文本更好。 6. **验证所有`display: flex`** — 如果针对 Satori，每个容器元素都必须是 Flex 容器。 ## Next.js 集成（带有品牌令牌） // lib/og-brand.ts — 导出令牌以在 OG 路由中使用 export const ogBrand = { /* ...上面的令牌对象... */ }; // 应用程序/博客/[slug]/opengraph-image.tsx 从“next/og”导入{ImageResponse}；从“@/lib/og-brand”导入{ogBrand}；导出常量运行时=“边缘”；导出 const alt = "博客文章"; 导出常量大小= ogBrand.canvas; 导出常量 contentType = "image/png"; 导出默认异步函数 Image({ params }: { params: { slug: string } }) { const [interBold, interRegular] = 等待 Promise.all([ fetch(new URL("../../../fonts/Inter-Bold.ttf", import.meta.url)).then((r) => r.arrayBuffer()), fetch(new URL("../../../fonts/Inter-Regular.ttf", import.meta.url)).then((r) => r.arrayBuffer()), ]); const { 颜色、类型、空间 } = ogBrand; 返回新的图像响应（（

<跨度样式={{ 字体大小：类型.标签.大小，字体重量：类型.标签.重量， letterSpacing: type.label.letterSpacing, textTransform: type.label.textTransform, 背景：color.badgeBg，颜色：color.badgeText，填充：`${space.badgePadY}px ${space.badgePadX}px`, borderRadius：ogBrand.radius.badge， }}> 类别 <跨度样式={{ 字体大小：类型.标题.大小，字体粗细：类型.标题.重量， lineHeight：类型.title.lineHeight，letterSpacing：类型.title.letterSpacing， marginTop: space.gapStack, }}> 在此发布标题 <跨度样式={{ 字体大小：类型.字幕.大小，字体粗细：类型.字幕.重量，颜色：color.textSecondary，marginTop：space.gapStack， lineHeight: type.subtitle.lineHeight, }}> 副标题或描述

), { ...尺寸，字体：[ { 名称："Inter"，数据：interBold，权重：800，样式："正常" }, { name: "Inter", data: interRegular, 权重: 400, style: "normal" }, ], } ）； } ## OG 元标签参考 <元属性=“og：图像：宽度”内容=“1200”/> <元属性=“og：图像：高度”内容=“630”/> ### Twitter 卡片类型卡片类型|图像尺寸|使用时 ---|---|--- `总结` | 800 × 418（小缩略图）|简短更新、链接 `摘要大图像` | 1200×628（全宽）|博客文章、文章、公告总是更喜欢“summary_large_image”——大图像的参与度显着提高。 ## 测试和调试使用以下工具在部署后验证 OG 映像：工具|网址 ---|--- Facebook 共享调试器 | `developers.facebook.com/tools/debug/` Twitter/X 卡验证器 | `cards-dev.twitter.com/validator` LinkedIn 岗位督察 | `linkedin.com/post-inspector/` OpenGraph.xyz | `opengraph.xyz` ## 质量检查表在交付 OG 映像之前，请验证每一项： * **画布尺寸为 1200 × 630 像素** — 精确尺寸，无舍入 * **文件大小低于 1 MB** — 绝对最大值低于 5 MB * **标题 ≤ 60 个字符** — 如果较长，则用省略号截断 * **标题字体 ≥ 44 px** — 永远不会变小，即使是长标题 * **安全区域内边距 ≥ 40 px** — 所有边最好 60 px * **文本对比度 ≥ 4.5:1** — WCAG AA 对比背景 * **使用的品牌令牌** - 令牌系统之外没有硬编码的颜色或字体大小 * **类别徽章匹配** — 内容类别的正确颜色 * **加载字体** — 提供给 Satori 或为 Puppeteer 安装的自定义字体数据 * **所有元素都使用 `display: flex`** — 如果针对 Satori * **没有不支持的 CSS** — Satori 中没有 `calc()`、`z-index`、网格、CSS 变量 * **图像通过 HTTPS 提供** — 带协议的绝对 URL * **`og:image:width` 和 `og:image:height` 元标记集** — 用于快速展开 * **在至少一个验证器上进行测试** — Facebook Debugger 或 OpenGraph.xyz ## 常见错误错误|问题 |修复 ---|---|--- 根本没有`og:image` |平台显示随机页面元素或空白 |始终设置 `og:image` 文字太小 |移动预览无法阅读 |标题最小 48 像素，宽度 1200 像素浅色背景|迷失在白色/浅色饲料中 |使用深色或饱和背景文字过多 |杂乱无章，势不可挡|坚持标题+副标题+品牌图片太大 (> 5 MB) |某些平台无法加载 |理想情况下优化至 1 MB 以下无安全区填充 |文本在某些平台上被裁剪 |所有边缘的内边距为 40–60 像素 HTTP 图像 URL |许多平台需要 HTTPS |始终通过 HTTPS 提供 OG 图像相对图像路径|外部共享时无法解决 |使用带有协议的完整绝对 URL 缺少 `og:image:width` / `height` |在某些平台上展开速度较慢 |始终包含尺寸提示缓存陈旧图像 |更新后的图像未反映出来 |追加版本查询参数或使用 Facebook 调试器再次抓取每个模板的硬编码颜色|品牌跨页面漂移|使用品牌代币系统每页不同的字体|视觉识别不一致 |将“fontFamily”锁定在品牌令牌中没有动态标题大小 |长标题溢出或变得难以阅读 |使用 getTitleSize() 函数

及形象设计

包含技能