Poll Open Graph Image Template
A poll card with a question title, two option bars, and a votes line.
A poll card with a question title, two option bars, and a votes line.
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 Poll template when you want the share card to do the asking. It puts the question at poster size, shows the two options as live bars with the leader filled in solid, and prints the running vote count, so the link reads as an invitation to weigh in rather than a static graphic.
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 poll 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. Wire content to your live tallies and each share renders the standings as they stood when the crawler fetched the page.
Install with the shadcn CLI using your Shadcn UI Blocks API key:
npx shadcn@latest add @shadcn-ui-blocks/og-image-poll-question
The file lands at app/opengraph-image.tsx, which makes it the site wide share card. For a running poll, move it into that route instead, for example app/polls/tabs-or-spaces/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 chip label, the question, an options array of label and value pairs, the votes summary, and the url. The template expects two options and treats any value at or above 50 as the leader, filling that bar dark with white text while the trailing bar stays light. The values are not normalized for you, so make them add up to 100 before they render. The question runs at 84 pixels, so keep it to a short line.
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.