JavaScript is disabled. Some features may not work.
seo-image-gen — ★ 9.6K GitHub Stars — Install Guide | SkillsNav
🇺🇸 English🇨🇳 中文
SkillsNav
Home

seo-image-gen

★ 9.6K repowritingN/AIntermediateGemini MCP Claude
🤖 AI Summary

Generates SEO-optimized images (OG cards, hero images, schema assets, product visuals, infographics) for content publishing workflows. Integrates image creation directly into SEO task pipelines.

How to Install

Claude Code:
git clone --depth 1 https://github.com/AgriciDaniel/claude-seo.git && cp claude-seo/skills/seo-image-gen ~/.claude/skills/seo-image-gen -r

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.

When to Use

  • Use when generating OG images, hero images, schema visuals, infographics, or similar SEO assets.
  • Use when image generation is part of a broader SEO or publishing workflow.
  • Use only when the required image-generation extension is available.

Architecture Note

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:
  5. Load references/prompt-engineering.md for the 6-component system
  6. Apply domain mode emphasis (Subject 30%, Style 25%, Context 15%, etc.)
  7. Be SPECIFIC and VISCERAL: describe what the camera sees
  8. Generate via gemini_generate_image MCP tool
  9. Post-generation SEO checklist (see below)

Check for Presets

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

python3 ~/.claude/skills/seo-image-gen/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: bash 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: json { "@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: html <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 ~/.claude/skills/seo-image-gen/scripts/cost_tracker.py log

Details

Category Content → writing
SourceAgriciDaniel/claude-seo
SKILL.mdView on GitHub →
Repo Stars★ 9.6K
Est. per SkillN/A (shared across 25 skills from this repo)
DifficultyIntermediate
Risk LevelN/A

Related Skills

Works Well With

Skills from the same repository — often designed to work together