OG Image Design
Create social sharing images (Open Graph) via inference.sh CLI.
Quick Start
CODEBLOCK0
Install note: The install script only detects your OS/architecture, downloads the matching binary from dist.inference.sh, and verifies its SHA-256 checksum. No elevated permissions or background processes. Manual install & verification available.
Platform Specifications
| Platform | Dimensions | Aspect Ratio | File Size | Format |
|---|
| Facebook | 1200 x 630 px | 1.91:1 | < 8 MB | JPG, PNG |
| Twitter/X (summarylargeimage) |
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 |
Universal safe bet: 1200 x 630 px, PNG or JPG, under 5 MB.
The Golden Layout
CODEBLOCK1
Design Rules
Text
| Rule | Value |
|---|
| Title font size | 48-64px |
| Subtitle font size |
20-28px |
| Max title length | 60 characters (gets truncated on some platforms) |
| Max subtitle length | 100 characters |
| Line height | 1.2-1.3 for titles |
| Font weight | Bold/Black for title, Regular for subtitle |
| Text contrast | WCAG AA minimum (4.5:1 ratio) |
Safe Zones
CODEBLOCK2
- - 40px minimum padding from all edges
- Some platforms crop edges or add rounded corners
- Never put critical text in the outer 5%
Colors
| Background Type | When to Use |
|---|
| Solid brand color | Consistent series, corporate |
| Gradient |
Modern, eye-catching |
| Photo with overlay | Blog posts, editorial |
| Dark background | Better contrast, stands out in feeds |
Dark backgrounds outperform light in social feeds — most feeds have white/light backgrounds, so dark OG images pop.
Templates by Content Type
Blog Post
CODEBLOCK3
Product/Launch Announcement
CODEBLOCK4
Tutorial/How-To
CODEBLOCK5
AI-Generated Visual OG
CODEBLOCK6
OG Meta Tags Reference
CODEBLOCK7
Twitter Card Types
| Card Type | Image Size | Use When |
|---|
| INLINECODE1 | 800 x 418 (small thumbnail) | Short updates, links |
| INLINECODE2 |
1200 x 628 (full width) | Blog posts, articles, announcements |
Always use summary_large_image unless you have a specific reason not to — the large image gets significantly more clicks.
Consistency System
For a blog or site with many pages, create a template system:
| Element | Keep Consistent | Vary |
|---|
| Background style | Same gradient or brand colors | — |
| Font family |
Same font | — |
| Layout | Same positioning | — |
| Logo/branding | Same placement (corner) | — |
| Category badge | Same style | Color per category |
| Title text | Same size/weight | Content changes |
Testing OG Images
| Tool | URL |
|---|
| Facebook Debugger | developers.facebook.com/tools/debug/ |
| Twitter Card Validator |
cards-dev.twitter.com/validator |
| LinkedIn Post Inspector | linkedin.com/post-inspector/ |
| OpenGraph.xyz | opengraph.xyz |
CODEBLOCK8
Common Mistakes
| Mistake | Problem | Fix |
|---|
| No OG image at all | Platform shows random page element or nothing | Always set og:image |
| Text too small |
Unreadable on mobile previews | Title minimum 48px at 1200px width |
| Light background | Gets lost in white/light feeds | Use dark or saturated backgrounds |
| Too much text | Cluttered, overwhelming | Max: title + subtitle + brand |
| Image too large (>5MB) | Some platforms won't load it | Optimize to under 1MB ideally |
| No safe zone padding | Text cropped on some platforms | 40px padding from all edges |
| Different image per platform | Inconsistent sharing experience | Use 1200x630 for everything |
| HTTP image URL | Many platforms require HTTPS | Always serve OG images over HTTPS |
| Relative image path | Won't resolve when shared | Use full absolute URL |
Related Skills
CODEBLOCK9
Browse all apps: INLINECODE4
OG 图像设计
通过 inference.sh CLI 创建社交分享图像（Open Graph）。
快速开始
bash
curl -fsSL https://cli.inference.sh | sh && infsh login
使用 HTML 转图像生成 OG 图像
infsh app run infsh/html-to-image --input {
html:
How We Reduced Build Times by 80%
engineering.yourcompany.com
}
安装说明： 安装脚本 仅检测您的操作系统/架构，从 dist.inference.sh 下载匹配的二进制文件，并验证其 SHA-256 校验和。无需提升权限或后台进程。提供手动安装与验证。
平台规格
| 平台 | 尺寸 | 宽高比 | 文件大小 | 格式 |
|---|
| Facebook | 1200 x 630 px | 1.91:1 | < 8 MB | JPG, PNG |
| Twitter/X (summarylargeimage) |
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
设计规则
文本
20-28px |
| 标题最大长度 | 60 字符（部分平台会被截断） |
| 副标题最大长度 | 100 字符 |
| 行高 | 标题 1.2-1.3 |
| 字重 | 标题用粗体/黑体，副标题用常规体 |
| 文本对比度 | WCAG AA 最低标准（4.5:1 比例） |
安全区域
┌──────────────────────────────────────────────────┐
│ ┌──────────────────────────────────────────────┐│
│ │ 距所有边缘 40px 内边距 ││
│ │ ││
│ │ 内容在此区域内 ││
│ │ ││
│ │ ││
│ └──────────────────────────────────────────────┘│
└──────────────────────────────────────────────────┘
- - 距所有边缘至少 40px 内边距
- 部分平台会裁剪边缘或添加圆角
- 切勿将关键文本放在外部 5% 区域内
颜色
| 背景类型 | 使用场景 |
|---|
| 纯品牌色 | 系列一致内容、企业场景 |
| 渐变 |
现代、吸睛效果 |
| 带覆盖层的照片 | 博客文章、社论内容 |
| 深色背景 | 对比度更好，在信息流中更突出 |
深色背景在社交信息流中表现优于浅色——大多数信息流采用白色/浅色背景，因此深色 OG 图像更醒目。
按内容类型的模板
博客文章
bash
infsh app run infsh/html-to-image --input {
html:
Engineering Blog
How We Reduced Build Times by 80%
A deep dive into our CI/CD optimization
}
产品/发布公告
bash
infsh app run infsh/html-to-image --input {
html:
Now Available
DataFlow 2.0
Automated reports. Zero configuration.
}
教程/操作指南
bash
infsh app run infsh/html-to-image --input {
html:
TUTORIAL
Build a REST API in 10 Minutes with Node.js
Step-by-step guide with code examples
}
AI 生成视觉 OG
bash
当您想要引人注目的视觉而非基于文本时
infsh app run falai/flux-dev-lora --input {
prompt: clean professional social sharing card, dark gradient background, abstract geometric shapes, modern tech aesthetic, minimal, no text, 1200x630 equivalent aspect ratio,
width: 1200,
height: 630
}
OG 元标签参考
html
