安裝 belt CLI 技能：
npx skills add belt-sh/cli
OG 圖片設計
透過 inference.sh CLI 建立社交分享圖片（Open Graph）。
快速開始
需要 inference.sh CLI（
belt）。安裝說明
belt login
# 使用 HTML 轉圖片產生 OG 圖片
belt 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>"
}'
平台規格
| 平台 | 尺寸 | 長寬比 | 檔案大小 | 格式 |
|---|---|---|---|---|
| 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 |
| 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（標題） |
| 字體粗細 | 標題粗體/黑色，副標題 Regular |
| 文字對比度 | WCAG AA 最低標準（4.5:1 比例） |
安全區域
┌──────────────────────────────────────────────────┐
│ ┌──────────────────────────────────────────────┐│
│ │ 距離所有邊緣 40px ││
│ │ ││
│ │ 內容放置於此 ││
│ │ ││
│ │ ││
│ └──────────────────────────────────────────────┘│
└──────────────────────────────────────────────────┘
- 距離所有邊緣至少 40px
- 某些平台會裁切邊緣或加上圓角
- 切勿將關鍵文字放在外圍 5% 的區域
顏色
| 背景類型 | 使用時機 |
|---|---|
| 純色品牌色 | 一致性系列、企業用 |
| 漸層 | 現代、吸睛 |
| 照片搭配遮罩 | 部落格文章、編輯內容 |
| 深色背景 | 對比度更好，在 feed 中更突出 |
深色背景在社交 feed 中表現優於淺色——大多數 feed 使用白色/淺色背景，因此深色 OG 圖片會更突出。
各類內容的模板
部落格文章
belt 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>"
}'
產品/發布公告
belt 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>"
}'
教學/How-To
belt 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 圖片
# 當您想要引人注目的視覺效果而非純文字時
belt 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 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 圖片
| 工具 | 網址 |
|---|---|
| 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 |
# 研究 OG 除錯工具
belt app run tavily/search-assistant --input '{
"query": "open graph image debugger preview tool test og:image"
}'
常見錯誤
| 錯誤 | 問題 | 修正 |
|---|---|---|
| 完全沒有 OG 圖片 | 平台顯示隨機頁面元素或空白 | 務必設定 og:image |
| 文字太小 | 在行動預覽中無法閱讀 | 在 1200px 寬度下標題至少 48px |
| 淺色背景 | 在白色/淺色 feed 中容易被忽略 | 使用深色或飽和背景 |
| 文字過多 | 雜亂、令人不知所措 | 最多：標題 + 副標題 + 品牌 |
| 圖片太大（>5MB） | 某些平台無法載入 | 最佳化至 1MB 以下 |
| 未留安全區域邊距 | 部分平台文字被裁切 | 距離所有邊緣 40px |
| 每個平台使用不同圖片 | 分享體驗不一致 | 全部使用 1200x630 |
| HTTP 圖片網址 | 許多平台要求 HTTPS | 一律使用 HTTPS 提供 OG 圖片 |
| 相對路徑圖片 | 分享時無法解析 | 使用完整的絕對網址 |
相關技能
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
瀏覽所有應用程式：belt app list