What Changed
Before this commit, every route that needed an OpenGraph image—product pages, blog posts, the about page—had its own OG generation logic. That meant duplicate code, inconsistent styling, and a maintenance nightmare every time we wanted to update our social card appearance.
We consolidated all of that into a single OgTemplate component in src/components/og/OgTemplate.tsx. Now every opengraph-image.tsx file across the site imports this shared template and passes in route-specific props like title, subtitle, and gradient colors.
Why It Matters
Social cards are the first impression for most visitors. When someone shares a Strug City link on Twitter, LinkedIn, or Slack, that 1200×630 pixel image does all the talking. If it's inconsistent or broken, we lose credibility before the click even happens.
The shared template gives us three things: brand consistency (every card uses the same Aurora gradient system and typography hierarchy), faster iteration (one change updates every social card across the site), and deferred generation support (we can opt into edge rendering for performance without rewriting logic).
How It Works
Next.js App Router has built-in support for generating OpenGraph images via opengraph-image.tsx files. These are server-rendered React components that output PNGs at build time or on-demand.
Our OgTemplate component accepts title, subtitle, and gradient configuration props. It renders them using Tailwind classes inside a fixed 1200×630 layout with the Strug City wordmark, proper text hierarchy, and Aurora mesh backgrounds. Route-specific opengraph-image.tsx files are now three-line wrappers that just pass props to OgTemplate.
The commit also includes two test files: og-template.test.tsx validates the component renders correctly with different prop combinations, and og-deferred.audit.test.tsx checks that deferred generation is configured properly for performance-critical routes.
What's Next
This template is the foundation for dynamic social cards. The next step is adding runtime data—pulling blog post titles from Sanity, product names from the catalog, and real-time metrics from Supabase. We'll also explore edge-rendered OG images to reduce build times and enable personalization based on query parameters or user context.
Longer term, we want to A/B test social card designs to see which visual treatments drive higher click-through rates. The shared template architecture makes that feasible—we can swap layouts without touching every route.