Open Graph image size: a practical 1200 × 630 guide

Does one image size work everywhere?

One landscape image can be a useful default, but there is no universal guarantee of an identical preview. A platform can crop a card, show a smaller thumbnail, or omit the image depending on the sharing surface and its own rules. The Open Graph protocol describes image metadata; it does not prescribe a single image size.

Keep your headline, logo, and important details near the center. As a starting design choice, leave about 60 pixels around the outside of a 1200 × 630 canvas. This margin is a layout suggestion, not a platform specification. Test the card at a small display size before exporting: a headline that is readable on the canvas may be too small in a feed.

Which format and file size should I use?

Export a PNG for graphics with crisp lettering or a JPEG for photographic artwork. Keep the file as small as you can while preserving readable text. OGFrame's checker flags files over 1 MB as a performance concern; that threshold is the checker's recommendation, not a universal upload limit.

Give the image a stable, public HTTPS URL. An image that loads only after login or relies on an expiring signed link can fail when a sharing service tries to fetch it later. Open the image in a signed-out browser before using it in your metadata.

How do I declare the image in HTML?

Put the image metadata in the page's head. Use the actual exported dimensions and describe the image with alt text. The following example covers image fields; your page also needs its own title, description, type, and canonical URL.

<meta property="og:image" content="https://example.com/og.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Acme — project planning for small teams" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://example.com/og.png" />

Create and check a card in OGFrame

Use the guest editor to try a template, or generate a design from a public URL with an account and AI credits. A useful preview tells the reader what is behind the link before they click.

1. Choose a standard 1200 × 630 template and replace the sample copy with your page's topic.
2. Adjust the headline, contrast, logo, and spacing in the visual editor.
3. Export the PNG and host it, or publish a hosted image URL from a saved design.
4. Add the image URL to your page's metadata and deploy the page.
5. Run the public page through the OG Image Checker, then test a real share on your target platform.