seo-image-gen
agricidaniel/claude-seo
Generate SEO-optimized images (OG, hero, product, infographics) powered by Gemini via banana MCP.
What is seo-image-gen?
AI image generation skill for SEO assets including Open Graph previews, blog hero images, product photography, and infographics. Uses Gemini's image generation via the nanobanana MCP server with pre-configured aspect ratios and resolutions for each SEO use case. Requires the banana extension to be installed.
- Generate OG/social preview images (1200x630) optimized for sharing
- Create blog hero images with dramatic, editorial-quality visuals
- Produce product photography with clean white backgrounds and studio lighting
- Build infographics with vertical layouts and data-heavy designs
- Generate batch variations of images for A/B testing
- Apply SEO-specific presets for consistent brand imagery
How to install seo-image-gen
npx skills add https://github.com/agricidaniel/claude-seo --skill seo-image-gen- Banana extension must be installed via ./extensions/banana/install.sh
- Gemini API key configured at https://aistudio.google.com/apikey
- MCP server (nanobanana) must be running and connected
How to use seo-image-gen
- 1.Install the banana extension by running ./extensions/banana/install.sh
- 2.Verify MCP server connectivity by checking for gemini_generate_image tool availability
- 3.Invoke with /seo image-gen [type] [description], where type is og, hero, product, infographic, custom, or batch
- 4.Review the generated image and follow the post-generation SEO checklist
- 5.Write keyword-rich alt text for the image
- 6.Convert to WebP format and optimize file size (target under 200KB for hero, under 100KB for thumbnails)
- 7.Add schema markup (ImageObject) and OG meta tags to your HTML
Use cases
- Create Open Graph images for blog posts and web pages to improve social sharing
- Generate hero images for blog articles with professional, atmospheric visuals
- Produce product photography for e-commerce listings without studio setup
- Build infographics for data visualization and content marketing
- Generate favicon and icon assets for branding
- SEO specialists optimizing social preview and metadata images
- Content creators and bloggers needing hero images for articles
- E-commerce teams generating product photography
- Marketing professionals building infographics and social assets
- Web developers implementing Open Graph and schema markup
seo-image-gen FAQ
Run ./extensions/banana/install.sh to install it. If MCP tools are unavailable after installation, verify your Gemini API key is configured at https://aistudio.google.com/apikey.
Approximate costs for gemini-3.1-flash: $0.02 for 512px, $0.04 for 1K, $0.08 for 2K, $0.16 for 4K resolution. Use cost_tracker.py to monitor usage.
Yes, use /seo image-gen batch <description> [N] to generate N variations (default 3) for A/B testing.
Follow the post-generation SEO checklist: write alt text, rename to SEO-friendly format, convert to WebP, optimize file size, add ImageObject schema markup, and include OG meta tags in your HTML.
The prompt triggered safety filters. Rephrase your description to be less explicit or controversial. See references/prompt-engineering.md for safer prompt patterns.
Full instructions (SKILL.md)
Source of truth, from agricidaniel/claude-seo.
name: seo-image-gen description: "AI image generation for SEO assets: OG/social preview images, blog hero images, schema images, product photography, infographics. Powered by Gemini via nanobanana-mcp. Requires banana extension installed. Use when user says "generate image", "OG image", "social preview", "hero image", "blog image", "product photo", "infographic", "seo image", "create visual", "image-gen", "favicon", "schema image", "pinterest pin", "generate visual", "banner", or "thumbnail"." argument-hint: "[og|hero|product|infographic|custom|batch] <description>" user-invocable: true license: MIT compatibility: "Requires nanobanana MCP server" metadata: author: AgriciDaniel version: "2.2.0" category: seo
SEO Image Gen: AI Image Generation for SEO Assets (Extension)
Generate production-ready images for SEO use cases using Gemini's image generation via the banana Creative Director pipeline. Maps SEO needs to optimized domain modes, aspect ratios, and resolution defaults.
Architecture Note
This extension is built on Claude Banana, the standalone AI image generation skill for Claude Code.
This skill has two components with distinct roles:
- SKILL.md (this file): Handles interactive
/seo image-gencommands for generating images - Agent (
agents/seo-image-gen.md): Audit-only analyst spawned during/seo auditto assess existing OG/social images and produce a generation plan (never auto-generates)
Prerequisites
This skill requires the banana extension to be installed:
./extensions/banana/install.sh
Check availability: Before using any image generation tool, verify the MCP server
is connected by checking if gemini_generate_image or set_aspect_ratio tools are
available. If tools are not available, inform the user the extension is not installed
and provide install instructions.
Quick Reference
| Command | What it does |
|---|---|
/seo image-gen og <description> | Generate OG/social preview image (1200x630 feel) |
/seo image-gen hero <description> | Blog hero image (widescreen, dramatic) |
/seo image-gen product <description> | Product photography (clean, white BG) |
/seo image-gen infographic <description> | Infographic visual (vertical, data-heavy) |
/seo image-gen custom <description> | Custom image with full Creative Director pipeline |
/seo image-gen batch <description> [N] | Generate N variations (default: 3) |
SEO Image Use Cases
Each use case maps to pre-configured banana parameters:
| Use Case | Aspect Ratio | Resolution | Domain Mode | Notes |
|---|---|---|---|---|
| OG/Social Preview | 16:9 | 1K | Product or UI/Web | Clean, professional, text-friendly |
| Blog Hero | 16:9 | 2K | Cinema or Editorial | Dramatic, atmospheric, editorial quality |
| Schema Image | 4:3 | 1K | Product | Clean, descriptive, schema ImageObject |
| Social Square | 1:1 | 1K | UI/Web | Platform-optimized square |
| Product Photo | 4:3 | 2K | Product | White background, studio lighting |
| Infographic | 2:3 | 4K | Infographic | Data-heavy, vertical layout |
| Favicon/Icon | 1:1 | 512 | Logo | Minimal, scalable, recognizable |
| Pinterest Pin | 2:3 | 2K | Editorial | Tall vertical card |
Generation Pipeline
For every generation request:
- Identify use case from command or context (og, hero, product, etc.)
- Apply SEO defaults from the use cases table above
- Set aspect ratio via
set_aspect_ratioMCP tool - Construct Reasoning Brief using the banana Creative Director pipeline:
- Load
references/prompt-engineering.mdfor the 6-component system - Apply domain mode emphasis (Subject 30%, Style 25%, Context 15%, etc.)
- Be SPECIFIC and VISCERAL: describe what the camera sees
- Load
- Generate via
gemini_generate_imageMCP tool - Post-generation SEO checklist (see below)
Check for Presets
If the user mentions a brand or has SEO presets configured:
python3 scripts/presets.py list
Load matching preset and apply as defaults. Also check references/seo-image-presets.md
for SEO-specific preset templates.
Post-Generation SEO Checklist
After every successful generation, guide the user on:
- Alt text:Write descriptive, keyword-rich alt text for the generated image
- File naming:Rename to SEO-friendly format:
keyword-description-widthxheight.webp - WebP conversion:Convert to WebP for optimal page speed:
magick output.png -quality 85 output.webp - File size:Target under 200KB for hero images, under 100KB for thumbnails
- Schema markup:Suggest
ImageObjectschema for the generated image:{ "@type": "ImageObject", "url": "https://example.com/images/keyword-description.webp", "width": 1200, "height": 630, "caption": "Descriptive caption with target keyword" } - OG meta tags:For social preview images, remind about:
<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="Descriptive alt text" />
Cost Awareness
Image generation costs money. Be transparent:
- Show estimated cost before generating (especially for batch)
- Log every generation:
python3 scripts/cost_tracker.py log --model MODEL --resolution RES --prompt "brief" - Run
cost_tracker.py summaryif user asks about usage
Approximate costs (gemini-3.1-flash):
- 512: ~$0.02/image
- 1K resolution: ~$0.04/image
- 2K resolution: ~$0.08/image
- 4K resolution: ~$0.16/image
Model Routing
| Scenario | Model | Why |
|---|---|---|
| OG images, social previews | gemini-3.1-flash-image-preview @ 1K | Fast, cost-effective |
| Hero images, product photos | gemini-3.1-flash-image-preview @ 2K | Quality + detail |
| Infographics with text | gemini-3.1-flash-image-preview @ 2K, thinking: high | Better text rendering |
| Quick drafts | gemini-2.5-flash-image @ 512 | Rapid iteration |
Error Handling
| Error | Resolution |
|---|---|
| MCP not configured | Run ./extensions/banana/install.sh |
| API key invalid | New key at https://aistudio.google.com/apikey |
| Rate limited (429) | Wait 60s, retry. Free tier: ~10 RPM / ~500 RPD |
IMAGE_SAFETY | Rephrase prompt - see references/prompt-engineering.md Safety section |
| MCP unavailable | Fall back: python3 scripts/generate.py --prompt "..." --aspect-ratio "16:9" |
| Extension not installed | Show install instructions: ./extensions/banana/install.sh |
Cross-Skill Integration
- seo-images (analysis) feeds into seo-image-gen (generation): audit results from
/seo imagesidentify missing or low-quality images; use those findings to drive/seo image-gencommands - seo-audit spawns the seo-image-gen agent (not this skill) to analyze OG/social images across the site and produce a prioritized generation plan
- seo-schema can consume generated images: after generation, suggest
ImageObjectschema markup pointing to the new assets
Reference Documentation
Load on-demand. Do NOT load all at startup:
references/prompt-engineering.md:6-component system, domain modes, templatesreferences/gemini-models.md:Model specs, rate limits, capabilitiesreferences/mcp-tools.md:MCP tool parameters and responsesreferences/post-processing.md:ImageMagick/FFmpeg pipeline recipesreferences/cost-tracking.md:Pricing, usage trackingreferences/presets.md:Brand preset managementreferences/seo-image-presets.md:SEO-specific preset templates
Response Format
After generating, always provide:
- Image path:where it was saved
- Crafted prompt:show what was sent to the API (educational)
- Settings:model, aspect ratio, resolution
- SEO checklist:alt text suggestion, file naming, WebP conversion
- Schema snippet:ImageObject or og:image markup if applicable
Related skills
More from agricidaniel/claude-seo and the wider catalog.

seo-images
Analyze and optimize images for SEO: alt text, file size, format, lazy loading, SERP rankings, and metadata.

seo-local
Analyze local SEO for Google Business Profile optimization, NAP consistency, citations, reviews, and location-specific ranking factors.

seo-maps
Geo-grid rank tracking, GBP auditing, review intelligence, and cross-platform NAP verification for local SEO.

seo-page
Deep single-page SEO analysis covering on-page elements, content quality, technical meta tags, schema, images, and performance.

seo-plan
Strategic SEO planning with industry templates, competitive analysis, and phased implementation roadmap.

seo-programmatic
Plan and audit SEO pages generated at scale from data sources with quality gates to prevent thin content penalties.