og-image-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

OG Image Design

OG图片设计

Create social sharing images (Open Graph) via inference.sh CLI.

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

Quick Start

快速开始

bash

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

bash

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

Generate an OG image with HTML-to-image

通过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">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>" }'

undefined

undefined

Platform Specifications

平台规格

Platform	Dimensions	Aspect Ratio	File Size	Format
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

Universal safe bet: 1200 x 630 px, PNG or JPG, under 5 MB.

平台	尺寸	宽高比	文件大小	格式
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。

The Golden Layout

黄金布局

┌──────────────────────────────────────────────────┐
│                                                  │
│  ┌─────────────────────────────────┐  ┌───────┐  │
│  │                                 │  │       │  │
│  │  Title Text (max 60 chars)      │  │ Logo/ │  │
│  │  ───────────────────            │  │ Visual│  │
│  │  Subtitle (max 100 chars)       │  │       │  │
│  │                                 │  │       │  │
│  │  author / site name             │  └───────┘  │
│  └─────────────────────────────────┘             │
│                                                  │
└──────────────────────────────────────────────────┘
  1200 x 630 px

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

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)

规则	取值
标题字号	48-64px
副标题字号	20-28px
标题最大长度	60字符（部分平台会截断）
副标题最大长度	100字符
行高	标题为1.2-1.3
字体粗细	标题加粗/特粗，副标题常规
文本对比度	至少符合WCAG AA标准（4.5:1对比度）

Safe Zones

安全区域

┌──────────────────────────────────────────────────┐
│  ┌──────────────────────────────────────────────┐│
│  │ 40px padding from all edges                  ││
│  │                                              ││
│  │  Content lives here                          ││
│  │                                              ││
│  │                                              ││
│  └──────────────────────────────────────────────┘│
└──────────────────────────────────────────────────┘

40px minimum padding from all edges
Some platforms crop edges or add rounded corners
Never put critical text in the outer 5%

┌──────────────────────────────────────────────────┐
│  ┌──────────────────────────────────────────────┐│
│  │ 四边至少留40px内边距                          ││
│  │                                              ││
│  │  内容需放置在此区域内                          ││
│  │                                              ││
│  │                                              ││
│  └──────────────────────────────────────────────┘│
└──────────────────────────────────────────────────┘

所有边距至少保留40px
部分平台会裁剪边缘或添加圆角
切勿将关键文本放在外侧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.

背景类型	适用场景
纯色品牌色	系列内容、企业官方内容
渐变色	现代风格、吸睛效果
带遮罩的图片	博客文章、编辑类内容
深色背景	对比度更高，在信息流中更突出

深色背景在社交信息流中的表现优于浅色背景——大多数信息流背景为白色或浅色，因此深色OG图片会更醒目。

Templates by Content Type

按内容类型分类的模板

Blog Post

博客文章

bash

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\">Engineering Blog</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\">A deep dive into our CI/CD optimization</p></div></div>"
}'

bash

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\">Engineering Blog</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\">A deep dive into our CI/CD optimization</p></div></div>"
}'

Product/Launch Announcement

产品/发布公告

bash

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\">Now Available</p><h1 style=\"font-size:64px;margin:12px 0;font-weight:900\">DataFlow 2.0</h1><p style=\"font-size:24px;opacity:0.7\">Automated reports. Zero configuration.</p></div></div>"
}'

bash

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\">Now Available</p><h1 style=\"font-size:64px;margin:12px 0;font-weight:900\">DataFlow 2.0</h1><p style=\"font-size:24px;opacity:0.7\">Automated reports. Zero configuration.</p></div></div>"
}'

Tutorial/How-To

教程/操作指南

bash

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\">TUTORIAL</div><h1 style=\"font-size:48px;margin:0;line-height:1.2\">Build a REST API in 10 Minutes with Node.js</h1><p style=\"font-size:20px;opacity:0.7;margin-top:16px\">Step-by-step guide with code examples</p></div></div>"
}'

