# Placeholder SEO Sprint

**Date Created:** January 2, 2026  
**Status:** Active  
**Priority:** HIGH — Immediate execution  
**Owner:** Oleg  
**Duration:** 2 weeks

---

## Context

@spy research uncovered a major SEO opportunity:

| Metric | Value |
|--------|-------|
| Total search volume | 31,000+/month |
| Zero-KD keywords | 10+ keywords, 9K+ searches |
| AI competitors | **ZERO** |
| Direct user validation | r/ClaudeAI quote about MCP for placeholders |

**Strategic approach:** "Trojan Horse" — capture placeholder traffic, convert to full generation users.

**Source:** `/banatie-content/research/keywords/placeholder-niche-deep-dive-2026-01-02.md`

---

## Two Parallel Tracks

### Track A: Landing Page `/placeholder-images` (Primary)

**Goal:** Capture 14,800+ monthly searches for core placeholder keywords

**Target Keywords:**

| Keyword | Volume | KD | Priority |
|---------|--------|-----|----------|
| placeholder image | 14,800 | 18 | 🥇 |
| image placeholder | 14,800 | 17 | 🥇 |
| image placeholder dark | 4,400 | 2 | 🥇 |
| app placeholder image | 1,900 | 2 | 🥈 |
| placeholder image url | 390 | 21 | 🥈 |

### Track B: Docs Section `/docs/placeholders/` (Secondary)

**Goal:** Capture long-tail keywords, support conversion journey

**Target Keywords:**

| Keyword | Volume | KD | Priority |
|---------|--------|-----|----------|
| profile placeholder image | 720 | 0 | 🥇 |
| ios placeholder image | 590 | 0 | 🥇 |
| placeholder image css | 720 | 12 | 🥈 |
| placeholder image html | 320 | 26 | 🥈 |

---

## Track A: Landing Page

### Page Structure

```
URL: /placeholder-images
Title: "AI Placeholder Images — Generate Contextual Placeholders Instantly"
H1: "AI Placeholder Images"
```

**Sections:**

```
1. HERO
   ├── H1: "AI Placeholder Images"
   ├── Subhead: "Generate contextual placeholders instantly. Not random stock photos."
   ├── [Interactive demo: prompt input → live result]
   └── CTA: "Try It Free" / "Get API Key"

2. HOW IT WORKS (3 steps)
   ├── Step 1: Describe what you need
   ├── Step 2: Get instant URL
   └── Step 3: Use in your code

3. LIVE URL DEMO
   ├── Code snippet: <img src="...">
   ├── Common sizes selector (avatar, thumbnail, hero, og)
   └── Copy URL buttons

4. COMMON SIZES (interactive grid)
   ├── Avatar (200×200)
   ├── Thumbnail (300×200)  
   ├── Card (400×300)
   ├── Hero (1200×630)
   ├── Product (600×600)
   └── [Click to see example + copy URL]

5. USE CASES
   ├── Development mockups
   ├── Client presentations
   ├── Prototyping
   └── Design systems

6. COMPARISON TABLE
   | Service | Type | Result |
   |---------|------|--------|
   | placehold.co | Gray boxes | Generic |
   | picsum.photos | Random stock | Irrelevant |
   | Banatie | AI-generated | Contextual |

7. PRODUCTION READY (conversion bridge)
   ├── "These aren't just placeholders"
   ├── "Same images work in production"
   ├── "Or upgrade to full generation"
   └── CTA: "Get Started with Full API"

8. FOOTER CTA
   └── Email signup / Get API Key
```

### SEO Requirements

**Metadata:**
```
title: "AI Placeholder Images — Generate Contextual Placeholders | Banatie"
description: "Generate AI placeholder images instantly. Not random stock photos — contextual images from your description. Free Live URLs for development."
keywords: [
  "placeholder image",
  "image placeholder", 
  "ai placeholder images",
  "placeholder image generator",
  "placeholder image url",
  "image placeholder dark",
  "app placeholder image"
]
```

**JSON-LD:**
- WebPage schema
- HowTo schema (3 steps)
- Product schema (for rich snippets)

