# Twitter Card meta tags are present

- **Pattern:** `ab-002520` (`seo-fundamentals.social-sharing.twitter-card`)
- **Severity:** low
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-002520
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-002520)

## Why it matters

Twitter/X reads its own `twitter:*` meta tags in preference to Open Graph before falling back to OG. Explicit `twitter:card` set to `summary_large_image` yields the full-width image card that dominates the feed; falling back to OG works but denies you the ability to use a different image or headline on Twitter than on Facebook — a frequent want when your Twitter audience responds to different framing than your LinkedIn audience. Missing both OG and Twitter tags produces a bare URL with no preview, which performs measurably worse on the algorithm.

## Severity rationale

Low because Twitter/X falls back to Open Graph tags, so shares still unfurl — only Twitter-specific customization is lost.

## Remediation

If you already have Open Graph tags, Twitter will use them — add explicit `twitter` metadata only when you want to override headline, description, or image specifically for Twitter/X. Always pair `summary_large_image` with an actual image.

```ts
// app/layout.tsx
export const metadata = {
  twitter: {
    card: 'summary_large_image',
    title: 'YourSite',
    description: 'Description',
    images: ['https://yoursite.com/og-image.png'],
  },
}
```

Add `twitter.site: '@yourhandle'` if you have a brand Twitter account — it links the card to your profile.

## Detection

- **ID:** `twitter-card`
- **Severity:** `low`
- **What to look for:** Check for Twitter Card meta tags: `<meta name="twitter:card">`, `<meta name="twitter:title">`, etc. In Next.js App Router, look for `twitter` property in metadata exports.
- **Pass criteria:** Count all Twitter Card meta properties configured. At minimum, `twitter:card` must be set (typically to `"summary_large_image"` for pages with images), OR at least 1 Open Graph tag must be present (Twitter/X will use OG tags as fallback). Enumerate which Twitter Card properties exist: `twitter:card`, `twitter:title`, `twitter:description`, `twitter:images`.
- **Fail criteria:** No Twitter Card meta tags found (0 properties) and no Open Graph tags to fall back to.
- **Skip (N/A) when:** The project has no social sharing requirements detected (no public-facing pages, purely internal tool or API-only project).
- **Degraded state note:** If `twitter:card` is set to `summary_large_image` but no image is configured anywhere (neither `twitter:images` nor `og:image`), the check still passes per the criteria above — the card type is declared. However, include a note in the `detail` field: `"twitter:card is summary_large_image but no image is configured (no twitter:images or og:image) — card will display in degraded mode without an image on Twitter/X"`. A `summary_large_image` card with no image falls back to a plain text card display, which defeats the purpose of the card type.
- **Detail on fail:** `"No Twitter Card tags and no Open Graph fallback — shared links on Twitter/X will have no rich preview"`
- **Remediation:** Twitter/X uses its own meta tags for link previews but falls back to Open Graph tags. If you already have OG tags, Twitter will use those. For explicit Twitter Card support:

  ```ts
  export const metadata = {
    twitter: {
      card: 'summary_large_image',
      title: 'YourSite',
      description: 'Description',
      images: ['https://yoursite.com/og-image.png'],
    },
  }
  ```

Taxons: findability

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