# Social sharing preview metadata is configured

- **Pattern:** `ab-002174` (`pre-launch.user-facing.social-sharing`)
- **Severity:** medium
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-002174
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-002174)

## Why it matters

When a URL is shared on Twitter/X, LinkedIn, Slack, iMessage, or WhatsApp, those platforms fetch Open Graph and Twitter Card metadata to generate a rich link preview with title, description, and image. Without `og:image` — the single most important OG tag — links render as plain text with no visual. This directly suppresses click-through rates on your launch announcements, Product Hunt submission, and any social campaign. A missing OG image is a silent launch tax: every share underperforms without it.

## Severity rationale

Medium because absent OG metadata degrades every social share to plain text with no preview image, directly suppressing click-through rates on launch announcements without creating a security risk.

## Remediation

Configure `openGraph` and `twitter` metadata in `app/layout.tsx`. Create an OG image at `public/og-image.png` at 1200x630px.

```tsx
// app/layout.tsx
export const metadata = {
  openGraph: {
    title: 'Your Site Name',
    description: 'What your product does in one sentence.',
    images: [{ url: '/og-image.png', width: 1200, height: 630 }],
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    images: ['/og-image.png'],
  },
}
```

Validate your tags at https://opengraph.xyz before launch. Ensure the OG image file exists in `public/` — a broken image reference is worse than no tag at all because platforms cache the broken result.

## Detection

- **ID:** `social-sharing`
- **Severity:** `medium`
- **What to look for:** Count all OG (Open Graph) and Twitter Card meta tags. Enumerate which required properties are present: og:title, og:description, og:image, og:url, twitter:card. Check layout components and page metadata for Open Graph and Twitter Card tags. In Next.js App Router, look for a `metadata` export with `openGraph` and `twitter` properties in `app/layout.tsx` or key page files. In Pages Router, look for `<meta property="og:title">`, `<meta property="og:image">`, `<meta name="twitter:card">`, etc. in `_app.tsx` or individual pages. Check if an `og:image` is defined and references a real image file in `public/`. Before evaluating, extract and quote the first 3 OG meta tag values found in the codebase.
- **Pass criteria:** At minimum, `og:title`, `og:description`, and `og:image` are configured at the site level, and a valid OG image file exists or URL is provided. At least 4 of 5 required social meta tags (og:title, og:description, og:image, og:url, twitter:card) must be present.
- **Fail criteria:** No Open Graph tags found, or `og:image` is missing (the most critical OG tag for link previews), or `og:image` references a file that doesn't exist in `public/`.
- **Skip (N/A) when:** Skip for API-only projects or internal tools not meant for social sharing. Signal: project type is `api` or `cli`, no public-facing marketing pages.

- **Cross-reference:** For favicon and icons, see `favicon`.
- **Detail on fail:** `"No Open Graph metadata found — links shared on social media and messaging apps will render as plain text with no preview image"`
- **Remediation:** When your URL is shared on social media, Slack, or messaging apps, platforms read Open Graph tags to generate a rich preview with title, description, and image. Without them, your link looks bare and gets ignored:

  ```tsx
  // app/layout.tsx — social sharing metadata
  export const metadata = { openGraph: { title: '...', description: '...', images: '/og.png', url: 'https://yoursite.com' }, twitter: { card: 'summary_large_image' } }
  ```

  ```tsx
  // app/layout.tsx (Next.js App Router)
  export const metadata = {
    openGraph: {
      title: 'Your Site Name',
      description: 'A clear, compelling description of what your product does.',
      images: [{ url: '/og-image.png', width: 1200, height: 630 }],
      type: 'website',
    },
    twitter: {
      card: 'summary_large_image',
      title: 'Your Site Name',
      description: 'A clear, compelling description.',
      images: ['/og-image.png'],
    },
  }
  ```

  The OG image should be 1200x630 pixels for best cross-platform compatibility. Validate your tags at https://opengraph.xyz or the Twitter Card Validator. For a deeper analysis of SEO and social metadata, the SEO Fundamentals Audit covers this comprehensively.

## External references

- schema-org WebPage

Taxons: findability

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