OG Image Generator — Free Open Graph Image Maker With Social Previews
What's included
Features
About this tool
OG Image Generator — Design, Check and Export Open Graph Images in One Place
Every link you share shows a preview card, and the image is the part people notice first. This generator builds that image, shows you exactly how it will look on each platform, and gives you the code to publish it, all in your browser.
Start from 14 templates. Clean, Side Bar, Centered, Bold, Split, Blog Post, Floating Card, Minimal, Quote, Product Launch, Docs, Event, Framed and Diagonal. The thumbnails are drawn with your own title and colours, so you compare real options rather than placeholders.
Text that always fits. Titles shrink step by step until the whole block fits, and anything still too long is cut cleanly with an ellipsis. Nothing ever runs into the footer. Wrap a word in *asterisks* and it is drawn in your accent colour. Add a short label above the title (a category, "New", or a date for the Event template), and an author name, date line and round photo for blog posts.
Real typography and backgrounds. Pick from 12 Google Fonts, including Inter, Poppins, Space Grotesk, Playfair Display and JetBrains Mono, separately for headings and body text. Each font is loaded before drawing, so the image shows the font you chose. Backgrounds can be solid, a gradient at any angle, or a soft mesh. You can also add a photo with a colour overlay and blur, plus a dot, grid, line or grain pattern. Twelve palettes and a Shuffle button give you a starting point.
See it the way people will. The Social previews tab places your image in realistic X, Facebook, LinkedIn, Slack, Discord, WhatsApp and iMessage cards, including WhatsApp's square crop and the domain label X draws over the image. Safe-zone guides show the same areas on the canvas itself. Built-in checks flag low text contrast (using the WCAG ratio), titles that had to shrink, cut-off text, and files over the 5 MB platform limit.
Export the way you publish. Download PNG, JPEG or WebP at 1200×630, 1200×600 for X, or 1200×1200 square, with the file size shown before you save, or copy the image to the clipboard. The Batch tab turns a list or CSV of titles into a ZIP with one image per row. The Code & meta tags tab writes the og: and twitter: tags, plus a Next.js opengraph-image.tsx starter that renders your design with next/og.
Everything runs on the HTML Canvas API in your browser. Your design is saved locally and every change can be undone.
Step by step
How to Use
- 1Choose a templateClick any of the 14 thumbnails. They redraw with your current text, colours and fonts, so you can see the real result before switching. Change the size preset under Export if you need X's 2:1 card or a square image; every template adapts.
- 2Write the textFill in the Label (optional, e.g. "Tutorial" or "OCT 24"), Title and Description. Wrap words in *asterisks* to colour them with the accent. Add your Site name, and for articles an Author, an Author line such as "Oct 16 · 5 min read", and an author photo. Already have the page live? Paste its HTML into Fill from a page's HTML to copy its title, description and site name across.
- 3Style itPick heading and body fonts, set the maximum title size (it still shrinks to fit), then choose a palette or set your own background, second, text and accent colours. Switch the background between Solid, Gradient and Mesh, or add a pattern or a photo with an overlay and blur. Upload your logo and set its size. The badge next to Colours shows the text contrast ratio.
- 4Check itRead the checks under the preview, turn on Safe zones to see crop areas, and open Social previews to see the card on X, Facebook, LinkedIn, Slack, Discord, WhatsApp and iMessage.
- 5Export and publishPick PNG, JPEG or WebP and click Download, or Copy image. For many pages at once, use the Batch tab to get a ZIP. Then open Code & meta tags, copy the og: and twitter: tags into your page's head (or the Next.js file), and point og:image at your uploaded image. Check the result with the Meta Tag Generator.
Real-world uses
Common Use Cases
Got questions?
Frequently Asked Questions
Use 1200×630 pixels (a 1.91:1 ratio). Facebook, LinkedIn, Slack, Discord and iMessage all show that shape, and X shows it in its large "summary_large_image" card. This generator also has a 1200×600 preset for X's 2:1 card and a 1200×1200 square for places that show a square thumbnail. Keep the file under 5 MB, which every major platform accepts. PNG keeps text sharpest. JPEG is much smaller when you use a photo background. WebP is smaller still, but not every platform reads it, so PNG or JPEG is the safe choice for og:image.
Pick one of the 14 templates (each thumbnail shows your own text and colours), then type a label, title and description. Wrap a word in *asterisks* to colour it with the accent. Choose fonts, a palette or your own colours, and optionally add a logo, an author photo, a background photo or a pattern. The checks under the preview warn you about low contrast, text that had to shrink or was cut off, and files that are too big. Open the Social previews tab to see the card on X, Facebook, LinkedIn, Slack, Discord, WhatsApp and iMessage, then click Download.
Upload the image to your site or CDN, then add the meta tags to your page's <head>. The Code & meta tags tab writes them for you: og:title, og:description, og:image with its width, height and type, og:image:alt, and the matching twitter:card tags. Change the og:image URL to wherever you uploaded the file. In Next.js you can set metadata.openGraph.images, or add an opengraph-image.tsx file (the tool generates a starter). In WordPress, SEO plugins such as Yoast or Rank Math have a field for the social image.
Yes. Open the Batch tab and write one post per line as "Title | Description | Label", or upload a CSV with columns such as title, description, label, author, date and site. Every row is drawn with your current template, colours, fonts and logo, and all the images download together as one ZIP file, numbered and named after each title. Up to 200 images per batch.
Fourteen layouts: Clean (accent bar on top), Side Bar (accent bar on the left), Centered, Bold (oversized title with soft shapes), Split (brand panel plus content), Blog Post (site name on top, category pill, author with photo), Floating Card, Minimal, Quote, Product Launch (logo in a glowing ring), Docs, Event (date block), Framed and Diagonal. Every template works with every palette, font, background style and size preset, and long text shrinks to fit automatically.
Platforms cache link previews. For Facebook, open the Sharing Debugger (developers.facebook.com/tools/debug) and click "Scrape Again". For LinkedIn, run the URL through the Post Inspector (linkedin.com/post-inspector). X no longer offers a card preview tool, so the easiest fix there and in chat apps is to change the image URL, for example by renaming the file or adding ?v=2. If no image appears at all, check that the og:image URL is a full https:// address that loads without logging in and that the tag is in the server-rendered HTML, not added later by JavaScript.
Turn on Safe zones above the preview to see three guides that are never exported. The pink dashed box is the comfortable margin: keep text inside it so nothing feels cramped or gets clipped by rounded corners. The blue band shows the centre square that compact previews (WhatsApp, some chat apps and small cards) crop to. The dark box in the bottom-left corner is where X lays the site's domain over the image, so avoid putting important text there.
Yes. The Code & meta tags tab writes an app/opengraph-image.tsx file for the Next.js App Router that uses next/og to render your title, label, description, site name, colours, background and Google Fonts. It is a starter rather than a pixel-exact copy: template decorations and uploaded images aren't included. Use it when you want every page to get its own image automatically, and download the PNG when you want the exact design.
It is free with no account, no watermark and no limit. Everything is drawn in your browser with the HTML Canvas API, so your text, logo and photos are never uploaded. The only outside request is for the Google Fonts you pick. Your latest design is saved in your browser so it is still there when you come back, and Undo/Redo (Ctrl+Z / Ctrl+Shift+Z) covers every change.