The OG image is a screenshot of the page itself

Every blog post needs a social card. Most teams build a separate rendering path for it: a serverless function, an HTML template, a headless browser they pay for by the millisecond.

You already render the page. You add a /card route to it with a 1200×630 layout and the post title. The exec script behind og/[slug].ts calls the browser service with screenshot?url=https://yoursite.com/card/[slug]&format=png on an instance started at a 1200×630 viewport, writes the PNG to the files service, and returns its URL. First request renders. Every request after serves the file.

Same fonts, same CSS, same components as the article. When the design system changes, the cards change with it, because they are the design system.

Social cards stop being a second rendering pipeline and become a second viewport.