Open Graph image references resolve

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.

Either place the image at public/og.png or generate one per-route with the Next.js convention file app/opengraph-image.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.

• ID: ai-slop-hallucinations.asset-references.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:

  // 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 }
    )
  }