How to create an Open Graph image for link previews

What an Open Graph image is

When a link is shared in a chat app or on a social network, the platform fetches the page and looks for an og:image meta tag. The image it points to becomes the large preview card. Without one, platforms pick an image from the page themselves or show a plain text link.

Size and format

• 1200 × 630 pixels, an aspect ratio of about 1.91 to 1, is the most widely used size and displays well on most platforms.
• PNG suits cards with text and flat colours, and JPG suits photo backgrounds. Some platforms have been slow to accept WebP previews, so PNG or JPG is the safest choice.
• Keep the file small, ideally a few hundred KB and under 1 MB. Some apps skip the preview for large images.

Design for a small, cropped card

Previews are often shown at a fraction of full size, and some platforms crop the edges or show a square version. Keep the title short and large, put the important content in the centre and leave generous margins. The generator's Safe area overlay shows where cropping is likely.

Check contrast at thumbnail size. Thin, light text on a busy photo quickly becomes unreadable.

Making one

1. Open OG Image Generator and choose a template: minimal, gradient, split image or article card.
2. Add a title, an optional eyebrow such as your site name, and a subtitle. Auto-fit keeps long titles inside the card.
3. Pick fonts and colours or a gradient, and add a logo or photo if the template uses one.
4. Export PNG, JPG or WebP at 1200 × 630, or switch to the 1200 × 600 X layout or a 1080 square.

Adding it to your page

Upload the image and reference it with an absolute URL in the head of the page, using og:image alongside og:title and og:description. For the large card layout on X, add twitter:card with the value summary_large_image; X falls back to the Open Graph tags for the rest.

Platforms cache previews. After changing an image, use the platform's own preview or debugging tool to refresh it, or wait for the cache to expire.

Starting from an existing image

To turn a photo or screenshot into a preview, the Open Graph resize preset crops and scales it to 1200 × 630 and keeps it under 1 MB. Screenshot Beautifier frames a screenshot on a background, which works well for product and documentation links.