Product Roadmap
Social Sharing & OG Images
Rich preview cards when deals are shared — dynamic OG image generation
Priority: V2
Basic SEO metadata (OG tags on deal/product pages, sitemap, robots) is a launch-checklist item in Operations §10; the dynamic per-deal OG images and share buttons below are the V2 upgrade on top.
Goal
When a user shares a deal on Facebook, Twitter/X, Discord or WhatsApp, show a rich preview card with product image, title, price and condition — not a generic site preview.
Dynamic OG images
Next.js generates OG images on the fly via opengraph-image.tsx:
/deal/[id]/opengraph-image.tsx
→ 1200×630px image, generated on-the-fly (Satori / Vercel OG)
→ Shows: product photo, deal title, price, condition badge, seller trust level
→ Cached after first generationTemplate sketch:
┌──────────────────────────────────────────┐
│ ┌──────────┐ │
│ │ │ DJI Goggles 3 + RC Pro │
│ │ PRODUCT │ │
│ │ IMAGE │ €399.00 · Like New │
│ │ │ │
│ │ │ ✓ Verified Seller │
│ └──────────┘ │
│ │
│ KwadMarket — FPV Drone Marketplace │
└──────────────────────────────────────────┘Meta tags per deal
<meta property="og:title" content="DJI Goggles 3 — €399" />
<meta property="og:description" content="Like New condition · Paris, France · Verified Seller" />
<meta property="og:image" content="https://kwadmarket.com/deal/123/opengraph-image" />
<meta property="og:type" content="product" />
<meta name="twitter:card" content="summary_large_image" />Share buttons
On each deal page: copy link · Facebook · Twitter/X · WhatsApp · Discord (copy link with embed preview). Use the native Web Share API on mobile (falls back to copy link).
Tasks
- Dynamic OG image route (
/deal/[id]/opengraph-image.tsx) + template (Satori/Vercel OG) - Per-deal
generateMetadatain the page layout; Twitter Card tags - Share button component (copy link, socials, Web Share API)
- JSON-LD structured data (Product schema for SEO)
- Test previews on the Facebook debugger and Twitter card validator