**Internal Links:**
- → /docs/live-urls/
- → /docs/placeholders/ (when created)
- → /docs/generation/

### Technical Requirements

**Before launch, verify Live URLs support:**
- [ ] `?width=X&height=Y` parameters
- [ ] `?aspectRatio=X:Y` (already exists)
- [ ] Dark mode hint in prompt or parameter
- [ ] Common preset sizes

**If missing:** Priority fix before landing page launch.

### Deliverable

**MVP Version (Day 1-2):**
- Text-only, minimal graphics
- Hero + How It Works + Code Example + CTA
- Working interactive demo (if Live URLs ready)

**Enhanced Version (Day 3-5):**
- Size grid with examples
- Comparison table
- Better visuals

---

## Track B: Docs Section

### Structure

```
/docs/placeholders/           ← Main page (overview)
/docs/placeholders/sizes/     ← Size-specific examples
/docs/placeholders/dark-mode/ ← Dark mode placeholders (4,400 vol, KD 2)
/docs/placeholders/profiles/  ← Avatar/profile placeholders (720 vol, KD 0)
```

### Page 1: `/docs/placeholders/` (Overview)

**Target:** "placeholder image api", "ai placeholder generator"

**Content:**
```markdown
# Placeholder Images

Generate contextual placeholder images with a single URL.

## Quick Start
[Live URL example]

## Why AI Placeholders?
- Relevant to your content (not random)
- Production-ready quality
- Instant via URL

## Common Use Cases
- Development mockups
- Client demos
- Design prototypes

## Next Steps
- [Sizes & Dimensions →](/docs/placeholders/sizes/)
- [Dark Mode Placeholders →](/docs/placeholders/dark-mode/)
- [Profile Avatars →](/docs/placeholders/profiles/)
```

### Page 2: `/docs/placeholders/dark-mode/`

**Target:** "image placeholder dark" (4,400 vol, KD 2) ← HIGHEST PRIORITY

**Content:**
```markdown
# Dark Mode Placeholder Images

Generate placeholders optimized for dark mode interfaces.

## How to Request Dark Mode
[URL with dark mode hint]

## Examples
[Grid of dark mode examples]

## Tips for Dark UI
- Use darker backgrounds
- Mention "dark theme" in prompt
- Avoid bright colors
```

### Page 3: `/docs/placeholders/profiles/`

**Target:** "profile placeholder image" (720 vol, KD 0) ← ZERO DIFFICULTY

**Content:**
```markdown
# Profile & Avatar Placeholders

Generate realistic avatar placeholders for user profiles.

## Standard Sizes
- 48×48 (small)
- 96×96 (medium)
- 200×200 (large)

## Examples
[Avatar examples]

## Diversity
Describe demographics in prompt for variety.
```

### Page 4: `/docs/placeholders/sizes/`

**Target:** "200x200 placeholder image", "placeholder image 600x400"

**Content:**
```markdown
# Placeholder Image Sizes

Common sizes and how to request them.

## Size Reference
| Use Case | Size | URL Parameter |
|----------|------|---------------|
| Avatar | 200×200 | ?width=200&height=200 |
| Thumbnail | 300×200 | ?width=300&height=200 |
| Card | 400×300 | ?aspectRatio=4:3 |
| Hero | 1200×630 | ?aspectRatio=1200:630 |

## Custom Sizes
[How to specify any size]
```

---

## Track C: Homepage Quick Wins

### Current State

Homepage at banatie.app is indexed. `PromptUrlsSection` already showcases Live URLs — perfect fit for placeholder messaging.

### Recommended Changes

**1. Add keywords to metadata:**

```typescript
keywords: [
  'API-first image generation',
  'AI image API',
  'image generation for developers',
  'prompt to image API',
  'CDN image delivery',
  // ADD THESE:
  'placeholder images',
  'ai placeholder generator',
  'placeholder image api',
],
```

**2. Update PromptUrlsSection subtitle:**

Current:
> "Perfect for static sites, prototypes, and AI coding agents that generate HTML."

