seo-image-gen

SEO Image Gen：AI 圖片生成用於 SEO 素材（擴充功能）

使用 Gemini 的圖片生成功能，透過 banana Creative Director 管線，產生可用於 SEO 的正式圖片。將 SEO 需求對應到最佳化的領域模式、長寬比和解析度預設值。

架構說明

此擴充功能基於 Claude Banana，
這是 Claude Code 的獨立 AI 圖片生成技能。

此技能包含兩個元件，各有不同角色：

• SKILL.md（本檔案）：處理互動式 /seo image-gen 指令以生成圖片
• Agent（agents/seo-image-gen.md）：僅用於稽核的分析工具，在 /seo audit 期間被喚起，評估現有 OG/社群圖片並產生生成計畫（絕不自動生成）

先決條件

此技能需要安裝 banana 擴充功能：

./extensions/banana/install.sh

檢查可用性： 使用任何圖片生成工具前，請確認 MCP 伺服器已連線，檢查 gemini_generate_image 或 set_aspect_ratio 工具是否可用。若工具不可用，請告知使用者擴充功能未安裝，並提供安裝說明。

快速參考

指令	功能
/seo image-gen og <description>	生成 OG/社群預覽圖片（1200x630 風格）
/seo image-gen hero <description>	部落格主圖（寬螢幕、戲劇性）
/seo image-gen product <description>	商品攝影（乾淨、白背景）
/seo image-gen infographic <description>	資訊圖表視覺（垂直、資料豐富）
/seo image-gen custom <description>	自訂圖片，使用完整 Creative Director 管線
/seo image-gen batch <description> [N]	生成 N 個變體（預設：3）

SEO 圖片使用案例

每個使用案例對應到預先配置的 banana 參數：

使用案例	長寬比	解析度	領域模式	備註
OG/社群預覽	16:9	1K	Product 或 UI/Web	乾淨、專業、適合文字
部落格主圖	16:9	2K	Cinema 或 Editorial	戲劇性、氛圍感、編輯品質
結構化資料圖片	4:3	1K	Product	乾淨、描述性、結構化資料 ImageObject
社群正方形	1:1	1K	UI/Web	針對平台最佳化的正方形
商品照片	4:3	2K	Product	白色背景、棚拍燈光
資訊圖表	2:3	4K	Infographic	資料豐富、垂直佈局
Favicon/圖示	1:1	512	Logo	簡約、可縮放、易辨識
Pinterest 圖釘	2:3	2K	Editorial	高垂直卡片

生成管線

對於每個生成請求：

1. 識別使用案例：從指令或上下文判斷（og、hero、product 等）
2. 套用 SEO 預設值：根據上方使用案例表格
3. 設定長寬比：透過 set_aspect_ratio MCP 工具
4. 建構推理摘要：使用 banana Creative Director 管線：
   • 載入 references/prompt-engineering.md 了解 6 元件系統
   • 套用領域模式重點（主體 30%、風格 25%、情境 15% 等）
   • 要具體且生動：描述相機所見
5. 生成：透過 gemini_generate_image MCP 工具
6. 生成後 SEO 檢查清單（見下方）

檢查預設集

如果使用者提到品牌或已設定 SEO 預設集：

# 使用已安裝的 Banana MCP/工具設定來列出預設集。

載入相符的預設集並套用為預設值。同時檢查 references/seo-image-presets.md
以取得 SEO 專用的預設集範本。

生成後 SEO 檢查清單

每次成功生成後，引導使用者：

1. 替代文字：為生成的圖片撰寫描述性、含關鍵字的替代文字
2. 檔案命名：重新命名為 SEO 友善格式：keyword-description-widthxheight.webp
3. WebP 轉換：轉換為 WebP 以獲得最佳網頁速度：

   magick output.png -quality 85 output.webp
   

4. 檔案大小：主圖目標低於 200KB，縮圖低於 100KB
5. 結構化資料標記：為生成的圖片建議 ImageObject 結構化資料：

   {
     "@type": "ImageObject",
     "url": "https://example.com/images/keyword-description.webp",
     "width": 1200,
     "height": 630,
     "caption": "包含目標關鍵字的描述性標題"
   }
   

6. OG 中繼標籤：對於社群預覽圖片，提醒使用：

   <meta property="og:image" content="https://example.com/images/og-image.webp" />
   <meta property="og:image:width" content="1200" />
   <meta property="og:image:height" content="630" />
   <meta property="og:image:alt" content="描述性替代文字" />
   

成本意識

圖片生成需要花費。請保持透明：

• 在生成前顯示預估成本（尤其是批次生成）
• 每次生成記錄到已安裝的 Banana MCP/工具帳本（若可用）
• 若使用者詢問使用情況，使用已安裝的 Banana MCP/工具使用摘要

大約成本：

• 在報價前，請先確認已安裝 MCP/工具設定中的當前定價

模型路由

情境	模型	原因
OG 圖片、社群預覽	已安裝 MCP/工具預設 @ 1K	快速、經濟
主圖、商品照片	已安裝 MCP/工具品質模型 @ 2K	品質 + 細節
含文字的資訊圖表	已安裝 MCP/工具支援文字模型 @ 2K，思考：高（若支援）	更好的文字渲染
快速草稿	已安裝 MCP/工具草稿模型 @ 512	快速迭代

錯誤處理

錯誤	解決方式
MCP 未設定	執行 ./extensions/banana/install.sh
API 金鑰無效	在 https://aistudio.google.com/apikey 取得新金鑰
速率限制 (429)	等待 60 秒後重試。免費方案：約 10 RPM / 約 500 RPD
IMAGE_SAFETY	重新措辭提示 - 請參閱 references/prompt-engineering.md 安全章節
MCP 不可用	使用 ./extensions/banana/install.sh 設定 MCP；claude-seo 不提供本機生成後備腳本
擴充功能未安裝	顯示安裝說明：./extensions/banana/install.sh

跨技能整合

• seo-images（分析）提供資料給 seo-image-gen（生成）：/seo images 的稽核結果可識別缺少或低品質的圖片；使用這些發現來驅動 /seo image-gen 指令
• seo-audit 會喚起 seo-image-gen agent（非此技能）來分析整個網站的 OG/社群圖片，並產生優先順序生成計畫
• seo-schema 可以消費生成的圖片：生成後，建議指向新素材的 ImageObject 結構化資料標記

參考文件

按需載入。請勿在啟動時全部載入：

• references/prompt-engineering.md：6 元件系統、領域模式、範本
• references/gemini-models.md：模型規格、速率限制、能力
• references/mcp-tools.md：MCP 工具參數與回應
• references/post-processing.md：ImageMagick/FFmpeg 管線配方
• references/cost-tracking.md：定價、使用追蹤
• references/presets.md：品牌預設集管理
• references/seo-image-presets.md：SEO 專用預設集範本

回應格式

生成後，務必提供：

1. 圖片路徑：儲存位置
2. 精心設計的提示：顯示傳送給 API 的內容（教育用途）
3. 設定：模型、長寬比、解析度
4. SEO 檢查清單：替代文字建議、檔案命名、WebP 轉換
5. 結構化資料片段：若適用，提供 ImageObject 或 og:image 標記