---
title: "Twitter Cards in Nuxt · Nuxt SEO"
canonical_url: "https://nuxtseo.com/learn-seo/nuxt/mastering-meta/twitter-cards"
last_updated: "2026-07-16T12:00:00.000Z"
meta:
  author: "Harlan Wilton"
  description: "Add twitter:card meta tags in Nuxt so shared links get a large image preview on X instead of a bare text link."
  "og:description": "Add twitter:card meta tags in Nuxt so shared links get a large image preview on X instead of a bare text link."
  "og:title": "Twitter Cards in Nuxt · Nuxt SEO"
---

Nuxt SEO on GitHub

# **Twitter Cards in Nuxt**

Add twitter:card meta tags in Nuxt so shared links get a large image preview on X instead of a bare text link.

[Harlan Wilton](https://x.com/harlan-zw)10 mins read Published **Nov 3, 2024** Updated **Jul 16, 2026**

**What you'll learn**

- Twitter requires `**twitterCard**`; OG tags don't fall back for card type
- Use `**summary_large_image**` for full-width previews (1200x600px recommended)
- Twitter falls back to OG for title/description, but not for the card type itself

Twitter/X falls back to [**~~Open Graph tags~~**](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/open-graph) for title, description, and image. Set up OG tags first, then add Twitter-specific overrides described below.

Twitter requires its own `**twitter:card**` meta tag for rich link previews. Without it, your links appear as plain text with no image or description.

```vue
<script setup lang="ts">
useSeoMeta({
  twitterCard: 'summary_large_image',
  twitterImage: '/social-preview.jpg',
  twitterTitle: 'Your page title',
  twitterDescription: 'Your page description'
})
</script>
```

## Card Types

Twitter supports four card types via `**twitter:card**`:

**summary\_large\_image** - Full-width image preview (1200x600px). Use this for most pages.

```vue
useSeoMeta({
  twitterCard: 'summary_large_image',
  twitterImage: '/preview.jpg' // Minimum 300x157px, aspect ratio 2:1
})
```

**summary** - Small square thumbnail (1:1 aspect ratio). Don't use this unless you specifically want a smaller preview.

```vue
useSeoMeta({
  twitterCard: 'summary',
  twitterImage: '/icon.jpg' // Minimum 144x144px
})
```

**player** - Embedded video/audio player. Requires approval from Twitter.

**app** - Mobile app install prompts. Requires app store URLs and IDs.

Most sites should only use `**summary_large_image**`.

## Required Tags

These three tags are mandatory for any Twitter Card:

```vue
useSeoMeta({
  twitterCard: 'summary_large_image',
  twitterTitle: 'Page title - 70 characters max',
  twitterImage: 'https://example.com/image.jpg' // Must be absolute URL
})
```

Image requirements match [**~~Open Graph specs~~**](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/open-graph#image-requirements). Use 1200x600px (2:1) and one image covers both your OG and Twitter Card previews.

## Optional Tags

```vue
useSeoMeta({
  twitterCard: 'summary_large_image',
  twitterTitle: 'Your title',
  twitterImage: '/preview.jpg',
  twitterDescription: 'Description text - 200 characters max',
  twitterSite: '@yourhandle', // Your site's Twitter handle
  twitterCreator: '@authorhandle', // Content author's handle
  twitterImageAlt: 'Alt text' // 420 chars max
})
```

`**twitterDescription**` defaults to `**og:description**` if not set, but specify it to control the exact text Twitter shows.

## Open Graph Fallbacks

Twitter falls back to Open Graph tags when `**twitter:***` tags are missing:

| **Twitter Tag** | **Fallback** |
| --- | --- |
| `**twitter:title**` | `**og:title**` |
| `**twitter:description**` | `**og:description**` |
| `**twitter:image**` | `**og:image**` |

This won't work:

```vue
// ❌ Twitter will show nothing
useSeoMeta({
  ogTitle: 'My page',
  ogImage: '/image.jpg'
})
```

This works:

```vue
// ✅ Twitter uses og:* tags as fallback
useSeoMeta({
  twitterCard: 'summary_large_image', // Required - no fallback
  ogTitle: 'My page',
  ogImage: '/image.jpg'
})
```

Set both to avoid relying on fallback behavior:

```vue
// ✅ Explicit control
useSeoMeta({
  twitterCard: 'summary_large_image',
  twitterTitle: 'Twitter-specific title (70 chars)',
  twitterImage: '/twitter-preview.jpg',
  ogTitle: 'OpenGraph title can be longer',
  ogImage: '/og-preview.jpg'
})
```

## Testing

X deprecated its own Card Validator's preview in 2022, so use our [**~~Social Share Debugger~~**](https://nuxtseo.com/tools/social-share-debugger) to preview how your links appear on Twitter, Facebook, [**~~LinkedIn~~**](https://linkedin.com), and other platforms.

X caches card data per URL. If you update tags and don't see changes:

1. Add a query parameter: `**?v=2**`
2. Wait roughly a week for the cache to expire naturally
3. Use a different URL to test

Common issues:

**Image not showing** - Check that:

- URL is absolute with HTTPS
- File size is under 5MB
- Image exists and returns 200 status
- No robots.txt blocking Twitter's bot

**Wrong title/description**: X cached the old version. Add `**?v=2**` to the URL.

**Card not appearing**: you forgot the `**twitterCard**` meta tag. It has no fallback.

## Per-Page Cards

Set different cards for different pages:

```vue
<!-- ~/pages/blog/[slug].vue -->
<script setup lang="ts">
const route = useRoute()
const { data: post } = await useAsyncData(`post-${route.params.slug}`, () =>
  queryCollection('blog').path(`/blog/${route.params.slug}`).first())

useSeoMeta({
  twitterCard: 'summary_large_image',
  twitterTitle: post.value.title,
  twitterDescription: post.value.excerpt,
  twitterImage: post.value.coverImage
})
</script>
```

Works best for blog posts with feature images, product pages with photos, landing pages with marketing visuals. Skip it for internal tools or password-protected content (Twitter can't fetch behind auth anyway).

If you'd generate the `**twitterImage**` automatically instead of hand-picking one per page, see [**~~Automated OG Image Generation~~**](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/open-graph#automated-og-image-generation) for the Nuxt OG Image module setup.

## Checklist

**Checklist**

- Set `**twitterCard**`: there's no OG fallback for the card type itself
- Use `**summary_large_image**` for most pages
- Set OG tags too so `**twitterTitle**`, `**twitterDescription**`, and `**twitterImage**` have a fallback
- Set `**twitterSite**` and `**twitterCreator**` for attribution
- Test with the [**~~Social Share Debugger~~**](https://nuxtseo.com/tools/social-share-debugger)

[**The 2026 SEO Checklist for Nuxt & Vue ** Pre-launch setup, post-launch verification, and ongoing monitoring. Interactive checklist with links to every guide.](https://nuxtseo.com/learn-seo/checklist) [Haven't launched yet? Start with the **Pre-Launch Warmup**](https://nuxtseo.com/learn-seo/pre-launch-warmup)

---

### **Related **

[**Open Graph Meta Tags**](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/open-graph)

### **Open Source **

[**unjs/unhead**** Public **](https://github.com/unjs/unhead)

[**Social Sharing** Set Open Graph and Twitter Card tags in Nuxt so links preview correctly on Facebook, X, LinkedIn, Slack, and Discord instead of plain text.](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/open-graph) [**Schema.org** Add type-safe JSON-LD to Nuxt with useSchemaOrg or the zero-config Schema.org module, then validate it with Google's Rich Results Test.](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/schema-org)

**On this page**

- [Card Types](#card-types)
- [Required Tags](#required-tags)
- [Optional Tags](#optional-tags)
- [Open Graph Fallbacks](#open-graph-fallbacks)
- [Testing](#testing)
- [Per-Page Cards](#per-page-cards)
- [Checklist](#checklist)