Open Graph image (`og:image`)
The preview picture attached to a URL, usually 1200x630: the banner people see before they see your site.
See it
What it is
og:image names the picture attached to your URL wherever it gets pasted. The protocol allows several and lets the client choose, but in practice you ship one and every app shows that one. 1200x630 pixels (1.91:1) is the broadly compatible recommendation rather than a rule in the spec, as PNG or JPG from an absolute https URL. File size and dimension ceilings come from each platform, not from Open Graph, so look up the limits of whichever surfaces matter to you before shipping a heavy card. Some of them crop square (iMessage, some Slack layouts), so keep the important stuff inside a centered safe area and never put text near the edges.
Treat it as a billboard, not a screenshot. The card is often rendered 400px wide in a crowded feed, so big type, high contrast, the page title, and your logo beat a shrunken hero section every time. Per-page dynamic images are the upgrade: Next.js ImageResponse (the @vercel/og route), Satori, or a headless-browser render can stamp the post title onto a branded template at request time, which is why every developer blog suddenly has matching share cards.
Gotchas worth the scar tissue: scrapers do not execute JavaScript and do not authenticate, so if the image sits behind a login, a signed URL, or a client-side render, the card comes back blank. SVG is widely unsupported. And because previews are cached per URL, a redesigned card usually needs a filename change or a debugger re-scrape before anyone sees it.
Ask AI for it
Generate dynamic Open Graph images for this site at 1200x630. Build an image route (Next.js ImageResponse / Satori or equivalent) that renders a branded template per page: the page title in large bold type on the left, a short kicker or category label above it, the site logo and domain bottom-left, a solid brand-color or subtle gradient background, and generous padding so nothing important sits within 80px of any edge. Return PNG, cache it, and wire the absolute URL into each page's og:image plus og:image:width, og:image:height, and og:image:alt. Check the file size against the published limits of the platforms I care about rather than assuming one universal cap.