# Open Graph image references resolve

- **Pattern:** `ab-000043` (`ai-slop-hallucinations.asset-references.og-image-references-resolve`)
- **Severity:** low
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-000043
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-000043)

## Why it matters

A `metadata.openGraph.images = '/og.png'` referencing a file that does not exist means every share of the URL to Slack, Twitter, LinkedIn, or iMessage produces a blank preview card — the link unfurls as bare text rather than an image, and organic social click-through collapses. This is a reference-integrity failure with direct marketing impact, and AI tools confidently hardcode `/og.png` into layouts without ever creating the file.

## Severity rationale

Low because missing OG images degrade share previews but do not break the page or the build.

## Remediation

Either place the image at `public/og.png` or generate one per-route with the Next.js convention file `app/opengraph-image.tsx`:

```tsx
import { ImageResponse } from 'next/og'
export default async function Image() {
  return new ImageResponse(
    <div style={{ fontSize: 128, background: 'white', width: '100%', height: '100%' }}>Your title</div>,
    { width: 1200, height: 630 }
  )
}
```

Next.js auto-registers the generated image in metadata.

## Detection

- **ID:** `og-image-references-resolve`
- **Severity:** `low`
- **What to look for:** Look for Open Graph image references in: `<meta property="og:image" content="...">` tags in HTML/JSX, `metadata.openGraph.images = "..."` in Next.js metadata exports, `metadata.openGraph.images = [{ url: "..." }]`, `metadata.twitter.images = "..."`. For relative paths starting with `/`, verify the file exists under `public/` or `static/`. For absolute URLs, SKIP (we don't validate external URLs). Also accept Next.js convention files: `app/opengraph-image.{tsx,jpg,png,gif}`, `app/twitter-image.{tsx,jpg,png,gif}`, `app/[route]/opengraph-image.{tsx,jpg,png,gif}` — these are produced by Next.js automatically. Count all OG image references, total resolved.
- **Pass criteria:** 100% of OG image relative-path references resolve to actual files OR are produced by a Next.js convention file. Report: "X OG image references inspected, Y resolved."
- **Fail criteria:** At least 1 OG image relative-path reference does not resolve.
- **Skip (N/A) when:** No OG image references found in any layout, page, or metadata file.
- **Detail on fail:** `"1 OG image unresolved: metadata.openGraph.images = '/og.png' in src/app/layout.tsx — public/og.png does not exist and no app/opengraph-image.{tsx,jpg,png} convention file is present"`
- **Remediation:** Missing OG images mean social media link previews show a blank box. Fix it by creating the file or generating one dynamically:

  ```ts
  // app/opengraph-image.tsx — Next.js will auto-generate per-route OG images
  import { ImageResponse } from 'next/og'
  export default async function Image() {
    return new ImageResponse(
      <div style={{ /* ... */ }}>Your title</div>,
      { width: 1200, height: 630 }
    )
  }
  ```

Taxons: reference-integrity, findability

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