⚡

OG图像设计Skill og-image-design

OG图像设计技能专注于创建和优化Open Graph（OG）图像，用于社交媒体平台的链接预览和分享。它涵盖平台规格、文本布局、品牌元素、动态生成及SEO优化，适用于博客缩略图、社交卡片等场景。关键词：Open Graph, 社交分享图像, OG图像设计, 前端开发, SEO优化

前端开发 0 次安装 0 次浏览 更新于 3/12/2026

name: og-image-design description: “Open Graph 和社交分享图像设计，包括平台规格、文本放置和品牌元素。覆盖 OG meta 标签、Twitter 卡片、LinkedIn 预览和动态生成。用于：社交分享图像、博客缩略图、链接预览、社交卡片。触发词：og image, open graph, social sharing image, twitter card, social card, link preview image, og meta, sharing preview, social thumbnail, meta image, og:image, twitter:image, linkedin preview” allowed-tools: Bash(infsh *)

OG 图像设计

通过 inference.sh CLI 创建社交分享图像（Open Graph）。

快速开始

curl -fsSL https://cli.inference.sh | sh && infsh login

# 使用 HTML-to-image 生成 OG 图像
infsh app run infsh/html-to-image --input '{
  "html": "<div style=\"width:1200px;height:630px;background:linear-gradient(135deg,#1a1a2e,#16213e);display:flex;align-items:center;padding:60px;font-family:system-ui;color:white\"><div><h1 style=\"font-size:56px;margin:0;line-height:1.2\">How We Reduced Build Times by 80%</h1><p style=\"font-size:24px;opacity:0.8;margin-top:20px\">engineering.yourcompany.com</p></div></div>"
}'

安装说明： 安装脚本 仅检测您的操作系统/架构，从 dist.inference.sh 下载匹配的二进制文件，并验证其 SHA-256 校验和。无需提升权限或后台进程。提供手动安装和验证。

平台规格

平台 尺寸 宽高比 文件大小 格式
Facebook 1200 x 630 px 1.91:1 < 8 MB JPG, PNG
Twitter/X (summary_large_image) 1200 x 628 px 1.91:1 < 5 MB JPG, PNG, WEBP, GIF
Twitter/X (summary) 800 x 418 px 1.91:1 < 5 MB JPG, PNG
LinkedIn 1200 x 627 px 1.91:1 < 5 MB JPG, PNG
Discord 1200 x 630 px 1.91:1 < 8 MB JPG, PNG
Slack 1200 x 630 px 1.91:1 — JPG, PNG
iMessage 1200 x 630 px 1.91:1 — JPG, PNG

通用安全选择：1200 x 630 px，PNG 或 JPG，小于 5 MB。

黄金布局

┌──────────────────────────────────────────────────┐
│                                                  │
│  ┌─────────────────────────────────┐  ┌───────┐  │
│  │                                 │  │       │  │
│  │  标题文本（最多60字符）          │  │ 标志/ │  │
│  │  ───────────────────            │  │ 视觉  │  │
│  │  副标题（最多100字符）           │  │       │  │
│  │                                 │  │       │  │
│  │  作者/网站名称                   │  └───────┘  │
│  └─────────────────────────────────┘             │
│                                                  │
└──────────────────────────────────────────────────┘
  1200 x 630 px

设计规则

文本

规则 值
标题字体大小 48-64px
副标题字体大小 20-28px
最大标题长度 60 字符（某些平台会截断）
最大副标题长度 100 字符
行高 标题 1.2-1.3
字体粗细 标题粗体/黑体，副标题常规
文本对比度 WCAG AA 最低（4.5:1 比率）

安全区域

┌──────────────────────────────────────────────────┐
│  ┌──────────────────────────────────────────────┐│
│  │ 所有边缘 40px 内边距                         ││
│  │                                              ││
│  │ 内容在此区域内                              ││
│  │                                              ││
│  │                                              ││
│  └──────────────────────────────────────────────┘│
└──────────────────────────────────────────────────┘
  • 所有边缘至少 40px 内边距
  • 某些平台裁剪边缘或添加圆角
  • 切勿在外 5% 放置关键文本

颜色

背景类型 何时使用
纯品牌颜色 系列一致、企业
渐变 现代、吸引眼球
带覆盖层的照片 博客文章、编辑内容
深色背景 更好对比度，在信息流中突出

深色背景在社交信息流中表现更佳 — 大多数信息流为白色/浅色背景，深色 OG 图像更显眼。

按内容类型的模板

博客文章

