OG Image Generator

How to make an OG image

An OG image is the preview card social platforms show when someone shares your page. No image means a gray box; a good one earns the click. The standard is 1200×630 pixels, set with the og:image meta tag:

1. Write a short title. About six words or fewer reads best at card size. Longer titles shrink automatically to fit three lines.
2. Add a subtitle — one line that sells the click. Keep it under the counter limit so it never wraps to a third line.
3. Pick a background. A solid brand color is cleanest; a two-color gradient adds depth. Eight presets get you started in one tap.
4. Leave the text color on Auto unless you have a brand color — it measures your background and picks white or dark ink for contrast.
5. Download the PNG and attach it to your page with the meta tag in the card above.

What makes a good social card

Cards are read at a glance: big readable type, high contrast, and breathing room. This tool keeps all text inside a 90-pixel safe margin because platforms crop edges differently, and it layers a soft dark wash under the text so even a bright background stays legible. The filename is generated from your title (for example, og-my-great-post.png) so it stays findable in your uploads folder.

What size should an OG image be?

1200 by 630 pixels — the standard size that X, Facebook, LinkedIn, and Discord read from the og:image tag. This tool renders and exports exactly 1200x630, so the image never stretches or crops unexpectedly.

How do I attach the image to my page?

Upload the PNG to your site and add <meta property="og:image" content="https://yoursite.com/your-image.png"> inside the <head> of your page, using the full public URL. Then paste your page URL into a social post to see the preview card.

How much text fits on the image?

Short titles work best — about six words or fewer at full size. Longer titles automatically shrink to fit within three lines, and the subtitle wraps to two lines. The character counters under each field show your remaining budget.

Why does the tool keep a margin around the edges?

Different platforms crop preview cards slightly differently. All text is kept inside a 90-pixel safe margin, so nothing important sits near an edge where it could be cut off.

How do the gradients work?

Pick two colors and a direction — vertical, horizontal, or diagonal — and the tool blends them with a canvas gradient. A soft dark wash is layered at the bottom so your text stays readable on any color pair.

Does the file size matter?

Most platforms cap og:image files around 8 MB. This tool exports PNG, and a typical 1200x630 design lands well under 1 MB, so it loads fast in preview cards. Flat solid backgrounds compress the smallest.