Open Graph Image Generator

How to use

1. Enter a title, an optional subtitle, and the site name you want on the card.
2. Choose a layout, a font, and a solid color or a gradient.
3. Add a logo or a background photo from your device if you want one. The file is read in the browser and is never uploaded.
4. Check the live preview. Turn on the square crop frame and keep the title inside it.
5. Download the image as PNG or JPEG, then use Write the tags for this image to build the meta tags.

Examples

• A blog post card uses the title How to bake sourdough at home and the site name baker.example on the centered layout with a dark background.
• A product launch card uses the title Meet Northline, a logo, and the site name northline.example on the split layout.
• A docs page card uses the title Getting started, no photo, a single warm color, and the site name docs.example on the footer band.

FAQs

What size should an Open Graph image be?

Use 1200 by 630 pixels. That is the size most platforms expect for a large link preview, including Facebook, X, and LinkedIn. This tool draws the image at exactly that size.

Should I download PNG or JPEG?

PNG (Portable Network Graphics) keeps sharp text and flat color without compression artifacts. JPEG (Joint Photographic Experts Group) is smaller, which helps when a page has a size limit. Use PNG for cards that are mostly type and color, and JPEG when you add a photo and need a smaller file.

How large will the file be?

A flat color card is usually a few dozen kilobytes as PNG and smaller as JPEG. A background photo makes a larger file. The tool shows the PNG and JPEG sizes before you download, so you can pick the one that fits.

Why do share images get cropped?

Some feeds crop a wide 1200 by 630 image toward a square. The sides are what disappear. The square crop frame marks the center 630 by 630 area. Keep the title, the logo, and the site name inside that frame.

How do I add the image to my page after I download it?

Host the file at a public https address, then use the Open Graph generator to write the og:image and Twitter Card tags. The button Write the tags for this image opens that tool. The tags need the full image URL, not a file on your computer.

Is my logo uploaded?

No. The logo and any background photo are read with the browser file reader and drawn on a canvas on your device. Nothing is sent to a server.

Supporting guides

• What Size Should an Open Graph Image Be