OGPreview.io

Open Graph image (og:image)

The Open Graph image is the picture set by og:image that fills most of a link preview. Use an absolute https URL to a 1200×630 JPG or PNG under 1 MB. Paste an image URL below to check its real size and see it on each platform.

<meta property="og:image" content="https://example.com/og/launch.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Dashboard showing build time falling" />
Facebook
EXAMPLE.COM
How we cut our deploy time in half
Five changes to our CI pipeline that took builds from 14 minutes to 6, with the config you can copy.
X (Twitter)
example.com
How we cut our deploy time in half
Five changes to our CI pipeline that took builds from 14 minutes to 6, with the config you can copy.

Rules for og:image

  • Required by the Open Graph protocol.
  • Absolute URL (https://…). Relative paths fail on many crawlers.
  • 1200×630 (1.91:1). Under 600px wide gives a small thumbnail on Facebook; under 200×200 is ignored.
  • JPG, PNG or WebP (GIF uses the first frame). SVG and AVIF are not supported by most platforms.
  • Under 1 MB, ideally around 300 KB; WhatsApp and Slack give up on heavy images.
  • Add og:image:alt for screen-reader users.

Common mistakes

  • Image served behind hotlink protection or a bot firewall.
  • Changing the image but keeping the same file name, so caches keep the old one.
  • Key text near the edges that square crops cut off.

Write the full tag set in the generator, or see all tags in the Open Graph tag reference.

Making the image

For one-off pages, design the card once: the OG image generator on this site exports 1200×630 in the browser. For hundreds of pages, render images from a template at build or request time (for example @vercel/og in Next.js or nuxt-og-image in Nuxt).

Frequently asked questions

What is an Open Graph image?

The image named in a page’s og:image meta tag. Social and messaging apps download it and show it as the main visual of the link preview.

What size should an Open Graph image be?

1200×630 pixels, a 1.91:1 ratio. It is sharp on high-density screens and is the large-card format on Facebook, LinkedIn and X.

How do I make an OG image?

Design a 1200×630 image (with any design tool or the OG image generator here), upload it to your site, and reference it with an absolute URL in og:image. Then check the page with the OG checker.

What is an OG image JPG?

Just an Open Graph image saved as JPEG. JPG suits photos (smaller files); PNG suits text and logos (sharper edges). Both are supported everywhere.

Can I use more than one og:image?

Yes, repeat the tag. Platforms usually take the first one. Width, height and alt tags apply to the og:image directly above them.

Other Open Graph tags