OG 图像设计

通过 [inference.sh](https://inference.sh) CLI 创建社交分享图像（Open Graph）。

快速开始

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

# 使用 HTML 转图像功能生成 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\">如何将构建时间减少 80%</h1><p style=\"font-size:24px;opacity:0.8;margin-top:20px\">engineering.yourcompany.com</p></div></div>"
}'

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

平台规格

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

黄金布局

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

设计规范

文字

安全区

┌──────────────────────────────────────────────────┐
│  ┌──────────────────────────────────────────────┐│
│  │ 所有边距至少保留 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\">如何将构建时间减少 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\">10 分钟用 Node.js 构建 REST API</h1><p style=\"font-size:20px;opacity:0.7;margin-top:16px\">含代码示例的逐步指南</p></div></div>"
}'

AI 生成视觉 OG

OG 图像设计

当您希望使用引人注目的视觉图像而非文字内容时：

# 生成一张专业风格的社交分享卡片
infsh app run falai/flux-dev-lora --input '{
  "prompt": "干净专业的社交分享卡片，深色渐变背景，抽象几何形状，现代科技美学，极简风格，无文字，等效于 1200x630 的宽高比",
  "width": 1200,
  "height": 630
}'

OG 元标签参考

<!-- 必需项（适用于 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_large_image** —— 大图能获得显著更高的点击率。

统一性系统

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

测试 OG 图像

# 检索 OG 图像调试工具相关资料
infsh app run tavily/search-assistant --input '{
  "query": "open graph image debugger preview tool test og:image"
}'

常见错误

相关技能

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