Open Graph Image & Card Generator

Design the image and preview card that appear when your link is shared on social media. Build a perfect 1200×630 Open Graph image, see how it looks on X, Facebook, and LinkedIn, and copy the meta tags. All in your browser.

100% client-side. Your image and text are never uploaded.

Content

Headline

Description

Site name / domain

Logo (optional)

Layout

Template

Background

Color 1

Color 2

Style

Text color

Accent

Font

For the meta tags

Page URL

Used for og:url. Upload your saved image somewhere and set its address as og:image.

Open Graph image1200 × 630

How it looks when shared

X / Twitter

Facebook

Meta tags

Open-source acknowledgements

About the Open Graph Image & Card Generator

When you paste a link into a tweet, a LinkedIn post, a Slack message, or an iMessage, the big image-and-title card that pops up isn't magic — it's pulled from Open Graph meta tags in your page's HTML. Get them right and your links look professional and get more clicks; leave them out and you get a sad, blank rectangle. This tool builds both halves: a polished 1200×630 share image and the exact tags to make it show up.

It runs entirely in your browser. Your headline, artwork, and any uploaded image are composited on a local canvas and never sent to a server.

Design the card, see it live

Write your headline and description, set the site name, and optionally drop in a logo.
Pick a layout and a background — a clean gradient, a solid color, or your own image with an automatic readability overlay.
Tune text color, accent, and font to match your brand.
Watch realistic X / Twitter, Facebook, and LinkedIn previews update as you type, so there are no surprises after you publish.

Then ship it

Download the image as PNG or JPG at the exact 1200×630 size platforms expect.
Copy the meta tags — ready-to-paste og: and twitter: tags for your page's <head>.
Upload the image to your site or CDN, set its address as the og:image, and you're done.

Why it matters

A link with a strong preview card stands out in a crowded feed and clearly signals what's on the other side — which means more clicks and more trust. The 1200×630 dimension is the sweet spot that renders crisply as a large summary card across every major platform.

No account, no upload, no watermark — design it, download it, paste the tags.

Common questions

How do I control what shows when my link is shared?

Set the og:title, og:description, and og:image meta tags in your page's head. This tool designs the image at the standard 1200x630 size, previews the card as each platform renders it, and hands you the exact tags to paste.

What size should an Open Graph image be?

1200 by 630 pixels is the standard that renders well everywhere. The designer works at exactly that size, so nothing critical gets cropped by a platform's aspect ratio.

Why does my link preview show the wrong image or nothing?

Either the og tags are missing or the platform cached an old scrape. Add correct tags (this tool generates them), then use the platform's sharing debugger to refresh the cache.

Do I need separate Twitter card tags?

Adding twitter:card and its siblings alongside the og tags guarantees X renders the large summary card. The generated snippet includes both sets, ready to paste.

Can I preview before publishing?

Yes: live mockups show your card as Twitter/X, Facebook, and LinkedIn will draw it, so the first impression is checked before the link goes anywhere.