Open Graph Image Size Guide: What to Put in og:image

og:image controls the preview image that many social apps and link unfurlers use when someone shares your page.

The Open Graph protocol defines fields such as og:image, og:image:width, og:image:height, og:image:type, and og:image:alt. It does not force one universal pixel size, so the practical goal is to choose a size that works well across major platforms.

Recommended Default

For most websites, start with:

• Size: 1200 x 630 px
• Ratio: about 1.91:1
• Format: JPG or PNG
• File size: keep it reasonably small
• Text: large enough to read in a small preview

This ratio is widely used for article, landing page, and tool previews.

Tags to Include

A complete basic set looks like this:

<meta property="og:title" content="Page title" />
<meta property="og:description" content="Short page description" />
<meta property="og:url" content="https://example.com/page/" />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Preview image description" />

Use an absolute HTTPS URL for the image. Relative paths often fail in crawlers or chat previews.

Common Mistakes

Avoid:

• Tiny images that look blurry
• Heavy PNGs for photo-style images
• Text placed near the edges
• Images blocked by robots.txt
• og:image URLs that redirect repeatedly
• Missing alt text

Quick Answer

Use a 1200 x 630 px Open Graph image as the default, provide explicit width and height, keep important text away from edges, and include og:image:alt so link previews have useful image context.

What to Double-Check

| Check | Why it matters | | ------------------ | ---------------------------------------------------------- | | Absolute image URL | Social crawlers often need a full HTTPS URL. | | Crop safety | Text and faces near the edge can disappear in previews. | | Cache refresh | Platforms may keep an old image after you update the page. | | Locale match | Multilingual pages may need localized titles and images. |

FAQ

Will the same image look identical everywhere?

No. Social platforms crop, cache, and resize previews differently. A good Open Graph image keeps the main subject near the center, uses large readable text, and is tested in the platforms that matter for your audience.

Publishing Note

Useful reference:

• The Open Graph protocol

Test the image in more than one place

An Open Graph image can look perfect in your CMS preview and still crop badly in messaging apps. Keep the main subject and text near the center, avoid tiny labels, and test the URL in at least one social preview tool before publishing. If the page is reused for campaigns, save the source design file so the title can be updated without rebuilding the whole image.

Image checks that matter

Choose a practical Open Graph image size, set width, height, alt text, and avoid blurry or cropped social previews. Image decisions should start with the final use: article hero, thumbnail, profile photo, product listing, screenshot, or archive copy. Each one has a different tolerance for compression, cropping, transparency, and text sharpness.

Use Generate Meta Tags on a copy of the original, then compare the export at the size people will actually see. For screenshots, inspect text edges; for photos, check skin tone and shadow detail; for transparent graphics, place the result on light and dark backgrounds.