infsh app run infsh/html-to-image --input '{
  "html": "<div style=\"width:1200px;height:630px;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;padding:60px;font-family:system-ui,sans-serif;color:white\"><div style=\"flex:1\"><p style=\"font-size:18px;text-transform:uppercase;letter-spacing:2px;opacity:0.8;margin:0\">工程博客</p><h1 style=\"font-size:52px;margin:16px 0 0;line-height:1.2;font-weight:800\">How We Reduced Build Times by 80%</h1><p style=\"font-size:22px;opacity:0.9;margin-top:16px\">深入探讨我们的 CI/CD 优化</p></div></div>"
}'

产品/发布公告

infsh app run infsh/html-to-image --input '{
  "html": "<div style=\"width:1200px;height:630px;background:#0f0f0f;display:flex;align-items:center;justify-content:center;font-family:system-ui;color:white;text-align:center\"><div><p style=\"font-size:20px;color:#22c55e;text-transform:uppercase;letter-spacing:3px\">现已可用</p><h1 style=\"font-size:64px;margin:12px 0;font-weight:900\">DataFlow 2.0</h1><p style=\"font-size:24px;opacity:0.7\">自动化报告。零配置。</p></div></div>"
}'

教程/如何做

infsh app run infsh/html-to-image --input '{
  "html": "<div style=\"width:1200px;height:630px;background:linear-gradient(to right,#1a1a2e,#16213e);display:flex;align-items:center;padding:60px;font-family:system-ui;color:white\"><div><div style=\"display:inline-block;background:#e74c3c;color:white;padding:8px 16px;border-radius:4px;font-size:16px;font-weight:bold;margin-bottom:16px\">教程</div><h1 style=\"font-size:48px;margin:0;line-height:1.2\">使用 Node.js 在 10 分钟内构建 REST API</h1><p style=\"font-size:20px;opacity:0.7;margin-top:16px\">带代码示例的逐步指南</p></div></div>"
}'

AI 生成视觉 OG

# 当您想要引人注目的视觉而非文本时
infsh app run falai/flux-dev-lora --input '{
  "prompt": "干净专业的社交分享卡片，深色渐变背景，抽象几何形状，现代科技美学，简约，无文本，1200x630 等效宽高比",
  "width": 1200,
  "height": 630
}'

OG Meta 标签参考

<!-- 必需（Facebook、LinkedIn、Discord、Slack） -->
<meta property="og:title" content="标题在此（最多60字符）" />
<meta property="og:description" content="描述（最多155字符）" />
<meta property="og:image" content="https://yoursite.com/og-image.png" />
<meta property="og:url" content="https://yoursite.com/page" />
<meta property="og:type" content="article" />

<!-- Twitter/X 特定 -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="标题在此" />
<meta name="twitter:description" content="描述" />
<meta name="twitter:image" content="https://yoursite.com/og-image.png" />

<!-- 图像尺寸（可选但推荐） -->
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Twitter 卡片类型

卡片类型 图像尺寸 何时使用
summary 800 x 418（小缩略图） 简短更新、链接
summary_large_image 1200 x 628（全宽） 博客文章、文章、公告

除非有特定原因，否则始终使用 summary_large_image — 大图像点击率显著更高。

一致性系统

对于具有多个页面的博客或网站，创建模板系统：

元素 保持一致 变化
背景风格 相同渐变或品牌颜色 —
字体家族 相同字体 —
布局 相同定位 —
标志/品牌 相同位置（角落） —
分类徽章 相同样式 按分类颜色变化
标题文本 相同大小/粗细 内容变化

测试 OG 图像

工具 URL
Facebook 调试器 developers.facebook.com/tools/debug/
Twitter 卡片验证器 cards-dev.twitter.com/validator
LinkedIn 帖子检查器 linkedin.com/post-inspector/
OpenGraph.xyz opengraph.xyz 
# 研究 OG 调试工具
infsh app run tavily/search-assistant --input '{
  "query": "open graph image debugger preview tool test og:image"
}'

常见错误

错误 问题 修复
无 OG 图像 平台显示随机页面元素或无内容 始终设置 og:image
文本太小 移动预览不可读 标题在 1200px 宽度时最小 48px
浅色背景 在白色/浅色信息流中丢失 使用深色或饱和背景
文本过多 杂乱、压倒性 最多：标题 + 副标题 + 品牌
图像太大 (>5MB) 某些平台不加载 优化到理想小于 1MB
无安全区域内边距 某些平台裁剪文本 所有边缘 40px 内边距
不同平台不同图像 分享体验不一致 对所有平台使用 1200x630
HTTP 图像 URL 许多平台需要 HTTPS 始终通过 HTTPS 提供 OG 图像
相对图像路径 分享时无法解析 使用完整绝对 URL

相关技能

npx skills add inference-sh/skills@ai-image-generation
npx skills add inference-sh/skills@landing-page-design
npx skills add inference-sh/skills@prompt-engineering

浏览所有应用：infsh app list