seo-visual

name	seo-visual
description	Visual analysis, screenshot capture, mobile rendering testing, and Visual Search readiness assessment. Uses Playwright for multi-viewport screenshots and above-the-fold analysis. Checks Google Lens optimization and image discoverability. Use when user says "visual", "screenshot", "mobile rendering", "above the fold", "Visual Search", "Google Lens".

seo-visual — Visual Analysis & Visual Search Readiness

Multi-Viewport Screenshot Capture

Device	Width	Height	Scale
Desktop	1920	1080	1x
Laptop	1366	768	1x
Tablet	768	1024	2x
Mobile	375	812	2x

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

Category	Weight
Above-the-fold content	30%
Mobile responsiveness	30%
Visual Search readiness	25%
Image quality & formats	15%

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