What size should an OG image be?

1200 x 630 pixels is the recommended OG image size. This aspect ratio (1.91:1) works across Facebook, Twitter/X, LinkedIn, Slack, and Discord.

How does this OG image generator work?

Enter your landing page URL. We load it in a real Chromium browser at 1200px width, dismiss cookie banners, hide navigation overlays, find your hero section, and crop it to a perfect 1200x630 OG image with your real fonts, colors, and layout preserved.

Is this OG image generator free?

Yes. No credit card, no signup, no catch. We send the result to your email so you can close the tab and come back later.

Where do I put OG meta tags?

Copy the generated meta tags and paste them inside the head section of your HTML. The key tags are og:image, og:title, og:description, and twitter:card.

Free tool for indie builders

Free OG image generator
for indie builders.

Q: What is an OpenGraph image?

An OpenGraph (OG) image is the preview image that appears when someone shares your link on social media, Slack, Discord, iMessage, or any platform that supports link previews. The standard size is 1200x630 pixels.

Paste your URL. Get a pixel-perfect 1200x630 OG image
with ready-to-copy meta tags. Free, no signup.

Enter your landing page URL

We will screenshot your hero section and crop it to a perfect 1200x630 OG image.

Free. No signup required. We'll email you the result.

Generating your OG image...

Screenshotting your hero section and cropping to 1200x630. This takes 10-20 seconds.
We'll email you when it's ready. You can close this tab.

Your OG image is ready

Download the image and copy the meta tags into your HTML head.

Meta Tags

Something went wrong.

Why it matters

Posts with OG images get 2-3x more engagement.

When someone shares your link on X, Slack, or Discord, the OG image is the first thing people see. Without one, your link is invisible.

Without OG image

Alex Builder @alexbuilds

This is pretty cool, check it out

awaithuman.com

AwaitHuman

Your agent gets stuck. You get pinged. Work continues.

2 replies 4 reposts 12 likes

With OG image

Alex Builder @alexbuilds

This is pretty cool, check it out

awaithuman.com

AwaitHuman - Your Agent's Lifeline to Human Judgment

8 replies 24 reposts 89 likes

The image is the first thing people see before they read a single word.

The standard

What is an OpenGraph image?

The preview image people see when your link is shared on X, Slack, Discord, or iMessage. Your first impression before the click.

1200 x 630px

The standard size that works across X, Facebook, LinkedIn, Slack, and Discord.

Meta tags

og:image, og:title, twitter:card in your HTML <head>. Without them, platforms show nothing.

2-3x more clicks

Links with OG images get significantly more engagement. It's the highest-leverage thing you can do for distribution.

How it works

Three steps, thirty seconds.

Paste your URL

Enter your landing page URL and email. We load your page in a real browser at 1200px wide.

We screenshot your hero

We find your hero section, hide cookie banners and nav overlays, center the content, and crop to a perfect 1200x630 image.

Download + copy meta tags

Get your OG image as a PNG and copy the ready-to-paste meta tags into your HTML head. Done.

FAQ

Frequently asked questions

Is this really free?

Yes. No credit card, no signup, no catch. We built this as a free tool for indie builders. We'll send you the result by email so you can close the tab and come back later.

What size is the generated image?

1200 x 630 pixels, the standard recommended by Facebook, Twitter/X, LinkedIn, Slack, and Discord. The image is saved as a PNG file.

How does it capture my hero section?

We load your page in a real Chromium browser at 1200px width, dismiss any cookie banners, hide fixed navigation overlays, find your main heading, and crop the surrounding content to 1200x630. Your real fonts, colors, and layout are preserved.

What if my page has a cookie banner?

We automatically click "Accept" or "Allow" buttons on common cookie consent banners before taking the screenshot. Fixed/sticky overlays like floating nav bars and chat widgets are also hidden.

Where do I put the meta tags?

Copy the generated meta tags and paste them inside the <head> section of your HTML, before the closing </head> tag. If you use a framework like Next.js or Nuxt, add them to your page's head configuration.

Can I test if my OG tags are working?

After adding the meta tags, use the Facebook Sharing Debugger or Twitter Card Validator to verify your link previews look correct.

Free OG image generatorfor indie builders.