Video Open Graph Image Template
A dark video card with a play button, title, and duration and view chips.
A dark video card with a play button, title, and duration and view chips.
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 Video template for a single video's watch page. A large play button sits beside the brand row, the video title, a one line description, and duration and views chips, so the card reads as watchable the moment it lands in a feed. It gives every video a consistent share face with no thumbnail per upload.
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 video 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. The play button is an inline svg triangle inside a filled circle, so it stays crisp at any scale.
Install with the shadcn CLI using your Shadcn UI Blocks API key:
npx shadcn@latest add @shadcn-ui-blocks/og-image-video-episode
The file lands at app/opengraph-image.tsx, which makes it the site wide share card. For a video library, move it into the video segment instead, for example app/videos/[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, title, description, chips, and url. The chips array carries the duration and view count, two entries by default, each a bordered pill, so add a third for a category or channel if you like. Swap the single letter brand tile for your mark with an inline svg. The title renders at 62px over roughly two lines; trim the fontSize if headlines run long. To place the card over real frame art, drop an img behind the layout.
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.