Build a 1200 by 630 share card from a page title, subtitle, and brand colours.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Slate background with a blue accent bar under the title. Suits most software brands without further tuning.
White background with the brand logo top-left and a subtle accent strip beneath the title.
Adds an author name and avatar in the lower-left, useful for editorial posts where the writer matters.
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.
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.
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.
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.
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.
Generate dynamic Open Graph images from JSON
Editorial hero images for blog posts and article pages
Generate share-ready images sized for Twitter/X posts
Render an invoice as a PNG to embed in email bodies without forcing a PDF attachment.
Build vertical 1000 by 1500 Pinterest pins from a title, an image, and a brand colour.
Turn a quote and an attribution into a 1080 by 1080 PNG for Instagram and LinkedIn.
The Open Graph Image Generator runs on the HTML to Image API. Call the same renderer from your own code with a free account. 25 renders a month on the free tier. See the pricing page for higher-volume plans.