feat(seo): enhance og:image with branding and spec overview collage

[MarkusNeusinger]

Summary

Improve the og:image previews for better brand recognition and more informative social media cards.

Current State

• Implementation pages (/{spec_id}/{library}): Show raw plot image from GCS
• Spec overview pages (/{spec_id}): Show default og-image.png

Proposed Enhancements

1. Brand overlay for implementation images

Add pyplots.ai branding to implementation preview images:

┌─────────────────────────────┐
│                             │
│      [Plot Image]           │
│                             │
├─────────────────────────────┤
│ 🎨 scatter-basic            │
│ matplotlib · pyplots.ai     │
└─────────────────────────────┘

Options:

• A) Generate branded images at impl-merge time (store in GCS)
• B) On-the-fly image composition (add endpoint /og/{spec_id}/{library}.png)

2. Spec overview collage

Generate a composite og:image for spec overview pages showing multiple library implementations:

┌───────────┬───────────┐
│ matplotlib│  seaborn  │
├───────────┼───────────┤
│  plotly   │  bokeh    │
└───────────┴───────────┘
    scatter-basic · pyplots.ai

Options:

• A) Pre-generate collage at sync time when all impls are ready
• B) On-the-fly generation with caching

Acceptance Criteria

• Implementation og:images include pyplots.ai branding
• Spec overview pages show a collage/grid of available implementations
• Images are optimized for social media dimensions (1200x630 recommended)
• Caching strategy for generated images

Technical Notes

• Consider using Pillow for image composition
• Could reuse core/images.py infrastructure
• GCS storage: plots/{spec_id}/og-overview.png for collages

Related

• Builds on feat(seo): add bot detection for dynamic og:image tags #3171 (SEO bot detection)