Open Graph Social Card Image Generator
Design and export a social share image (Open Graph / Twitter Card) with a title, description, gradient or solid background, and your choice of font — entirely in your browser, ready to use as og:image.
Input
Picks white or dark text automatically for contrast.
Used for the site name and the top-bar layout's accent stripe.
Card preview
1200 × 630px
Everything renders in your browser — nothing here is uploaded anywhere.
Guides
Every time a link is shared on Facebook, LinkedIn, Slack, or X/Twitter, the platform looks for an og:image (or twitter:image) meta tag and uses it to build a preview card. Without one, shares fall back to a random screenshot or a blank gray box — a missed chance to make a link look intentional and clickable. This tool designs that image and hands you a ready-to-use PNG, JPG, or WebP file, entirely in your browser.
Why 1200 × 630?
That's the de facto standard "safe" Open Graph size: wide enough to fill Facebook's and LinkedIn's card, and cropped consistently across every platform's slightly different aspect ratio. This tool defaults to it, and also offers an X/Twitter "summary large image" preset (1200 × 600) and a LinkedIn preset (1200 × 627) — or set a fully custom width and height for a platform not listed.
How to use it
- Pick a size preset, or enter a custom width/height.
- Type your title and, optionally, a short description and site name.
- Choose a background — a solid color or a two-color gradient (with a few quick-pick themes and an adjustable angle) — plus a font, layout, and text sizes.
- Watch the preview update live on the canvas as you adjust settings.
- Download as PNG, JPG, or WebP, then upload the file wherever your site or CMS lets you set a social image (or reference it directly in an
og:imagetag).
The title automatically shrinks to fit if it's long, wrapping across up to three lines before the font size backs off further — so a long headline never runs off the edge of the card.
Layout options
- Centered — title and description centered, classic card look.
- Left-aligned — text anchored to the left, good for a wordmark-style site name in the corner.
- Top-bar accent — adds a thin accent-colored stripe across the top, a subtle branding touch.
Privacy
Everything — drawing, text layout, and export — happens on the canvas in your browser. Nothing you type or generate is uploaded anywhere.
What if I already have a page with Open Graph tags?
Use the Open Graph Checker to fetch a live URL and see its current Open Graph, Twitter Card, and meta tags — useful for confirming an image you just generated is actually wired up correctly. To preview how a title/description/image combination will look as a card before publishing, try the Open Graph & Twitter Card Preview tool. Once your image and copy are set, the HTML Meta Tag Generator can produce the full <meta> tag block to paste into your page's <head>.