OGOG Image Generator
Template
Content
Style
Logo / Icon
1200 × 630 px · PNG · Twitter, Facebook, LinkedIn, Slack
Preview (scaled)
Standard OG image size · 1.91:1 ratio · Recommended: < 8 MB
🔖
Bookmark this page
Press Ctrl+D to save this tool in your browser for instant access anytime — no sign-up needed.

OG Image Generator — Free Open Graph Preview Card Builder for Social Media

Share

About this tool

Free OG Image Generator — Create 1200×630 Open Graph Preview Cards for Twitter, Facebook & LinkedIn

Every link you share on social media shows a preview card — a title, description, and image. That image is your Open Graph (OG) image. When it's missing or generic, click-through rates drop. When it's branded and relevant, shares convert. This generator lets you build a polished 1200×630 OG image in under a minute, with no design software and no account.

Choose from five templates built for different use cases. Clean gives you a professional light-background layout with an accent color bar — the safest choice for any website. Dark uses a dark background with a colored left accent bar — popular for developer tools, SaaS dashboards, and tech products. Gradient creates a two-color diagonal gradient background with centered text — bold and attention-grabbing for product launches, events, and marketing pages. Bold uses oversized 900-weight typography with subtle background shapes — great for minimal one-message announcements. Split divides the card into a colored left panel (your brand/logo) and a content right panel — structured and instantly branded.

Customize everything: title (the main headline), description (the supporting text), site name or URL, background color, accent color, text color, and font family (sans-serif, serif, monospace, or impact). The gradient template adds a second color for the gradient end. Upload your logo or icon and it appears in the corner or panel depending on the template.

The live preview scales the full 1200×630 canvas to fit your screen — what you see is exactly what you get. Click Download PNG for a full-resolution file ready to upload to your server or CDN. Click Copy Image to copy directly to your clipboard for paste into design tools.

Everything renders in your browser using the HTML Canvas API. No images are sent to any server.

Features

  • 5 templates — Clean (light + accent bar), Dark (dark bg + left accent), Gradient (two-color bg + centered text), Bold (oversized title + accent shapes), Split (colored left panel + content right)
  • 1200×630 px output — the universally accepted OG image standard for Twitter, Facebook, LinkedIn, Slack, WhatsApp, and iMessage link previews
  • Custom title, description, and site name with automatic text wrapping on the canvas at any content length
  • Color pickers with hex input for background, accent, and text colors — all with instant live preview on the canvas
  • Gradient template — two color pickers for gradient start and end; rendered as a diagonal linear gradient across the full canvas
  • Four font families — sans-serif (Inter/Arial), serif (Georgia), monospace (Courier New), and Impact for display-heavy layouts
  • Logo / icon upload — accepts any image format; drawn in the appropriate position for the selected template
  • Download as PNG — full 1200×630 resolution, no watermark, no account, unlimited downloads
  • Copy image to clipboard — uses the Clipboard API for direct paste into design tools, Slack, or email
  • 100% browser-based — uses HTML Canvas API; no images or content sent to any server; works offline once loaded

How to Use

Select a template from the five options at the top of the controls panel: Clean, Dark, Gradient, Bold, or Split. Fill in your title (the main headline for the preview card), description (supporting text, keep it under 150 characters for best display), and site name or URL. Choose your font family from the dropdown. Set your background color using the color picker or hex input — for the Gradient template, set both start and end gradient colors. Set your accent color (used for bars, borders, and branding highlights) and text color. Optionally click "Upload image" to add your logo or icon. Watch the live preview on the right update instantly with every change. When the card looks right, click "Download PNG" to save the 1200×630 image, or "Copy Image" to copy it to your clipboard. Upload the PNG to your server or CDN and add the og:image meta tag to your page pointing to its URL.

Common Use Cases

🔗
Create OG preview images for blog posts and articles
Generate a unique OG image for each blog post using the Clean or Bold template. Use the post title as the card title and a one-line summary as the description. Set your brand colors and add your logo. Download and upload alongside the post. Add the og:image meta tag to each post's HTML head. Posts with custom OG images consistently outperform those with generic site-wide images in social feed click-through rates. Use the Meta Tag Generator to write the full set of meta tags for the post at the same time.
🚀
Generate product launch and landing page preview cards
For a product launch, the OG image is the first thing people see when the announcement is shared. Use the Gradient or Bold template with strong brand colors and a compelling short title. Keep the description to a single benefit statement. Upload your product logo. The Split template works well for established brands — left panel shows the logo prominently, right panel shows the product name and tagline. Generate one for the homepage and one for each feature page. Test how it renders using the Twitter Card Validator before the launch.
🧑‍💻
Create OG images for developer tools and documentation
Developer-facing tools and documentation benefit from the Dark template — it signals a technical product and stands out in feeds dominated by light-background cards. Use a monospace font for code-adjacent products. Set the accent color to your brand's primary color. Keep the title short and literal ("JSON Formatter", "API Reference", "Getting Started"). Documentation pages rarely get unique OG images — generating one per major section significantly improves clicks from Stack Overflow answers, GitHub READMEs, and developer newsletters that link to docs.
📣
Build social share images for marketing campaigns
Campaign landing pages, event registrations, and webinar signup pages need OG images that communicate urgency and value. The Gradient template with vibrant colors creates visual impact in a feed. Use the event name or headline as the title and the date or value proposition as the description. The site name field can contain the event brand rather than the domain. Generate a set of variations by changing the gradient colors and compare them — the preview updates instantly. Combine with the Meta Tag Generator to set og:title, og:description, and og:image together.
🏢
Create branded OG images for company pages and portfolios
Use the Split template for company or personal portfolio sites — the left panel carries your logo and brand color, the right panel shows the page title and one-line description. This creates a consistent branded look across all shared pages. Set the accent color to your primary brand color and upload your logo or headshot. Generate one template for the homepage, one for the about page, and one as a default for all other pages. For portfolios, the Bold template with a dark background and your name as the title makes a strong impression in social feeds.
📰
Generate OG images for newsletters and Substack posts
Newsletter issues shared on social media benefit from consistent OG branding. Use the Clean or Dark template with your newsletter's colors and issue title. The description field is perfect for the issue's one-sentence summary. Upload your newsletter logo or avatar. For Substack, generate the image and upload it as the post's cover image — Substack uses the cover image as the og:image. For email newsletter archives hosted on a custom domain, add the og:image meta tag to each issue's HTML to ensure proper previews when issues are shared.

