PluginBench
Skill
Pass
Audit score 90

seo-image-gen

agricidaniel/claude-seo

Generate SEO-optimized images (OG, hero, product, infographics) powered by Gemini.

What is seo-image-gen?

AI image generation skill for SEO assets including social previews, blog headers, product photos, and infographics. Uses Gemini via the banana MCP extension to produce production-ready visuals mapped to SEO best practices. Requires banana extension installation.

  • Generate OG/social preview images (1200×630) optimized for sharing
  • Create blog hero images with dramatic, editorial-quality visuals
  • Produce product photography with clean backgrounds and studio lighting
  • Build infographics with vertical layouts for data visualization
  • Generate batch variations (up to N images) for A/B testing
  • Apply SEO-specific presets for aspect ratio, resolution, and domain mode

How to install seo-image-gen

npx skills add https://github.com/agricidaniel/claude-seo --skill seo-image-gen
Prerequisites
  • banana extension installed via ./extensions/banana/install.sh
  • Gemini API key configured in the banana MCP server
  • MCP server connectivity verified (gemini_generate_image tool available)
Claude Code
Cursor
Windsurf
Cline

How to use seo-image-gen

  1. 1.Run `/seo image-gen og <description>` for social preview images (1200×630)
  2. 2.Run `/seo image-gen hero <description>` for blog hero images (widescreen, dramatic)
  3. 3.Run `/seo image-gen product <description>` for product photography (clean, white background)
  4. 4.Run `/seo image-gen infographic <description>` for vertical data visualizations
  5. 5.Run `/seo image-gen batch <description> [N]` to generate N variations (default: 3)
  6. 6.After generation, apply the SEO checklist: write alt text, rename with keywords, convert to WebP, add schema markup, and set OG meta tags

Use cases

Good for
  • Create OG images for blog posts and web pages to improve social sharing
  • Generate hero images for landing pages and article headers
  • Produce product photography for e-commerce listings without hiring a photographer
  • Build infographics for data-heavy content and visual storytelling
  • Generate multiple variations of social preview images to test engagement
Who it's for
  • SEO specialists optimizing social sharing and metadata
  • Content creators and bloggers needing hero images
  • E-commerce teams generating product visuals at scale
  • Marketing teams creating social media assets
  • Web developers implementing OG tags and schema markup

seo-image-gen FAQ

What happens if the banana extension isn't installed?

The skill will not function. Run ./extensions/banana/install.sh to install the banana extension and configure the Gemini MCP server.

How much does image generation cost?

Costs vary by model and resolution. Check the installed MCP configuration for current pricing. The skill shows estimated cost before generating, especially for batch requests.

Can I use my own brand presets?

Yes. The skill checks for brand presets in references/seo-image-presets.md and applies them as defaults if configured. Load matching presets to customize aspect ratio, resolution, and domain mode.

What image formats and sizes does it support?

Supports multiple aspect ratios (16:9 for OG/hero, 4:3 for product, 2:3 for infographics, 1:1 for icons) and resolutions from 512px (favicon) to 4K (infographics). Output is PNG; convert to WebP for web optimization.

How do I optimize generated images for SEO?

After generation, follow the post-generation checklist: write keyword-rich alt text, rename files with SEO-friendly names, convert to WebP (target <200KB for hero, <100KB for thumbnails), add ImageObject schema markup, and set OG meta tags.

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.4.1" 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-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 Preview16:91KProduct or UI/WebClean, professional, text-friendly
Blog Hero16:92KCinema or EditorialDramatic, atmospheric, editorial quality
Schema Image4:31KProductClean, descriptive, schema ImageObject
Social Square1:11KUI/WebPlatform-optimized square
Product Photo4:32KProductWhite background, studio lighting
Infographic2:34KInfographicData-heavy, vertical layout
Favicon/Icon1:1512LogoMinimal, scalable, recognizable
Pinterest Pin2:32KEditorialTall 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, 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 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

ScenarioModelWhy
OG images, social previewsInstalled MCP/tool default @ 1KFast, cost-effective
Hero images, product photosInstalled MCP/tool quality model @ 2KQuality + detail
Infographics with textInstalled MCP/tool text-capable model @ 2K, thinking: high if supportedBetter text rendering
Quick draftsInstalled MCP/tool draft model @ 512Rapid 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_SAFETYRephrase prompt - see references/prompt-adaptation-safety.md
MCP unavailableConfigure MCP with ./extensions/banana/install.sh; claude-seo does not vendor a local generation fallback script
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, advanced techniques
  • references/prompt-templates.md: ready-to-use templates by use case
  • references/prompt-adaptation-safety.md: model adaptation rules, common mistakes, safety-filter rephrasing
  • 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