Share a blog post link on Slack, X, or LinkedIn without an Open Graph image, and it shows up as a bare link or a generic favicon-sized card. Add one, and it shows a full preview with a title and image — which measurably changes click-through, especially in feeds where dozens of links compete for attention. This is what OG images are, the tags that wire them up, and the three practical ways to actually generate them.
This is one piece of the larger picture — see the technical SEO checklist for everything else a post needs before it's really ready to publish.
What an Open Graph image actually is
It's just an image, referenced by a meta tag, that social platforms and chat apps pull when someone shares a link. The standard dimensions are 1200×630px (a roughly 1.91:1 ratio) — smaller and platforms will upscale it looking soft; a very different ratio and it gets cropped unpredictably depending on the platform.
The tags that make it work:
<meta property="og:image" content="https://yourdomain.com/og/post-slug.png" />
<meta property="og:title" content="Your Post Title" />
<meta property="og:description" content="Your meta description" />
<meta name="twitter:card" content="summary_large_image" />
twitter:card set to summary_large_image is what makes X/Twitter render the image large rather than as a small thumbnail next to the text — easy to forget and the most common reason an OG image "isn't showing" when it actually is, just tiny.
Option 1: design them by hand
The simplest approach: create a 1200×630 template in Figma or Canva, drop in your title text, export as a PNG, and upload it per post. This works fine at low volume and gives you full design control.
It stops scaling once you're publishing regularly — every post becomes a design task, and it's easy to forget for a post published in a hurry, which is usually when it matters most for reach.
Option 2: generate them programmatically
Tools like Vercel's @vercel/og (built on Satori, which renders JSX/HTML+CSS to an image) let you generate an OG image on the fly from a template — pass in the title and any other fields as URL parameters, and get back a rendered PNG. Astro projects commonly wire this up with satori directly or a package like astro-og-canvas; Next.js has next/og's ImageResponse built in for the same purpose.
This is the right middle ground for a hand-built site: one template, styled once, that automatically renders a consistent, on-brand image for every post using its actual title — no manual export step per post.
Option 3: let the platform generate them automatically
Some blogging platforms handle this entirely — Blogizi renders a per-post OG image automatically, matched to your blog's actual theme (light or dark, your accent color) rather than a generic placeholder, with no template to build or export step to remember. This is effectively Option 2 with the template already built and maintained for you.
If you're deciding which platform handles this kind of thing for you versus which requires you to build it, see best developer blogging platforms, GitHub Pages vs Blogizi, and Astro blog vs Blogizi — OG image generation is one of the recurring differences between them.
Checking it actually works
Before trusting an OG image is live, verify it directly rather than just eyeballing the tag:
- Facebook's Sharing Debugger and LinkedIn's Post Inspector both show exactly what they'll render, and let you force a re-scrape if a platform cached an old version
- Paste the link into a private/incognito Slack or Discord channel — fastest real-world check
- Confirm the image URL itself resolves directly in a browser tab — a broken image path is the single most common cause of a missing preview
Cache is the other common gotcha: social platforms cache OG data aggressively, so if you fix a broken image, don't be surprised if old shares still show the stale version until the platform re-scrapes the URL.