OG Image Generator
Design a pixel-perfect 1200×630 Open Graph image for any page, then download it free. Add your title, description, theme, and logo, watch the live Facebook, X, and LinkedIn card update, and ship an og:image that earns clicks.
og:image size.Already added the tag? Confirm it resolves with the Open Graph Preview & Checker. Need a unique image for every blog post or product page? ScreenshotRender renders 1200×630 og:images from a URL or HTML template through its API.
Free, no sign-up. Renders right in your browser and downloads as a PNG.
01 · How it works
Add your text
Type a title and description, pick a theme and accent color, and drop in your logo or a background image. No login and nothing to install.
Preview the card
Watch the 1200×630 Open Graph image update live, exactly the way it will appear when the link is shared on Facebook, X, LinkedIn, and Slack.
Download and ship
Export a crisp PNG, upload it to your site, and point your og:image meta tag at it. Nothing is uploaded to us, so it stays private.
What is an OG image?
An OG image (short for Open Graph image) is the picture that shows up when your link is shared on social media or in a chat app. It's set by a single meta tag, <code>og:image</code>, and it becomes the large visual on the preview card across Facebook, X (Twitter), LinkedIn, Slack, Discord, WhatsApp, and more.
A link with a sharp, on-brand og:image gets far more clicks than a bare URL. This generator lets you design that 1200×630 image in your browser, see the social card update as you type, and download a ready-to-use PNG, with no design tool and no account.
What size should an OG image be?
The recommended Open Graph image size is <strong>1200×630 pixels</strong>, a 1.91:1 ratio. Facebook, LinkedIn, and X all render this size as a large, edge-to-edge card. Anything smaller than 600×315 is shown as a small thumbnail or cropped, which is why so many shares look broken.
This tool always exports at exactly 1200×630, so you never have to guess the dimensions or aspect ratio. A few specs worth keeping in mind:
- <strong>Dimensions</strong>: 1200×630 pixels (1.91:1) for the large card on every major platform.
- <strong>Minimum</strong>: 600×315; below that, platforms fall back to a small square thumbnail.
- <strong>File size</strong>: keep it under about 5 MB so crawlers fetch it quickly.
- <strong>Format</strong>: PNG, JPG, or WebP all work; this generator exports a PNG.
- <strong>Safe area</strong>: keep important text away from the edges, since some apps crop slightly.
Open Graph image examples and templates
Most high-performing og:images follow one of a few simple templates: a bold headline on a solid or gradient background, the same with a small logo in a corner, or a screenshot framed inside a branded panel. The goal is one clear message that's readable as a thumbnail, not a busy poster.
Pick a theme below, type your headline, add an accent color and your logo, and you have an on-brand template you can reuse for every page. Change the title for each post and keep the rest consistent so your shares look like a set.
How to add an og:image to your site
Once you've downloaded your image and uploaded it somewhere public (your site, a CDN, or object storage), reference it from the <code><head></code> of the page with an absolute HTTPS URL. A complete set looks like this:
- <code><meta property="og:image" content="https://yoursite.com/og.png"></code>
- <code><meta property="og:image:width" content="1200"></code>
- <code><meta property="og:image:height" content="630"></code>
- <code><meta property="og:title" content="Your headline"></code>
- <code><meta name="twitter:card" content="summary_large_image"></code>
OG image vs Twitter card image
X (Twitter) reads its own <code>twitter:image</code> tag, but if you don't set one it falls back to your <code>og:image</code>, so a single 1200×630 image usually covers both. The tag that actually controls the layout is <code>twitter:card</code>: set it to <strong>summary_large_image</strong> to get the big image card instead of a small square thumbnail.
In practice you rarely need two separate images. Design one og:image here, set <code>twitter:card</code> to summary_large_image, and the same picture renders as a large card on X, Facebook, LinkedIn, and Slack at once.
How to automate OG images for every page
Designing one image by hand is easy. The hard part is doing it for hundreds of blog posts or product pages, each with its own title. That's where a render API comes in: you build one HTML template, pass in the title and any variables, and get back a unique 1200×630 image per URL, generated on demand.
ScreenshotRender does exactly this. Point it at a URL or an HTML template and it returns a pixel-perfect og:image you can cache and serve as your og:image tag, so every page gets a correct, on-brand social image automatically. Use this generator for one-off cards, and the API when you need them at scale.
Why is my og:image not showing?
If your image doesn't appear when you share the link, it's almost always one of a handful of issues: the og:image tag is missing, the URL is relative instead of an absolute https URL, the file is too big, or the platform has cached an older version of the page from before you added it.
After you set your new image, confirm it resolves and check for any other missing tags with our free <a href="/tools/open-graph-preview">Open Graph Preview & Checker</a>. Then re-scrape the page with each platform's own debugger (Facebook's Sharing Debugger and LinkedIn's Post Inspector) to clear their cache, since they hold on to the first preview they saw.
Do OG images help SEO?
Open Graph images are not a direct Google ranking factor, and Google builds its own search snippet from your title and meta description. But a strong og:image has a real <em>indirect</em> SEO benefit: it lifts click-through and share rates on social and in messaging apps, and that referral traffic and the links it can attract are signals that do help.
The simple rule: write your <code><title></code> and meta description for search engines, and design your og:image for the humans deciding whether to click. Every important page deserves both.
More free tools
FAQ
Common questions
Everything about the OG Image Generator.
Common questions
An OG image generator is a free tool that creates the 1200×630 image shown when your link is shared on social media, set via the og:image meta tag. You add a title, description, theme, accent color, and logo, see a live preview of the social card, and download a ready-to-use PNG. There is no design software to learn and nothing to install.
og:image is the Open Graph meta tag that tells social and messaging platforms which image to show on a link's preview card. It lives in the head of your page and is read by Facebook, LinkedIn, X, Slack, Discord, WhatsApp, and others. Without it, your shared links render with no image, which gets far fewer clicks.
The recommended size is 1200×630 pixels, a 1.91:1 ratio, which Facebook, LinkedIn, and X all render as a large card. The minimum is 600×315; anything smaller is shown as a small thumbnail or cropped. This generator always exports at exactly 1200×630 so you never have to guess.
Use 1200×630 pixels with a 1.91:1 aspect ratio. That is the standard large-card size on Facebook, LinkedIn, and X. You can go larger at the same ratio (for example 2400×1260) for sharper images on high-density screens, but keep the 1.91:1 ratio so nothing gets cropped.
Download the image, upload it somewhere public, and add a meta tag in the head of your page that points at the absolute https URL. Set its property to og:image and its content to your image URL, declare og:image:width 1200 and og:image:height 630, and set twitter:card to summary_large_image so X shows the large card.
Yes, it is completely free and needs no account. You design the image in your browser and download a PNG. Nothing is uploaded to a server, so your text, logo, and image stay on your device.
Yes. This tool is for designing one card at a time, but if you need a unique og:image for hundreds of pages you can automate it with the ScreenshotRender API. You build one HTML template, pass in the title and variables, and get back a 1200×630 image per URL on demand, which you cache and serve as your og:image.
PNG, JPG, and WebP all work. PNG is best for crisp text and flat or gradient backgrounds, which is what this generator exports. JPG is smaller for photo-heavy images. Whatever you choose, keep the file under about 5 MB so crawlers fetch it quickly.
The usual causes are a missing og:image tag, a relative URL instead of an absolute https URL, a file that is too large, or a platform caching an older version of the page. Verify your tags with a free Open Graph checker, then re-scrape the page with Facebook's Sharing Debugger or LinkedIn's Post Inspector to clear their cache.
og:image is read by most platforms, while twitter:image is X's own tag. If you do not set twitter:image, X falls back to your og:image, so one 1200×630 image usually covers both. The key Twitter tag is twitter:card; set it to summary_large_image to get the big image card instead of a small thumbnail.
Not directly, since Google builds its search snippet from your title and meta description rather than your og:image. But a strong og:image lifts click-through and share rates on social and messaging apps, and that referral traffic and the links it attracts are indirect signals that can help. Write your title for search and design your og:image for the human clicking.
Yes. You can upload your logo, choose an accent color, and pick a background theme or gradient so every card matches your brand. Keep the rest of the layout consistent and just change the headline per page, and your shares will look like a coherent set.
For a blog where every post needs its own image, design a template here to lock in the style, then automate the per-post version with a render API. ScreenshotRender turns an HTML template plus the post title into a unique 1200×630 image per URL, so each article gets its own og:image without manual design work.
There is no hard cap, but keep it under about 5 MB. Large files slow down how quickly crawlers fetch and render the preview, and some platforms skip images that are too big. A 1200×630 PNG from this tool is comfortably small, so you rarely need to worry about it.
They are optional but recommended. Declaring og:image:width 1200 and og:image:height 630 lets platforms render the large card instantly, without waiting to download the image first to measure it. It also helps avoid a brief layout shift in the preview while the image loads.
Anywhere it is publicly reachable over https: your own site, a CDN, or object storage like S3 or R2. The og:image tag must point at an absolute https URL that crawlers can fetch without a login. Once it is live, run the URL through an Open Graph checker to confirm it resolves.
Get Started
Need to generate og:images at scale?
ScreenshotRender renders pixel-perfect 1200×630 social images from any URL or HTML template. Start free with 100 screenshots, no credit card.
Want to integrate via API? Get your key here