Gemini SEO Image Assets

Gemini SEO Image Assets

Overview

Generate image-first SEO assets with Gemini 3.1, then finish the exact typography, icon sizes, manifest, and metadata locally.

Core rule: let Gemini generate composition and texture; do not rely on Gemini for exact text rendering.

When to Use

• A site has missing or generic favicon.ico, apple-touch-icon, or og-image.
• A web app needs route-level title, description, og:*, twitter:*, and canonical wiring.
• The user explicitly wants Gemini or Google AI Studio involved in the asset creation flow.

Do not use this skill when:

• The project already has a strict vector logo or brand system that should be edited directly.
• The task is only to tweak existing metadata strings without generating new raster assets.
• Exact logotypes or multilingual text must come directly from the model output.

Workflow

1. Inspect the project surface

Confirm these before generating anything:

2. Load credentials and choose the model

• Read .env.local first, then .env.
• Accept any one of these auth paths (see gemini-image-generation skill for the full _make_client() helper):
  • AI Studio: GOOGLE_AI_STUDIO_API_KEY / GEMINI_API_KEY / GOOGLE_API_KEY
  • Vertex Express: VERTEX_AI_KEY
  • Vertex ADC: GOOGLE_GENAI_USE_VERTEXAI=true + GOOGLE_CLOUD_PROJECT/LOCATION
• Default model: gemini-3.1-flash-image-preview (same name on both surfaces).
• If the user asks for a newer or latest Gemini image model, verify the current official name before use.

Minimal request shape:

{
  "contents": [{ "parts": [{ "text": "..." }] }],
  "generationConfig": {
    "responseModalities": ["IMAGE"],
    "imageConfig": {
      "aspectRatio": "1:1",
      "imageSize": "2K"
    }
  }
}

Vertex caveat: imageSize is not accepted on Vertex endpoints (raises ValidationError: Extra inputs are not permitted). Omit imageSize when routing through VERTEX_AI_KEY / Vertex ADC; the model returns its default resolution and you post-process to the target exports.

3. Generate two base images

Always generate background/base artwork, not final text-complete share cards.

Use the prompt templates in references/prompts.md. Adapt the palette, mood, and product nouns to the project.

4. Post-process locally

Do the deterministic steps on the local machine:

• Crop/fit the favicon master to a square source such as 1024x1024.
• Export:
  • favicon.ico
  • favicon-16x16.png
  • favicon-32x32.png
  • apple-touch-icon.png
  • android-chrome-192x192.png
  • android-chrome-512x512.png
• Fit the OG base to 1200x630.
• Add title, subtitle, tagline, or other exact copy with local drawing tools or code.
• Prefer local fonts and color tokens from the project instead of asking Gemini to render exact text.

5. Wire SEO metadata

Preferred structure:

Recommended rules:

• Home or marketing entry pages may be index,follow.
• Quiz, shell, preview, and result routes are usually noindex,nofollow.
• If the deployment origin is known, use VITE_SITE_URL to produce absolute canonical, og:url, and og:image.
• If the origin is unknown, keep paths root-relative and let the runtime origin resolve them.

6. Validate before claiming completion

Run all of the following:

Guardrails

Reference Files

• references/prompts.md: prompt templates for favicon and OG background generation.