# OG image meets minimum size requirements

- **Pattern:** `ab-001807` (`marketing-social-sharing.open-graph.og-image-dimensions`)
- **Severity:** high
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001807
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001807)

## Why it matters

OG images below 1200×630 pixels render blurry or cropped on high-DPI screens and in large card formats across Facebook, LinkedIn, and Twitter/X. Per ogp.me, the minimum recommended size is 1200×630; images below 200×200 are rejected outright by some crawlers. When a shared link shows a pixelated or improperly cropped image, it signals low production quality and reduces click-through rates. For product announcements and blog content where the OG image carries marketing copy or visual branding, undersized images make the text illegible in the preview.

## Severity rationale

High because undersized OG images appear blurry or are rejected by platform crawlers, visibly degrading the appearance of shared links without any indication to the developer.

## Remediation

Resize all static OG images in `public/` to at least 1200×630 pixels and declare dimensions explicitly in your metadata so platforms render correctly without downloading the file first:

```ts
openGraph: {
  images: [{ url: '/og-image.png', width: 1200, height: 630 }],
}
```

For `ImageResponse`-generated images, set the dimensions in the options object:

```ts
return new ImageResponse(<div>...</div>, { width: 1200, height: 630 })
```

Use an image editor or `sharp` in a build script to verify and resize any existing static files that fall below the threshold.

## Detection

- **ID:** `og-image-dimensions`
- **Severity:** `high`
- **What to look for:** For each `og:image` reference found in the codebase, check the dimensions. If the image is a static file in `public/`, examine the file. If the image URL is generated via the Next.js `ImageResponse` API (e.g., `opengraph-image.tsx`), check the `width` and `height` options passed to `ImageResponse`. If the image is referenced in a `metadata.openGraph.images` array, check whether `width` and `height` properties are specified. Count all instances found and enumerate each.
- **Pass criteria:** All OG images are at least 1200×630 pixels. If dimensions are declared in metadata (`{ url: '...', width: 1200, height: 630 }`), those values are used. If dimensions are not declared, the actual image file dimensions must be at least 1200×630.
- **Fail criteria:** Any OG image is smaller than 1200×630, or no dimensions are declared and the image file dimensions cannot be determined to be ≥1200×630. Do NOT pass if the og:image resolves but returns a non-image content-type or an image smaller than 200x200 pixels.
- **Skip (N/A) when:** No `og:image` configuration found anywhere in the project (caught by `og-all-pages-complete`).
- **Cross-reference:** The `og-image-accessible` check in Share Infrastructure verifies that the images referenced here are actually loadable by crawlers.
- **Detail on fail:** Specify which image and what dimensions were found or inferred. Example: `"public/og-image.png is 800x418 — below 1200x630 minimum"` or `"og:image declared without width/height; file dimensions not determinable"`
- **Remediation:** Social platforms render OG images at varying sizes. Images below 1200×630 appear blurry or cropped on high-DPI screens and some platforms. Resize your static OG image(s) to at least 1200×630 and declare the dimensions in your metadata:

  ```ts
  openGraph: {
    images: [{ url: '/og-image.png', width: 1200, height: 630 }],
  }
  ```

  For `ImageResponse`-generated images, set the options object:

  ```ts
  return new ImageResponse(<div>...</div>, { width: 1200, height: 630 })
  ```

## External references

- external ogp.me — https://ogp.me/

Taxons: findability

HTML version: https://auditbuffet.com/patterns/ab-001807