# All public pages have complete Open Graph tags

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

## Why it matters

Missing Open Graph tags silently break every social link preview. When a page lacks og:title, og:description, or og:image, platforms like Facebook, LinkedIn, and Slack substitute generic fallbacks — your site name, truncated body text, or no image. The result is a bare URL in a feed instead of a rich preview card. Per ogp.me, all three tags are required for compliant previews; omitting any one degrades the click-through rate for every share of that page. For content-driven sites, this is a direct revenue leak: shares from blog posts, product pages, and landing pages perform significantly worse without complete OG coverage.

## Severity rationale

Critical because every share of an unconfigured page generates a degraded or empty preview, making social distribution effectively non-functional for that route.

## Remediation

Add per-page OG metadata using Next.js `generateMetadata` for dynamic routes and static `metadata` exports for fixed pages. The root layout's `openGraph` block acts as a fallback — it is not a substitute for page-level overrides on content pages.

```ts
// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }): Promise<Metadata> {
  const post = await getPost(params.slug)
  return {
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [{ url: post.coverImageUrl, width: 1200, height: 630 }],
      url: `https://yoursite.com/blog/${params.slug}`,
    },
  }
}
```

Every public-facing route with unique content needs its own og:title, og:description, and og:image. Confirm coverage by checking both `app/layout.tsx` and each content route file.

## Detection

- **ID:** `og-all-pages-complete`
- **Severity:** `critical`
- **What to look for:** Examine every public-facing page route in the project. For each page, check whether `og:title`, `og:description`, and `og:image` are all set — either via a direct `metadata.openGraph` export on that page, a `generateMetadata` function, or inherited from a layout's `openGraph` configuration. "All three present" is the pass condition — missing any one of the three fails this check for that page. Count every page template or route and enumerate which have og:title, og:description, og:image, and og:url meta tags vs. which are missing them. Before evaluating, extract and quote the exact meta tags from the <head> section of at least 2 representative pages to verify OG tag presence.
- **Pass criteria:** Every public-facing page route has all three tags (`og:title`, `og:description`, `og:image`) set or reliably inherited. Auth-gated routes (login, dashboard, settings) and API routes may be excluded from this requirement. Report even on pass: "X of Y page templates have complete OG tags (og:title, og:description, og:image, og:url)." At least 1 implementation must be confirmed.
- **Fail criteria:** Any public page route is missing one or more of `og:title`, `og:description`, or `og:image`. A root layout that sets all three but individual pages override only the title (leaving the description and image as the generic root values) counts as failing if the content pages are substantively different from the root. Do NOT pass if og:image is missing — pages without an image tag will show a blank preview on every social platform.
- **Skip (N/A) when:** Project type is `api` — no public-facing pages exist (no `app/` pages directory, no `pages/` directory other than API routes).
- **Cross-reference:** The `og-title-length` check validates that the og:title values found here meet platform-recommended character limits.
- **Detail on fail:** Name the pages and which tags are missing. Example: `"Pages /blog/[slug], /products/[id] missing og:image. Pages /about, /pricing missing all three OG tags."`
- **Remediation:** Open Graph tags are the primary mechanism for social link previews across every major platform. A page without all three tags will display a degraded or empty preview when shared. In Next.js App Router, set them per page or use `generateMetadata` for dynamic routes:

  ```ts
  // app/blog/[slug]/page.tsx
  export async function generateMetadata({ params }): Promise<Metadata> {
    const post = await getPost(params.slug)
    return {
      openGraph: {
        title: post.title,
        description: post.excerpt,
        images: [{ url: post.coverImageUrl, width: 1200, height: 630 }],
      },
    }
  }
  ```

  For static pages, use a `metadata` export. A root layout `openGraph` block serves as a fallback but should not be the only source for pages with unique content.

  For a deeper analysis of basic meta tag coverage, the SEO Fundamentals Audit covers title and description completeness across all routes.

## External references

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

Taxons: findability

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