OG Image Generator for Social Link Previews
This OG image generator builds the Open Graph preview image that appears when your link is shared on Facebook, X (Twitter), LinkedIn, Discord, Slack, and other apps. Type your title and details, pick a template, and export a pixel-perfect 1200×630 PNG — no design software needed.
It is made for anyone who ships content and wants link cards to look intentional: bloggers, marketers, developers setting an og:image meta tag, and creators who want every shared URL to stand out instead of showing a generic or missing thumbnail. Choose from 20 templates, customize the text and colors, drop in your own images, and download in seconds.
How to Create Your OG Image
Enter your content
Fill in the Title, Subtitle, Author, and Website fields in the Content panel. The canvas updates in real time as you type, and your website also feeds the social card simulation.
Choose a template
Open the Templates grid and click any of the 20 designs — gradients, minimal, dark, retro, and more. Each one arranges your text with its own layout and styling.
Customize colors
Pick one of 8 color presets or set your own primary and accent colors with the color pickers. Templates adapt their backgrounds and accents to match your choice.
Position text and add images
Drag any text element on the canvas to reposition it, or double-click it to jump straight to its input field. Use Add in the Images panel to upload photos or logos, then drag to move and pull a corner handle to resize.
Export your image
Download a 1200×630 PNG, or copy the image straight to your clipboard to paste it elsewhere. Add it to your page with an og:image meta tag and your link preview is ready.
Features
20 Unique Templates
Gradient, minimal, dark, retro, and creative layouts including Gradient Flow, Terminal Dark, Cyberpunk, Polaroid, Newspaper, Brutalist, and Glass Card.
Custom Text Fields
Set the title, subtitle, author, and website, with the canvas updating live as you type each field.
Drag-to-Position Text
Every text element can be dragged freely on the canvas, so you keep full control of the layout beyond each template's defaults.
Color Presets & Custom Colors
Apply one of 8 curated presets or set your own primary and accent colors; templates re-theme their backgrounds and accents to match.
Image Upload & Editing
Add multiple photos or logos on top of the template, then drag to move and pull corner handles to resize while the aspect ratio stays locked.
Social Preview Simulation
A realistic share card shows your image with the domain, title, and description, so you see how the link will look before you publish.
Zoom Preview
Step the preview card through five sizes from a compact 320px to a large 840px to check how text and images hold up at any scale.
PNG Export & Copy
Download a high-quality 1200×630 PNG or copy the image directly to your clipboard for pasting into another app.
Double-Click to Edit
Double-click any text on the canvas to jump straight to its input field in the sidebar and start editing right away.
Keyboard Delete & Dark Mode
Press Delete to remove a selected image, and work comfortably with a built-in dark theme.
Frequently Asked Questions
What is an OG image?
An Open Graph (OG) image is the preview picture that appears when a link is shared on social media or messaging apps. It is set with the og:image meta tag in your page's <head> and is usually the first thing people see in the feed, so a clear, on-brand image can noticeably lift click-through.
What size should an og:image be?
The standard Open Graph image size is 1200 × 630 pixels (a 1.91:1 ratio), which works across Facebook, X, LinkedIn, and most other platforms. This generator exports at exactly that resolution every time.
How do I add an og:image meta tag to my site?
Upload the exported PNG to your site, then add this line inside your page's <head>:
<meta property="og:image" content="https://yoursite.com/path/to/og-image.png">
Most platforms cache previews, so re-share or use the platform's debugger to refresh the card after you update the tag.
Should I use PNG or JPG for an og:image?
This tool exports a PNG, which keeps text and flat template graphics crisp and is supported everywhere. JPG can produce a smaller file for photo-heavy designs, but the PNG export here is well within typical platform size limits and is the safer default for sharp text.
Why isn't my OG image showing when I share the link?
The most common causes are a missing or incorrect og:image tag, a relative instead of absolute image URL, or a cached old preview. Make sure the tag points to a full https:// URL, then re-fetch the page in the platform's link preview debugger to clear the cache.
Can I upload my own images and use custom colors?
Yes. Click Add to upload one or more photos or logos, then drag to move them and pull a corner handle to resize while the aspect ratio stays locked. For color, choose one of 8 presets or set any primary and accent color with the pickers, and templates adapt to match.
How do I reposition the text on the image?
Click and drag any text element directly on the canvas to move it, or double-click it to jump to its sidebar input. Switching templates resets text back to that template's default positions.
Are my images uploaded to a server?
No. All rendering and export happen entirely in your browser using the canvas, and the images you add are read locally on your device. Nothing you enter or upload is sent to a server.
No comments yet. Be the first to comment!