Company news Open Graph Image Template
A company news card with an announcement chip, headline, and date line.
A company news card with an announcement chip, headline, and date line.
Every Open Graph image template is included with Basic and Pro. Pick a plan to copy the code, install with the CLI, and download the raw SVG.
Already purchased? Log in
Use the Company news template for corporate announcements that are not full press releases. It pairs an announcement chip with a large headline and a one line summary, then closes on a dateline, the house style for measured news.
This template is a metadata image route for the Next.js App Router. The file exports size, contentType, and alt values plus a default async function that returns an ImageResponse. When the announcement is shared, satori converts the JSX into an SVG document, the runtime rasterizes that SVG into a 1200 by 630 PNG, and Next.js serves the result and wires the og:image and twitter:image tags into the page head automatically. The headline runs at display size while the summary stays quiet beneath it, so the news carries the card and the detail only supports it.
Install with the shadcn CLI using your Shadcn UI Blocks API key:
npx shadcn@latest add @shadcn-ui-blocks/og-image-company-news
The file lands at app/opengraph-image.tsx, which makes it the site wide share card. For a news post, move it into that segment instead, for example app/news/european-data-region/opengraph-image.tsx. You can also copy the code from this page straight into your project.
The card renders text with Inter, read from assets/fonts at your project root with node:fs so the font files never ship to the browser. Download the latin woff files for weights 400, 500, 600, and 700 from Fontsource and save them as assets/fonts/inter-latin-400-normal.woff and so on.
The content object holds the brand, the label chip, the title, the description, the date, and the url. The title renders at 70 pixels inside a 1000 pixel max width, so it is built for a short headline of a few words; trim it before it reaches a third line. The description sits at 28 pixels with a 920 pixel width and reads best as one full sentence that adds the detail the headline leaves out. The label chip is a quiet outlined pill; keep it to one word like Announcement so it frames the news without competing.
satori supports a focused subset of CSS: flexbox layout only, flat colors, and an explicit display: flex on any element with multiple children. Keep those rules in mind if you rework the layout.