Twitter Cards

10-20 minBeginner

Optimize how your content appears on Twitter/X using Twitter Card meta tags.

Prerequisites

Next.js App Router

Beginner Recommended

Metadata API

Adding twitter properties.

Configuring Twitter

Add the twitter key to your metadata export.

Specify the card type (usually summary_large_image).

Example

export const metadata = {
  twitter: {
    card: 'summary_large_image',
    title: 'Acme Corp',
    description: 'The best widgets.',
    siteId: '1467726470533754880',
    creator: '@acme',
    creatorId: '1467726470533754880',
    images: ['https://acme.com/og.png'],
  },
}

Verification Checklist

Use the Twitter Card Validator (if available) or simply tweet the link to test.
Verify <meta name="twitter:card" ...> tags in the page source.