Proposed:
> "Perfect for placeholder images, prototypes, static sites, and AI coding agents."

**3. Add internal link to placeholder page:**

In PromptUrlsSection, add link:
> "See more: [AI Placeholder Images →](/placeholder-images)"

### Implementation

These are 10-minute changes. Do together with docs deployment.

---

## Timeline

### Week 1

| Day | Track A (Landing) | Track B (Docs) | Track C (Homepage) |
|-----|-------------------|----------------|-------------------|
| 1 | Verify Live URLs params | — | Add keywords + update subtitle |
| 1-2 | Create MVP landing page | — | — |
| 3 | Deploy, submit to GSC | Create /docs/placeholders/ | — |
| 4-5 | Enhance with visuals | Create dark-mode page | — |

### Week 2

| Day | Track A | Track B |
|-----|---------|---------|
| 6-7 | Monitor GSC, iterate copy | Create profiles page |
| 8-10 | A/B test CTAs if traffic | Create sizes page |

---

## Success Metrics

### Week 1 (Immediate)
- [ ] `/placeholder-images` live and indexed
- [ ] `/docs/placeholders/` section live (at least overview + dark-mode)
- [ ] Homepage keywords updated
- [ ] All pages in GSC

### Month 1
- [ ] GSC shows impressions for placeholder keywords
- [ ] First organic clicks from placeholder searches
- [ ] At least one signup attributed to placeholder content

### Month 3
- [ ] Top 20 for "placeholder image" (14,800 vol)
- [ ] Top 10 for "image placeholder dark" (4,400 vol, KD 2)
- [ ] Top 5 for zero-KD keywords

---

## Technical Checklist

### Before Landing Page Launch

- [ ] Live URLs support `?width=X&height=Y`
- [ ] Live URLs support `?aspectRatio=X:Y` (verify)
- [ ] Test dark mode prompts produce dark images
- [ ] CDN caching works for Live URLs
- [ ] No rate limit issues for demo

### SEO Checklist

- [ ] Canonical URLs set
- [ ] OG image created or use default
- [ ] JSON-LD schemas added
- [ ] Internal links from homepage
- [ ] Internal links from docs
- [ ] sitemap.xml updated
- [ ] GSC submission

---

## Risk Mitigation

| Risk | Mitigation |
|------|------------|
| Live URLs not ready | Launch docs first, landing page waits |
| Low conversion to full API | Add clear upgrade path messaging |
| Competitors copy quickly | Speed — be first, build authority |
| Placeholder users expect free | Set expectations early, free tier limits |

---

## Conversion Strategy

**Key Message Throughout:**

> "Start with placeholders. Ship with production-ready images."

**Upgrade Triggers:**
1. Hit free tier limit → upgrade prompt
2. Need consistency across images → show references feature
3. Want higher quality → show production generation
4. Need API integration → show full API docs

**Placement:**
- End of every placeholder doc page
- Bottom of landing page
- In-app after X free generations

---

## Files to Create

### Landing
- `apps/landing/src/app/(landings)/placeholder-images/page.tsx`

### Docs
- `apps/landing/src/app/(apps)/docs/placeholders/page.tsx`
- `apps/landing/src/app/(apps)/docs/placeholders/dark-mode/page.tsx`
- `apps/landing/src/app/(apps)/docs/placeholders/profiles/page.tsx`
- `apps/landing/src/app/(apps)/docs/placeholders/sizes/page.tsx`

### Config Updates
- `src/config/docs-seo.ts` — add placeholder pages
- `src/config/docs-schema.ts` — add schemas if needed
- `src/app/sitemap.ts` — add new URLs

---

## Reference Documents

- Research: `/banatie-content/research/keywords/placeholder-niche-deep-dive-2026-01-02.md`
- Content brief: `/banatie-content/0-inbox/placeholder-ai-images.md`
- Docs SEO task: `/banatie-service/docs-seo-task.md`

---

**Document Owner:** @men  
**Last Updated:** January 2, 2026  
**Next Review:** End of Week 1  
**Status:** Ready for execution