The Open Graph Image Generator turns a page title, a description, and a handful of brand details into a 1200 by 630 PNG that platforms unfurl when somebody shares the link. The format follows the ogp.me specification used by Facebook, LinkedIn, Slack, X, and Discord, so the same file appears correctly across the platforms most marketing teams care about. The output is a plain PNG with no transparency, which keeps the file size predictable and avoids the rendering quirks some platforms have with WebP or AVIF.
Most engineering teams reach for the tool once their site grows past a handful of pages and bespoke design work per URL stops being practical. You provide JSON, you receive a PNG, and you can wire the call into a build step, a publishing hook, or a small admin form. The output sits behind the og:image meta tag in the page head and stays there until the page content changes, at which point you re-render the card and update the cache.
How it works
Fill in the page title and subtitle
Type the page title and an optional one-line subtitle into the form. The renderer wraps the text automatically and falls back to a smaller size if the title is longer than two lines.
Set the brand colours and logo
Pick a background colour, an accent colour for the underline strip, and upload or paste a logo URL. The defaults are a dark slate background with a blue accent, which works for most software brands without further tuning.
Preview the result in the browser
The right-hand panel updates as you type, so you can see where the title wraps and how the logo sits before you commit. The preview uses the same renderer as the saved output, so what you see is what the file will contain.
Download the PNG or copy the URL
Click download to save the file locally, or copy the hosted CDN URL into your page head. The hosted URL stays valid for as long as the page content does not change, and you can re-render at any time to refresh it.
When to use it
Per-post share cards for blog publishing
Editorial sites with hundreds of posts cannot design a unique OG card for every URL. Hook the publishing flow into the generator, post the title and category, and store the URL as the post og_image meta. New posts get fresh share artwork on first publish, and historical posts can be backfilled with a single migration script.
Dynamic cards for SaaS marketing pages
A pricing page, a features page, and a docs landing all benefit from individual OG cards rather than one stock site image. Render once at build time during your Next.js or Astro build, cache the URL on the page, and the same card serves every share without runtime calls.
Documentation pages with per-topic previews
Doc pages benefit from share previews that show the topic rather than a generic logo. Render one card per page during the build, embed it in the head, and search results that surface in customer Slacks unfurl with a card matching the actual content of the page.
Link-in-bio platforms generating creator cards
Bio-link platforms that aggregate creator URLs benefit from OG cards that reflect the creator brand rather than the platform brand. Render with the creator name, accent colour, and avatar, and the share card carries the creator identity rather than a generic platform logo.
Job boards and listing platforms
A job board with thousands of postings cannot rely on a single house OG image without flattening the share preview. Generate per-listing cards with the role title, the company name, and the salary band, and every shared posting carries the specific role in the preview rather than the platform name.
Examples
Default dark layout
Slate background with a blue accent bar under the title. Suits most software brands without further tuning.
Light layout with logo
White background with the brand logo top-left and a subtle accent strip beneath the title.
Author byline variant
Adds an author name and avatar in the lower-left, useful for editorial posts where the writer matters.
Tips
Keep the title under sixty characters
Long titles wrap to a third line and the renderer drops the font size to fit. Sixty characters is a safe ceiling and matches the meta_title length most search engines display.
Stick with sRGB and PNG output
Some platforms still mishandle wide-gamut colour spaces, so sRGB stays the safest choice for share artwork. PNG keeps the file under 200 KB for default-DPI renders, which sits well within every platform file-size cap.
Re-render when the page title changes
A stale OG card showing the old title undermines the share. Trigger a re-render from the same publishing hook that updates the page meta, and update the og:image URL with a cache-busting query string when the file content moves on.
Always set og:image:alt for accessibility
Screen readers and a growing number of platforms surface the og:image:alt value when the image cannot be shown. Describe the card content in one short sentence, including the page title and the brand, and the share remains useful when the image fails to load.
Test the card in the Facebook Sharing Debugger before launch
The Sharing Debugger at developers.facebook.com/tools/debug shows exactly what Facebook scraped, what it rendered, and any warnings. Running every new template through it once before pushing to production catches the cases where og:image:width or og:image:height are missing or wrong.
Frequently asked questions
What dimensions should an Open Graph image use?
The 1200 by 630 PNG matches the ogp.me recommendation. The same size works for X summary_large_image, LinkedIn, Slack, and Discord unfurls. Anything smaller than 600 by 315 may not display on Facebook, so 1200 by 630 stays the safest default.
How do I add the image to my page?
Set the og:image meta tag in the page head with the CDN URL as the content value, then add og:image:width and og:image:height alongside it with 1200 and 630. For X, also set twitter:card to summary_large_image and twitter:image to the same URL.
Why is my new image not showing on Facebook?
Facebook caches OG images by URL aggressively. Refresh via the Sharing Debugger to re-scrape the page, or change the og:image URL itself by appending a query string when the underlying content changes. The cache typically clears within an hour after a refresh.
Does the renderer support colour emoji?
Yes, the renderer handles colour emoji in titles and subtitles through the system font fallback. Use emoji for genuinely playful content rather than as a substitute for clear copy. Most teams reserve emoji for very specific page types.
What is the maximum file size?
Facebook caps Open Graph images at 8 MB. Default-DPI renders from this generator land between 60 KB and 180 KB, which sits well under the cap. For 2x DPI versions monitor the size, since the file can climb quickly with photographic backgrounds.
Can I run this from a build pipeline?
Yes, the same generator is available as an API endpoint that takes the JSON payload and returns a hosted PNG URL. Most teams call it during the static build, store the URL with the page record, and treat the file as the canonical share card for that URL.
Why does my OG image look fuzzy on a retina display?
The default render is 1200 by 630 at 1x. Retina screens upscale the bitmap and any thin type or hairline strokes soften. Render at 2x DPI for editorial sites where typography matters, and accept the larger file size in exchange for crisper rendering on high-density displays.
Can I generate a different image for each platform?
You can, but most teams use one image for og:image and twitter:image and accept the small framing differences between platforms. The exception is when the brand uses different copy on X versus LinkedIn, in which case rendering a separate twitter:image makes sense.
Related templates
Related articles
More tools
Invoice Image Generator
Render an invoice as a PNG to embed in email bodies without forcing a PDF attachment.
Pinterest Pin Generator
Build vertical 1000 by 1500 Pinterest pins from a title, an image, and a brand colour.
Quote Card Generator
Turn a quote and an attribution into a 1080 by 1080 PNG for Instagram and LinkedIn.