Frequently Asked Questions

An Open Graph (OG) image is the preview image that appears when a URL is shared on social media platforms like Twitter/X, Facebook, LinkedIn, Slack, and WhatsApp. It is specified in the page's HTML using the meta tag <meta property="og:image" content="https://example.com/og.png" />. The recommended size is 1200×630 pixels with a 1.91:1 aspect ratio. Twitter recommends a minimum of 600×314px for a "summary_large_image" card, but 1200×630 is the universally accepted standard. The file should be under 8MB for Twitter and under 5MB for Facebook. PNG and JPEG are both supported — PNG is preferred for text-heavy images because it preserves sharp edges better than JPEG compression.

Use this OG image generator: select a template (Clean, Dark, Gradient, Bold, or Split), then fill in your title, description, and site name. Choose your background color, accent color, and text color using the color pickers. Optionally upload your logo or icon. The live preview updates instantly on the right. When satisfied, click "Download PNG" to save the 1200×630 image to your computer. Upload it to your server or CDN, then add the og:image meta tag to your page's HTML head pointing to the uploaded URL. Repeat the process for each page that needs a unique preview image.

After generating and downloading your OG image, upload it to your web server or a CDN (Cloudflare, AWS S3, Cloudinary). Then add these meta tags to the <head> section of your HTML: <meta property="og:image" content="https://yoursite.com/og-image.png" /> and <meta property="og:image:width" content="1200" /> and <meta property="og:image:height" content="630" />. For Twitter specifically, also add <meta name="twitter:card" content="summary_large_image" /> and <meta name="twitter:image" content="https://yoursite.com/og-image.png" />. In Next.js, use the metadata.openGraph.images array. In WordPress, plugins like Yoast SEO or RankMath handle the og:image tag automatically.

Clean: Light/custom background with a colored accent bar across the top, title left-aligned, description below, site name bottom-left. Professional and versatile — works for blogs, SaaS products, and documentation. Dark: Dark background with a colored left accent bar. High contrast, modern — popular for developer tools and tech products. Gradient: Two-color diagonal gradient background with centered text. Eye-catching and bold — works well for marketing pages, product launches, and events. Bold: Solid background with subtle circular accent shapes, oversized 900-weight title. Punchy and minimal — great for landing pages and single-message announcements. Split: Accent-colored left panel (site name + logo) and content right panel (title + description). Structured two-column layout — good for branded content with a recognizable icon.

Social platforms cache OG images aggressively. If you updated an image but the old one still appears: for Twitter/X, use the Twitter Card Validator (cards-dev.twitter.com/validator) to force a cache refresh. For Facebook, use the Facebook Sharing Debugger (developers.facebook.com/tools/debug) and click "Scrape Again". For LinkedIn, use the Post Inspector (linkedin.com/post-inspector). If the image never appeared, check that the og:image URL is publicly accessible (not behind authentication or localhost), the URL returns a 200 status, and the image is under the size limit. Also verify the meta tag is in the <head> and is not added after JavaScript hydration.

Yes — the 1200×630 size generated by this tool is the recommended size for Twitter's "summary_large_image" card type, which displays a large preview image above the tweet. Twitter also accepts the standard og:image tag and will use it for its card if no twitter:image tag is present. For a Twitter summary card (small square thumbnail), a 1:1 image is recommended instead — the 1200×630 image will be cropped. Use the "summary_large_image" card type in your meta tags for the best result with the images generated here.

Ideally yes, but a tiered approach is practical. High-priority pages (homepage, blog posts, product pages, landing pages) benefit most from unique OG images because they are likely to be shared. These pages get the highest return from a distinctive image that shows the page title and context. Supporting pages (about, contact, terms) can share a single branded OG image. For blogs with many posts, generate one image per post using this tool — blog posts are the most frequently shared content type and a compelling preview significantly improves click-through rate from social feeds. Increase engagement by 2–5× by using custom images over the default site-wide fallback.

Yes — completely free, no account required, no watermark, no usage limits. Generate as many OG images as you need, download them as full 1200×630 PNG files, and use them on any website. All generation runs in your browser using the HTML Canvas API — no images are sent to any server, so your content is private. The tool works offline once the page has loaded.