Released: January 29, 2026
Dynamic branded OG images for all 78 tarot cards. When sharing card links on Twitter, Bluesky, Facebook, or other social platforms, users now see a beautifully designed 1200×630 horizontal image instead of the awkwardly cropped vertical card.
- Dynamic generation: Each card page automatically generates a branded social sharing image
- Layout: Card image on right, branding + name + summary + keywords on left
- Background: Purple/indigo starfield gradient with scattered sparkle effects
- Size: 1200×630 pixels (Twitter/OG recommended dimensions)
- TarotTALKS branding (top left)
- Card name in large uppercase text
- Card summary (truncated to 120 chars)
- Up to 4 keyword pills with indigo styling
- Full card artwork displayed without cropping
- Cosmic starfield background with glowing sparkles
app/cards/[slug]/opengraph-image.tsx- Dynamic OG image generator for OpenGraph/Facebook/Blueskyapp/cards/[slug]/twitter-image.tsx- Dynamic image for Twitter/X
app/cards/[slug]/page.tsx- Updated metadata to use dynamic images instead of static card URLs
- Uses Next.js
ImageResponsefromnext/og - Node.js runtime (postgres driver not edge-compatible)
- Fetches card data from database at request time
- External card images loaded from Supabase Storage
Before: Vertical 400×560 card images displayed poorly on social feeds (cropped or tiny thumbnails)
After: Horizontal 1200×630 branded images with:
- Full card artwork visible
- App branding for recognition
- Card name and summary for context
- Keyword pills showing card themes
- Share any card URL on Twitter → branded horizontal image appears
- Share any card URL on Bluesky → same branded image appears
- Direct image URLs:
/cards/{slug}/opengraph-image
- Images are generated on-demand (not pre-built)
- Automatically updates when card data changes in database
- No additional storage costs (generated at runtime)