SEO Tools
Open Graph Image Generator
Design 1200x630 Open Graph and X (Twitter) preview images in your browser. Themes, gradients, custom text, instant PNG download, and meta tag snippet.
Quick themes
Live preview1200 x 630
The PNG you download is the same pixels as this preview.
1200 x 630 is the Open Graph and X (Twitter) summary_large_image standard. 600 x 315 is the smaller fallback some legacy scrapers still serve.
Content
Layout
Alignment
Font
Uses the visitor's system fonts, so the preview matches whatever the destination platform renders. Custom web fonts are not embedded into the PNG.
Background
Style
Meta tags for your page
Drop these into the <head> of the page that should use this image. Replace og-image.png with the actual path you upload the PNG to.
<!-- Open Graph --> <meta property="og:type" content="website"> <meta property="og:title" content="How to ship great Open Graph images in any framework"> <meta property="og:description" content="A quick, no-nonsense guide to title length, image dimensions, and the meta tags every page needs."> <meta property="og:image" content="https://yourdomain.com/og-image.png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta property="og:url" content="https://yourdomain.com/"> <meta property="og:site_name" content="yourdomain.com"> <!-- X / Twitter --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="How to ship great Open Graph images in any framework"> <meta name="twitter:description" content="A quick, no-nonsense guide to title length, image dimensions, and the meta tags every page needs."> <meta name="twitter:image" content="https://yourdomain.com/og-image.png">
How to use
- Pick a theme (Midnight, Sunrise, Forest, Blueprint, and others) or skip presets and design from scratch.
- Type the title, an optional subtitle, an optional eyebrow tag, and your site name or domain. Watch the live 1200 x 630 preview update.
- Tune the background style (solid, linear, or radial), gradient angle, alignment, accent bar, and the title, subtitle, and accent colors.
- Click Download 1200 x 630 to save the standard Open Graph PNG, or Download 600 x 315 for the smaller fallback.
- Copy the meta tag snippet, paste it into your page's <head>, and replace the og:image path with the URL where you uploaded the PNG.
About this tool
Open Graph Image Generator builds the 1200 x 630 social preview image that Facebook, X (Twitter), LinkedIn, Slack, Discord, and most other link-unfurling services scrape and show when somebody shares your URL. The tool renders the image directly on a 2D canvas in your browser using the exact pixel dimensions and color stops you pick, so the PNG you download is byte-for-byte the picture you saw in the preview. Type a title, an optional subtitle, an optional eyebrow tag, and a site name. Choose from ten built-in themes (Midnight, Sunrise, Forest, Paper, Blueprint, Noir, Violet, Ocean, Candy, Stark) or override every color and background style: solid fill, linear gradient with a configurable angle, or radial gradient. The font stack, alignment, accent bar, and a subtle dot grid overlay are all toggles. Title sizing is automatic: the renderer fits the largest weight that wraps your text into at most four lines and reserves room for the subtitle and footer, so titles between roughly 45 and 70 characters always look balanced. Character counters next to the title and subtitle warn before you cross the readable limits. Two PNG sizes are exported: the 1200 x 630 standard used by Open Graph and the X summary_large_image card, and a 600 x 315 fallback for older or low-bandwidth scrapers. A copy-ready meta tag snippet at the bottom of the page sets up the Open Graph and X (Twitter) tags using your title, subtitle, and site name with placeholders you can replace once you upload the image. The tool ships no fonts of its own; the preview uses the visitor's system fonts, which is what the destination platforms render anyway, so the picture you ship is honest. Nothing is uploaded; rendering, encoding, and download all happen on your device.
Free to use. Works in your browser. No signup, no login.
Related tools
You may also like
Meta Tag Preview
SERP, Open Graph, and Twitter Card preview with pixel-accurate length checks.
Open tool
SEOSchema Markup Generator
Generate JSON-LD schema markup for ten common types with live validation.
Open tool
ImageFavicon Generator
Generate a real favicon.ico plus PNG icons from 16 to 512 px in your browser.
Open tool
GeneratorColor Palette Generator
Build complementary, analogous, triadic, and monochromatic color schemes from any HEX.
Open tool
GeneratorCSS Gradient Generator
Linear, radial, and conic gradients with multi-stop editor and live preview.
Open tool