Speaker Open Graph Image Template
A dark speaker card with a large avatar, name and role, and talk title.
A dark speaker card with a large avatar, name and role, and talk title.
Search blocks by description or jump to a page.
Every OG image is included with Pro and Team. Start a plan to copy the code, install with the CLI, and download the raw SVG.
Already on a plan? Log in
Use the Speaker template for conference speakers, panelists, and guest hosts. It leads with the person: an event line and a Speaker chip sit up top, a large avatar and name anchor the middle, and the talk title with its stage and date closes the card, one file to generate per speaker.
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 speaker 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. Because the name, role, and talk are text, a lineup of twenty speakers is twenty edits of the same file, or one content fed from your schedule.
Install with the shadcn CLI using your Shadcn UI Blocks API key:
npx shadcn@latest add @shadcn-ui-blocks/og-image-speaker-card
The file lands at app/opengraph-image.tsx, which makes it the site wide share card. For a speaker page, move it into that segment instead, for example app/conf/speakers/ana-silva/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 event, the label chip, the speaker name, their role, the initials for the avatar, the talk title, and a meta line for stage and date. The avatar shows initials on a solid fill; wire in an image if you prefer a photo. The name renders at 54 pixels and the talk at 38, so a full talk title still fits under the 940 pixel cap. Keep the role and meta to one line each.
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.