/seo-image-gen

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 the user wants an SEO asset and says \"OG image\", \"social preview\", \"hero image\", \"blog image\", \"product photo\", \"infographic\", \"seo image\", \"image-gen\", \"favicon\", \"schema image\", or \"pinterest pin\". Not for general artwork, banners, or thumbnails unrelated to SEO."
argument-hint: "[og|hero|product|infographic|custom|batch] <description>"
user-invocable: true
license: MIT
compatibility: "Requires nanobanana MCP server"
metadata:
  author: AgriciDaniel
  version: "2.6.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](https://github.com/AgriciDaniel/banana-claude), 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-gen` commands for generating images
• **Agent** (`agents/seo-image-gen.md`): Audit-only analyst spawned during `/seo audit` to 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:

1. **Identify use case** from command or context (og, hero, product, etc.) 2. **Apply SEO defaults** from the use cases table above 3. **Set aspect ratio** via `set_aspect_ratio` MCP tool 4. **Construct Reasoning Brief** using the banana Creative Director pipeline:

• Load `references/prompt-engineering.md` for the 6-component system
• Apply domain mode emphasis (Subject 30%, Style 25%, Context 15%, etc.)
• Be SPECIFIC and VISCERAL: describe what the camera sees

5. **Generate** via `gemini_generate_image` MCP tool 6. **Post-generation SEO checklist** (see below)

Check for Presets

If the user mentions a brand or has SEO presets configured:

# Use the installed Banana MCP/tool configuration to list presets.

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:

1. **Alt text**: Write descriptive alt text that names the subject of the generated image 2. **File naming**: Rename to SEO-friendly format: `keyword-description-widthxheight.webp` 3. **WebP conversion**: Convert to WebP for optimal page speed:

   magick output.png -quality 85 output.webp

4. **File size**: Target under 200KB for hero images, under 100KB for thumbnails 5. **Schema markup**: Suggest `ImageObject` schema for the generated image:

   {
     "@type": "ImageObject",
     "url": "https://example.com/images/keyword-description.webp",
     "width": 1200,
     "height": 630,
     "caption": "Descriptive caption with target keyword"
   }

6. **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 in the installed Banana MCP/tool ledger when available
• Use the installed Banana MCP/tool usage summary if user asks about usage

Approximate costs:

• Verify current pricing in the installed MCP/tool configuration before quoting

Model Routing

| Scenario | Model | Why | |----------|-------|-----| | OG images, social previews | Installed MCP/tool default @ 1K | Fast, cost-effective | | H