OG Image Generator

Marketers shipping a launch post, bloggers who want consistent share cards, and developers wiring og:image into a static site all need the same 1200 by 630 PNG without opening a design suite. This generator draws the card on a canvas in your browser, auto-shrinks long titles until they fit, and exports a ready-to-upload PNG with zero accounts and zero uploads.

Title

Subtitle

Site name

Badge

Gradient start

Gradient end

Angle 135°

Text

Accent

Live Preview

Preview is scaled; the download is always 1200x630.

How the Canvas Renders the Card

The script sizes an offscreen canvas at the export resolution, paints a linear gradient across the requested angle, then lays out three bands: an accent bar on the left edge, a badge pill at the top, and the title block centered in the remaining space. Title measurement uses the 2D context measureText API, and the font size steps down two pixels at a time until every line fits inside the safe width and line budget.

Subtitle and site name render below the title at fixed smaller sizes with the same text color at reduced opacity, so the hierarchy stays clear without extra controls. All drawing happens in memory; the visible preview canvas is the same element that gets exported, so what you see is byte-for-byte what the PNG contains apart from browser scaling of the display size.

Export pipeline

The download button calls canvas.toBlob with the PNG type, builds an object URL, and triggers a temporary anchor click. The URL is revoked immediately after, so the tab does not accumulate blobs during repeated exports. Filenames default to og-image.png and can be renamed on save.

Typography safety rules

The title starts at 72 pixels and shrinks to a floor of 28, wrapping on word boundaries up to three lines. Subtitles wrap to two lines at 30 pixels. If the text still cannot fit at the floor size, the layout truncates cleanly rather than overflowing the canvas edge, which keeps the export usable even with an overlong paste.

Before and after: plain link to branded card

Before (no og:image)

<meta property="og:title"
  content="Static Site SEO Clinic">
<!-- platform shows text only -->

After (image attached)

<meta property="og:image"
  content="https://example.com/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

Use Cases

Developer	Production	Workflow
Generate per-post cards from frontmatter titles in CI	Brand every launch announcement with the same palette	Designers hand marketers a self-serve card maker
Export test PNGs for og:image validator checks	Ship consistent share images across a docs site	Create variant cards for A/B social tests
Prototype card layouts before wiring a build script	Replace missing images on legacy blog posts	Localize card text per market without design tickets

Common Mistakes and Troubleshooting

The most common mistake is uploading the PNG without adding og:image to the page, or pointing og:image at a relative path that the scraper cannot resolve. Use an absolute HTTPS URL, and include og:image:width, og:image:height, and og:image:alt so platforms lay out the card without guessing. A second issue is low contrast text on bright gradients; raise the difference between the text color and both gradient stops before exporting.

Long titles silently shrink and may look smaller than expected on a phone. Trim the copy rather than forcing the smallest size, and keep the critical words in the first line. After replacing an image at the same URL, platforms keep serving the cached version until you trigger a re-scrape, which is why a freshly generated card sometimes does not appear in the debugger until you press the scrape button.

Best Practices for Social Cards

Fix a brand palette once and reuse it, so a stream of shares looks like one publication. Keep the title under 70 characters, mirror it in og:title, and write alt text that describes the card for screen readers on platforms that support it. Name files predictably, such as og-2026-11-webinar.png, so cache busting is a simple URL change.

Store the PNG in the same repository or asset pipeline as the post so it versions with the content. Validate the final URL with the OG Image Validator after each deploy to confirm dimensions and file type still match platform rules. When running paid social, export a second variant with the badge field set to the campaign name so organic and paid shares stay distinguishable in analytics.

OG Image Generator FAQ

What size should an Open Graph image be?

The safe universal size is 1200 by 630 pixels, which Facebook, LinkedIn, Slack, and Discord all render without cropping the important content. Smaller images get upscaled and look soft, while much larger images may be cropped differently across platforms. This generator always exports at 1200 by 630 so one file works everywhere.

Where does the generated image live after I download it?

Nowhere except your machine. The card is drawn on an HTML canvas element in the tab, and the download button converts that canvas to a PNG blob that the browser saves through a temporary object URL. No image data is uploaded, so unreleased post titles and brand drafts stay private.

Which fields map to og:image meta tags?

The image itself becomes the og:image tag on your page, and you should still set og:title, og:description, and og:image:alt separately in the HTML. The title and subtitle on the canvas are visual copies of that metadata; keep them in sync so the card and the fallback text a platform shows before the image loads do not contradict each other.

Why does my card still show the old title after I update the image?

Social platforms cache scraped metadata, often for weeks. Facebook offers a Sharing Debugger with a scrape-now button, LinkedIn has its own post inspector, and Slack refreshes when you message the URL in a test channel. After replacing the PNG on the same URL, force a re-scrape instead of expecting an instant update.

How large should the PNG file be?

Keep social images under about 300 kilobytes when you can. A flat gradient with text compresses very well in PNG, and most exporters land well under that limit. If you add a photographic background later, consider converting to JPEG or WebP, though some platforms prefer PNG for crisp text edges.

Does the text stay readable on mobile share sheets?

Share cards are shown small on phones, so the generator starts the title at a large size and shrinks until it fits inside the safe area. Keep titles under roughly 70 characters, use high contrast between text and background, and avoid placing critical words at the extreme corners where platform UI can cover them.

Can I use this for Twitter summary cards too?

Yes. The Twitter or X summary_large_image card uses the same 2:1-ish landscape ratio, and a 1200 by 630 PNG works after the platform letterboxes or crops the edges. Export one image, reference it from both og:image and twitter:image, and keep the alt text descriptive for accessibility.