An Open Graph image is the picture a link turns into when it is pasted into X, LinkedIn, Slack, iMessage, WhatsApp or Discord. Most pages get the click or not on that card alone, before anyone reads a word of the page. The generator above makes one from a title, a line and a logo, at the size every platform reads, and writes the tags that attach it to the page.

Open Graph image size and dimensions

• 1200 × 630 pixels, a 1.91:1 ratio. Facebook and LinkedIn document it; X’s large card, Slack and iMessage all read it well. There is no reason to make anything else in 2026.
• Under 1 MB as a PNG or JPEG. The generator’s PNGs land well under that. Some platforms ignore images above 5 MB entirely.
• The safe zone is the middle. X crops the large card to roughly 2:1, some feeds crop to a square preview, and mobile clients shave the edges. Keep the title and the logo inside the central 80% — every template here does.
• Minimum text size ≈ 48 px on the 1200-wide canvas, because the card is shown at a third of that width on a phone. The templates scale the title down with length rather than wrapping it into a paragraph.

The tags that attach it

<meta property="og:title" content="How we cut our checkout time in half">
<meta property="og:description" content="A teardown of the twelve changes that mattered.">
<meta property="og:image" content="https://example.com/blog/checkout/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/blog/checkout/og-image.png">

• Absolute URLs only. A relative og:image is the most common reason a card shows no picture.
• Width and height let the first share render the card before the image is fetched; without them the first scrape often shows a blank.
• twitter:card = summary_large_image is what turns X’s small thumbnail into the full-width card. Without it, X shows a square.
• Cards are cached per platform. Change the image, and X, LinkedIn and Facebook keep the old one until you re-scrape the URL in their debuggers or give the image a new filename.

What makes a card get clicked

1. The title is the whole card. Six to ten words, the claim of the page, no site name in it — that goes in the corner.
2. One line under it, or none. A second sentence that adds a number or a specific outweighs three that repeat the title.
3. Contrast. Dark type on a light ground or the reverse. A photo with text on top needs a scrim; the templates avoid the problem by not using photos.
4. The logo small, the title large. Readers already know what site the link came from — it is in the card’s footer.
5. One per page. A site-wide default image is fine as a fallback; a page with its own card is the one that gets shared.

Making them at scale

For a blog with hundreds of posts, generate the image from the page at request time instead of uploading a file per post. Next.js does this with ImageResponse in an opengraph-image file; Astro, Nuxt and SvelteKit have equivalents, and Vercel’s @vercel/og works anywhere Node runs. The templates above are the same technique — the generator is that code with a form in front of it.

Checking the result

Paste the page into the meta tag checker to see the tags as scrapers read them and the card as X and LinkedIn render it. For a fresh scrape after a change, use the platform’s own debugger: LinkedIn Post Inspector, Facebook Sharing Debugger, and for X simply post the link in a draft.

Frequently asked

Can I use a square image?

You can, and most platforms will crop or letterbox it. 1200 × 630 is the one size that renders well everywhere without either.

Why does my logo not appear?

The generator fetches it from the URL you give, so it has to be public and a PNG, JPEG or WebP. SVG logos are not supported by the renderer — export a PNG at 400 px or more.

Does the OG image affect SEO?

Not rankings. It affects how often the link is clicked when shared, which is where many of a page’s first visitors and first links come from.

Can I hot-link the generated image?

No — download it and host it with the page. An image served from another domain is one outage away from a blank card.