Claude-seo seo-image-gen

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\".

install
source · Clone the upstream repo
git clone https://github.com/AgriciDaniel/claude-seo
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/AgriciDaniel/claude-seo "$T" && mkdir -p ~/.claude/skills && cp -r "$T/extensions/banana/skills/seo-image-gen" ~/.claude/skills/agricidaniel-claude-seo-seo-image-gen && rm -rf "$T"
manifest: extensions/banana/skills/seo-image-gen/SKILL.md
source content

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

CommandWhat 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 CaseAspect RatioResolutionDomain ModeNotes
OG/Social Preview
16:9
1K
Product or UI/WebClean, professional, text-friendly
Blog Hero
16:9
2K
Cinema or EditorialDramatic, atmospheric, editorial quality
Schema Image
4:3
1K
ProductClean, descriptive, schema ImageObject
Social Square
1:1
1K
UI/WebPlatform-optimized square
Product Photo
4:3
2K
ProductWhite background, studio lighting
Infographic
2:3
4K
InfographicData-heavy, vertical layout
Favicon/Icon
1:1
512
LogoMinimal, scalable, recognizable
Pinterest Pin
2:3
2K
EditorialTall 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:

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:

  1. Alt text:Write descriptive, keyword-rich alt text for 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:
    python3 scripts/cost_tracker.py log --model MODEL --resolution RES --prompt "brief"
  • Run
    cost_tracker.py summary
    if 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

ScenarioModelWhy
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

ErrorResolution
MCP not configuredRun
./extensions/banana/install.sh
API key invalidNew 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 unavailableFall back:
python3 scripts/generate.py --prompt "..." --aspect-ratio "16:9"
Extension not installedShow install instructions:
./extensions/banana/install.sh

Cross-Skill Integration

  • seo-images (analysis) feeds into seo-image-gen (generation): audit results from
    /seo images
    identify missing or low-quality images; use those findings to drive
    /seo image-gen
    commands
  • 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
    ImageObject
    schema 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, templates
  • references/gemini-models.md
    :Model specs, rate limits, capabilities
  • references/mcp-tools.md
    :MCP tool parameters and responses
  • references/post-processing.md
    :ImageMagick/FFmpeg pipeline recipes
  • references/cost-tracking.md
    :Pricing, usage tracking
  • references/presets.md
    :Brand preset management
  • references/seo-image-presets.md
    :SEO-specific preset templates

Response Format

After generating, always provide:

  1. Image path:where it was saved
  2. Crafted prompt:show what was sent to the API (educational)
  3. Settings:model, aspect ratio, resolution
  4. SEO checklist:alt text suggestion, file naming, WebP conversion
  5. Schema snippet:ImageObject or og:image markup if applicable