Menu

1 / 3

Open Graph images for every page with Next.js ImageResponse

DEV Community: react·RadarMakers·3 days ago
#dOlsqToa
#devtoreact#devto#dev#product#const
Reading 0:00
15s threshold

A link to a product page should show that product in the preview card, not the same site banner as every other link. On our launch platform, live product pages use a 1200 x 630 PNG generated on the server with ImageResponse from next/og . Tag pages use the same generator except for eight tags: ai , ai-agents , audio , design , finance , music , open-source and productivity . Those tags use static Open Graph images at /og/tag/<slug>.png and separate Twitter images at /og/x/tag/<slug>.png . This is the image for one of the products listed on RadarMakers :

Nothing in that image was drawn by hand for this product. The layout is shared, the name, tagline and logo come from the database, and the text sizes were picked by measuring the text before rendering. Here is how the pieces fit together, using our real code on Next.js 16.

A route handler per image, a versioned URL in the metadata

Next.js offers two ways to serve a generated image.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.