# twitter:card type is appropriate for the content

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

## Why it matters

Using `summary_large_image` uniformly on utility pages — login, settings, 404, dashboard — generates large image preview cards for pages that have no meaningful OG image and offer no shareable content value. The result is a card that shows a stretched or irrelevant image for a page that wasn't intended to be shared, which creates a confusing experience when users accidentally share these URLs. While this is a low-severity issue, it degrades visual polish: a `/login` page shared in a Slack channel or Twitter DM produces a prominent image-forward card for a page that serves no audience from that share.

## Severity rationale

Low because incorrect card types on utility pages result in mildly incoherent previews but do not break sharing and are unlikely to cause user-facing failures.

## Remediation

Override the card type on utility pages that do not warrant a large image preview:

```ts
// app/(auth)/login/page.tsx
export const metadata: Metadata = {
  twitter: { card: 'summary' },
}
```

Apply `summary` to `/login`, `/signup`, `/settings`, `/dashboard`, and `/404`. Leave `summary_large_image` as the root default for all content pages. This is a low-priority change — address it after completing higher-severity OG tag gaps.

## Detection

- **ID:** `twitter-card-type-appropriate`
- **Severity:** `low`
- **What to look for:** If `twitter:card` is set, check whether the type matches the nature of the content. `summary_large_image` is appropriate for pages with a prominent hero image. `summary` is appropriate for utility pages, profile pages, or pages where a large image card would be misleading. `app` is only for App Store/Play Store app promotion. Check if every single page uses `summary_large_image` regardless of content type. Count all instances found and enumerate each.
- **Pass criteria:** The `twitter:card` type used matches the nature of the page content. `summary_large_image` for image-rich content pages, `summary` for utility/profile/account pages. At least 1 implementation must be confirmed.
- **Fail criteria:** `summary_large_image` is set uniformly for all pages including utility pages (login, settings, dashboard, 404) where a large image card is not appropriate.
- **Skip (N/A) when:** `twitter:card` is not set anywhere (caught by `twitter-card-type-set`). Also skip if the project has only one page type.
- **Detail on fail:** `"summary_large_image set uniformly on all routes including /login, /settings, /404 — utility pages should use 'summary' card type"`
- **Remediation:** Override the card type on utility pages that don't warrant a large image preview:

  ```ts
  // app/(auth)/login/page.tsx
  export const metadata: Metadata = {
    twitter: { card: 'summary' },
  }
  ```

  This is a low-priority issue — the default `summary_large_image` is better than `summary` for most pages, and wrong card type rarely causes broken sharing. It primarily affects the visual polish of your link previews.

---

## External references

- external twitter-cards — https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup

Taxons: findability

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