bash

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\">TUTORIAL</div><h1 style=\"font-size:48px;margin:0;line-height:1.2\">Build a REST API in 10 Minutes with Node.js</h1><p style=\"font-size:20px;opacity:0.7;margin-top:16px\">Step-by-step guide with code examples</p></div></div>"
}'

AI-Generated Visual OG

AI生成视觉型OG图片

bash

undefined

bash

undefined

When you want a striking visual instead of text-based

当你需要醒目的视觉元素而非纯文本图片时

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 }'

undefined

undefined

OG Meta Tags Reference

OG元标签参考

html

<!-- Essential (Facebook, LinkedIn, Discord, Slack) -->
<meta property="og:title" content="Title here (60 chars max)" />
<meta property="og:description" content="Description (155 chars max)" />
<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 specific -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Title here" />
<meta name="twitter:description" content="Description" />
<meta name="twitter:image" content="https://yoursite.com/og-image.png" />

<!-- Image dimensions (optional but recommended) -->
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

html

<!-- 核心标签（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 Card Types

Twitter卡片类型

Card Type	Image Size	Use When
`summary`	800 x 418 (small thumbnail)	Short updates, links
`summary_large_image`	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.

卡片类型	图片尺寸	适用场景
`summary`	800 x 418（小缩略图）	短更新、链接分享
`summary_large_image`	1200 x 628（全宽）	博客文章、深度内容、公告

除非有特殊需求，否则始终使用
summary_large_image
——大尺寸图片能获得更多点击量。

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

对于拥有大量页面的博客或站点，建议创建模板系统：

元素	保持一致	可变更
背景样式	统一渐变或品牌色	—
字体	统一字体	—
布局	统一元素位置	—
Logo/品牌标识	统一放置位置（如角落）	—
分类标签	统一样式	按分类变更颜色
标题文本	统一字号/粗细	内容变更

Testing OG Images

OG图片测试

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

bash

undefined

工具	链接
Facebook调试工具	developers.facebook.com/tools/debug/
Twitter卡片验证工具	cards-dev.twitter.com/validator
LinkedIn帖子检查工具	linkedin.com/post-inspector/
OpenGraph.xyz	opengraph.xyz

bash

undefined

Research OG debugging tools

搜索OG调试工具

infsh app run tavily/search-assistant --input '{ "query": "open graph image debugger preview tool test og:image" }'

undefined

infsh app run tavily/search-assistant --input '{ "query": "open graph image debugger preview tool test og:image" }'

undefined

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

错误	问题	解决方案
未设置OG图片	平台会随机显示页面元素或空白	始终设置og:image
文本过小	在移动端预览中无法阅读	1200px宽度下标题最小字号为48px
浅色背景	在浅色信息流中容易被忽略	使用深色或高饱和度背景
文本过多	页面杂乱、视觉压力大	最多保留标题+副标题+品牌信息
图片过大（>5MB）	部分平台无法加载	优化至1MB以内更佳
未留安全区域边距	部分平台会裁剪文本	四边至少留40px边距
不同平台使用不同图片	分享体验不一致	所有平台统一使用1200x630尺寸图片
使用HTTP图片链接	多数平台要求HTTPS	始终通过HTTPS提供OG图片
使用相对图片路径	分享时无法解析	使用完整绝对URL

og-image-design

Original

Translation

OG Image Design

OG图片设计

Quick Start

快速开始

Generate an OG image with HTML-to-image

通过HTML转图片生成OG图片

Platform Specifications

平台规格

The Golden Layout

黄金布局

Design Rules

设计规则

Text

文本

Safe Zones

安全区域

Colors

颜色

Templates by Content Type

按内容类型分类的模板

Blog Post

博客文章

Product/Launch Announcement

产品/发布公告

Tutorial/How-To

教程/操作指南

AI-Generated Visual OG

AI生成视觉型OG图片

When you want a striking visual instead of text-based

当你需要醒目的视觉元素而非纯文本图片时

OG Meta Tags Reference

OG元标签参考

Twitter Card Types

Twitter卡片类型

Consistency System

一致性系统

Testing OG Images

OG图片测试

Research OG debugging tools

搜索OG调试工具

Common Mistakes

常见错误

Related Skills

相关技能