Open Graph image (`og:image`)
The 1200x630 preview picture attached to a URL: the banner people see before they see your site.
See it
What it is
The og:image is the single picture attached to your URL wherever it gets pasted. The de facto spec is 1200x630 pixels (1.91:1), under about 5MB, PNG or JPG, served from an absolute https URL. Some surfaces crop it 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.