Documentation Open Graph Image Template
A docs card with a breadcrumb trail, page title, and reading metadata.
A docs card with a breadcrumb trail, page title, and reading metadata.
Search blocks by description or jump to a page.
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 Documentation template for docs, guides, and knowledge base articles. It mirrors how a docs page presents itself: a breadcrumb trail for orientation, the page title as the headline, a summary underneath, and chips for reading time and freshness, plus a version chip so screenshots of old docs are recognizably old.
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 a docs page 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. One file in your docs segment gives every article its own card, driven by the same data the page renders from.
Install with the shadcn CLI using your Shadcn UI Blocks API key:
npx shadcn@latest add @shadcn-ui-blocks/og-image-documentation
The file lands at app/opengraph-image.tsx, which makes it the site wide share card. For docs you will usually move it into the docs segment instead, for example app/docs/[...slug]/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, version chip, breadcrumb string, title, summary, and metadata chips. To generate cards per article, accept params in the default export and build the breadcrumb from the same navigation tree your docs layout uses; join the trail with slashes as the sample does. The chips array takes any short strings, so reading time, last updated, and version constraints all fit. Drop the version chip entirely if your docs are unversioned.
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.