01clauding/claude-seo-skill/seo-visual

seo-visual — Visual Analysis & Visual Search Readiness

Multi-Viewport Screenshot Capture

Use scripts/capture_screenshot.py for automated capture.

Above-the-Fold Analysis

Check without scrolling:

• H1 visibility: Primary heading visible immediately
• CTA visibility: Main call-to-action button above fold
• Hero content: Key image/video loading properly
• No layout shifts: Page stable on initial load

CTA Detection Selectors

/* Common CTA patterns */
a[href*="signup"], a[href*="contact"], a[href*="demo"],
button:has-text("Get Started"), button:has-text("Try Free"),
button:has-text("Sign Up"), button:has-text("Learn More"),
button:has-text("Shop Now"), button:has-text("Download"),
[class*="cta"], [class*="hero-button"]

Mobile Responsiveness Checks

• Viewport meta: <meta name="viewport" content="width=device-width, initial-scale=1">
• Touch targets: Minimum 48x48px (Google recommendation)
• No horizontal scroll: Content fits within viewport width
• Readable text: Base font ≥16px without zooming
• Navigation: Hamburger menu or visible nav accessible
• Images scale: No overflow or cropping at mobile widths

Visual Search Readiness (Google Lens)

Google Lens processes 12-20 billion visual search queries/month (2025). 60% of Gen Z prefers visual search for product discovery.

Google Lens Optimization Checklist

• [ ] Filename matches content: red-running-shoe-nike-mens.jpg not IMG_20250301.jpg
• [ ] ALT text matches computer vision: Describe what the image shows visually
• [ ] Clean backgrounds: Product images on white/neutral backgrounds
• [ ] Multiple angles: 3-5 views per product (front, side, detail, in-use)
• [ ] Consistent lighting: Even, professional lighting across product images
• [ ] High resolution: ≥800px on longest edge for Lens recognition
• [ ] Schema markup: ImageObject with contentUrl, caption, creator
• [ ] Merchant Center: Product inventory uploaded for direct product matching

Circle to Search (Feb 2026)

• Gemini 3 powers multi-object recognition in single image
• Ensure each product in group shots has individual ALT text
• Use <picture> element with multiple source formats (AVIF → WebP → JPEG)

Playwright Timeout Handling

# Use domcontentloaded for faster completion
page.goto(url, wait_until='domcontentloaded', timeout=30000)  # 30s max
# Optional networkidle with short timeout
page.wait_for_load_state('networkidle', timeout=10000)  # 10s fallback

If Playwright unavailable: Return {"error": "playwright_unavailable", "fallback": "webfetch"}. The orchestrator will fall back to static HTML analysis via WebFetch.

If analysis exceeds 30s: Return partial results with "timeout": true.

Scoring

Output Format

Generate visual analysis with:

1. Screenshots saved to screenshots/ directory
2. Above-the-fold assessment (H1, CTA, hero visibility)
3. Mobile responsiveness score (pass/fail per check)
4. Visual Search readiness score (Google Lens optimization)
5. Specific issues with element locations and fix recommendations