Social cards are the storefront of your links. When someone shares your product page on Twitter or LinkedIn, that 1200×630px rectangle is doing all the work. We just shipped OpenGraph image generation for all six Strug City product pages: Strug Works, Sabine, Anti-Strug, Feedtumi, Poppin, and Sports.
The Problem with Generic Social Cards
Most product pages ship with either no OG image (you get a blank gray box) or a static PNG someone exported from Figma six months ago. The static approach breaks immediately—the tagline changes, the design evolves, and suddenly your social cards are lying about what your product looks like.
We used Next.js 14's ImageResponse API to generate cards programmatically. Each product page has an opengraph-image.tsx file that renders the Aurora gradient system and product-specific accent colors at build time. The cards are React components—same gradient math, same color tokens, same design system as the actual pages.
Implementation Details
Each product page now exports an OpenGraph image function as a route segment. The function returns an ImageResponse with inline styles (Satori doesn't support external CSS). We matched the Aurora gradients by translating our Tailwind utilities into background-image strings with the same stops and directions.
Accent colors are product-specific: aurora-cyan for Sports, aurora-purple for Sabine, aurora-pink for Anti-Strug, aurora-orange for Feedtumi, aurora-yellow for Poppin, and aurora-blue for Strug Works. The gradient mesh backgrounds render the same radial patterns we use on the hero sections.
This was task US-016-T02 in our larger social metadata initiative. The TDD audit for this task caught missing test coverage for dynamic route generation, which we fixed before merge. All six product pages now ship with verified OG metadata in both development and production builds.
What's Next
We're extending this pattern to blog posts and documentation pages. The current implementation is static (generated at build time), but we're exploring dynamic OG generation for user-specific content like project dashboards and mission summaries.
The bigger opportunity is making these cards a forcing function for design consistency. If your social card looks wrong, your page probably has the same problem. When the OG image is generated from the same components as the actual UI, drift becomes immediately visible.