Open Graph image generator
Design the share-card image (Open Graph and Twitter Card) for any URL in your browser. Pick a template, enter the title, subtitle and domain, drop a logo, tweak the colour and the font, see how the result will look in Facebook, LinkedIn, Twitter and Slack previews, then download a 1200×630 PNG ready to publish. No upload, no sign-up; the design happens entirely in HTML5 Canvas inside your browser.
Live preview at full 1200×630 resolution. The PNG download has the exact same content.
What an Open Graph image actually does for a shared link
Open Graph (OG) is the protocol that controls how a link looks when it is shared on Facebook, LinkedIn, WhatsApp, Messenger, Slack, Discord, Mastodon, Bluesky and most modern preview services. The single most influential piece of an OG card is the image. A clean, on-brand image with the title baked in pulls more clicks than a plain link or a default site favicon by a wide margin; a missing or wrong-sized image can make the card render as an empty grey box that nobody clicks. Twitter and X use the same image through the twitter:image tag, so a single 1200×630 PNG covers the entire mainstream preview ecosystem.
This studio generates that image in your browser. You pick a template, fill the title and subtitle, drop a logo, tune the colour palette and the font, then download the final PNG. The preview is rendered at the actual 1200×630 resolution so what you see on screen is exactly what social platforms will fetch. The companion preview cards on this page simulate the look on Facebook, LinkedIn, Twitter and Slack so you can sanity-check the contrast and the title length before going live.
How the OG image builder works
Everything happens with HTML5 Canvas and a few hundred lines of vanilla JavaScript. When you change a field, the script clears the 1200×630 canvas, paints the background (a solid colour, a gradient or a textured layer depending on the template), draws the eyebrow tag, the title, the subtitle, the domain and the optional logo, then wraps and aligns each text block. The logo upload uses the browser FileReader API to read the file locally and draws it through drawImage; the file never leaves your machine. The download button uses canvas.toBlob with PNG encoding and triggers a browser-side save. The previews are plain HTML and CSS that share the same image data URI as the canvas, so they update in real time too.
- Pick a template: each one is a layout preset (heading style, alignment, accent placement) optimised for a common content type: brand pages, articles, products, quotes, gradient heroes and minimal text-only cards.
- Type the title and subtitle: the canvas wraps the text automatically, keeps the safe margin away from edges (social platforms crop a little) and resizes when the title is too long.
- Adjust the palette: background, accent, text and muted-text colour pickers give you full control. The contrast meter under “Best-practice checks” warns if the title becomes hard to read.
- Drop the logo: the logo is rendered at a fixed size in the top corner of the card. Most templates expect a square or wide logo on a transparent background.
- Download and publish: save the 1200×630 PNG, host it at a stable URL, and add the
og:imagemeta tag generated in the Meta tags tab to the page that should use it.
Common use cases for an OG image studio
- Blog post hero card. Generate a card per article with the title baked in. Even sites without a dedicated designer can ship visually consistent share cards in a few seconds per article.
- SaaS landing page. Build a brand card for the homepage, an article card for the blog and a product card for each feature page. The studio gives you template parity without hiring a designer for each variant.
- Documentation site. Auto-generate a card per docs section with the section name as the title. The result is a cleaner, more clickable card than the default screenshot many docs sites have today.
- Press release. Generate a quote-style card with a punchy headline. Quote templates outperform photographic cards in B2B social channels.
- Personal portfolio or newsletter. Build a single branded card that reuses your accent colour and logo across every shared link.
- One-off campaign. Quickly create a campaign-specific card without opening Figma or Photoshop. The output is identical in resolution and quality to what a design tool would produce.
Limitations and privacy notes
The studio outputs a static PNG. It does not animate the image, does not embed video, and does not include automated A/B testing of multiple variants. Logos are rendered at the size and position chosen by the template; very wide or very tall logos may look off-balance and benefit from a transparent square version. The Canvas API uses the font fallback chain of the user browser, so a font that is not installed locally will be substituted. For exact brand typography, host a webfont or generate the image on a server that has the font installed; for quick previews and most teams, the system font defaults are close enough.
Everything happens in your browser. The title, subtitle, logo and downloaded PNG never leave your machine. There is no upload, no analytics tied to the design, and no third-party fetch. You can use the studio for unreleased product pages and confidential campaign work without exposing the content.
Frequently asked questions
What size should an OG image be?
1200 by 630 pixels is the universally accepted size in 2026. Facebook, LinkedIn, Twitter, Slack and Discord render it correctly. The aspect ratio is roughly 1.91:1; smaller images are scaled up (and look soft), larger ones are cropped on some clients.
Why does my new image not show when I share the link?
Social platforms cache OG previews aggressively. After publishing the image, run the link through Facebook Sharing Debugger and LinkedIn Post Inspector to force a refresh. Twitter and Slack refresh on their own within a few hours.
Should I generate one OG image per page or use a single one for the whole site?
Per page is better for click-through. Use the same brand card on pages without dedicated content, and a page-specific card on articles, products and landing pages. The studio lets you do both with consistent design language.
Where should I host the generated PNG?
Anywhere stable that returns an absolute HTTPS URL: your CDN, your media folder, an object store like S3, or your CMS uploads directory. The og:image meta tag must point to the absolute URL.
Do I need both og:image and twitter:image?
If you only set og:image, Twitter falls back to it. Setting both is the safest path and lets you use a different image for X if you want, for example a vertical 2:1 variant. The Meta tags tab on this page generates the safe minimum set.
Is the design data sent to your server?
No. The studio runs entirely in your browser. Title, subtitle, logo, palette and downloaded PNG are processed locally with Canvas, FileReader and a small piece of vanilla JavaScript. There is no upload, no logging and no analytics tied to the design.
