Twitter Cards in Nuxt · Nuxt SEO

[NuxtSEO](https://nuxtseo.com/ "Home")

- [Modules](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)
- [Tools](https://nuxtseo.com/tools)
- [Pro](https://nuxtseo.com/pro)
- [Learn SEO](https://nuxtseo.com/learn-seo/nuxt) [Releases](https://nuxtseo.com/releases)

[1.4K](https://github.com/harlan-zw/nuxt-seo)

[Nuxt SEO on GitHub](https://github.com/harlan-zw/nuxt-seo)

Learn SEO

Master search optimization

Nuxt

 Vue

[SEO Checklist](https://nuxtseo.com/learn-seo/checklist) [Pre-Launch Warmup](https://nuxtseo.com/learn-seo/pre-launch-warmup) [Backlinks & Authority](https://nuxtseo.com/learn-seo/backlinks)

[Mastering Meta](https://nuxtseo.com/learn-seo/nuxt/mastering-meta)

- [Titles](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/titles)
- [Meta Description](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/descriptions)
- [Image Alt Text](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/alt-text)
- [Social Sharing](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/open-graph)
- [Rich Results](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/rich-results)
- [Schema.org](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/schema-org)
- [Twitter Cards](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/twitter-cards)

[ Controlling Crawlers](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers)

- [Robots Txt](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers/robots-txt)
- [Sitemaps](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers/sitemaps)
- [Robot Meta Tag](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers/meta-tags)
- [Canonical Link Tag](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers/canonical-urls)
- [HTTP Redirects](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers/redirects)
- [Duplicate Content](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers/duplicate-content)
- [llms.txt](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers/llms-txt)

[ Routes & Rendering](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering)

- [URL Structure](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/url-structure)
- [Pagination](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/pagination)
- [Trailing Slashes](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/trailing-slashes)
- [Query Parameters](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/query-parameters)
- [Hreflang & i18n](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/i18n)
- [404 Pages](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/404-pages)
- [Dynamic Routes](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/dynamic-routes)
- [Internal Linking](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/internal-linking)
- [Programmatic SEO](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/programmatic-seo)
- [Rendering Modes](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/rendering)
- [Security](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/security)

[ Launch & Listen](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen)

- [Getting Indexed](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen/going-live)
- [Google Search Console](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen/search-console)
- [Core Web Vitals](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen/core-web-vitals)
- [Indexing Issues](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen/indexing-issues)
- [SEO Monitoring](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen/seo-monitoring)
- [Site Migration](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen/site-migration)
- [IndexNow](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen/indexnow)
- [Debugging](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen/debugging)
- [AI Search Optimization](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen/ai-optimized-content)

1. [Learn SEO for Nuxt](https://nuxtseo.com/learn-seo)
2.
3. [Mastering Meta](https://nuxtseo.com/learn-seo/nuxt/mastering-meta)
4.
5. [Twitter Cards](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/twitter-cards)

# Twitter Cards in Nuxt

Configure Twitter/X Cards to control how your links appear when shared on Twitter with rich previews, images, and metadata.

[![Harlan Wilton](https://avatars.githubusercontent.com/u/5326365?v=4)Harlan Wilton](https://x.com/harlan-zw)10 mins read Published Nov 3, 2024 Updated Dec 5, 2024

What you'll learn

- Twitter requires `twitterCard`; OG tags won't fallback 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.

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

## [Card Types](#card-types)

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

**summary_large_image** - Full-width image preview (1200x600px). Use this for most pages.

```
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.

```
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](#required-tags)

These three tags are mandatory for any Twitter Card:

```
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). The exception: `summary_large_image` uses a 2:1 ratio instead of OG's 1.91:1.

## [Optional Tags](#optional-tags)

```
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
})
```

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

## [Open Graph Fallbacks](#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:

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

This works:

```
// ✅ 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:

```
// ✅ 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](#testing)

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.

You can also use [Twitter Card Validator](https://cards-dev.twitter.com/validator) directly.

The validator caches results. If you update tags and don't see changes:

1. Add a query parameter: `?v=2`
2. Wait 7 days for cache to expire
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** - Twitter cached the old version. Add `?v=1` to the URL.

**Card not appearing** - You forgot `twitterCard` meta tag. It has no fallback.

## [Per-Page Cards](#per-page-cards)

Set different cards for different pages:

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

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).

## [Automated OG Image Generation](#automated-og-image-generation)

See [Automated OG Image Generation](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/open-graph#automated-og-image-generation) for automatic image creation with the Nuxt OG Image module.

[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)

---

[Schema.org Learn how to implement Schema.org structured data in Nuxt. Get rich results in Google search with type-safe JSON-LD markup using the Nuxt Schema.org module.](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/schema-org) [Controlling Crawlers Manage how search engines crawl and index your Nuxt app. Configure robots.txt, sitemaps, canonical URLs, and redirects for better SEO.](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers)

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)
- [Automated OG Image Generation](#automated-og-image-generation)

[GitHub](https://github.com/harlan-zw/nuxt-seo) [ Discord](https://discord.com/invite/275MBUBvgP)

### [NuxtSEO](https://nuxtseo.com/ "Home")

- [Getting Started](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)
- [MCP](https://nuxtseo.com/docs/nuxt-seo/guides/mcp)

Modules

- [Robots](https://nuxtseo.com/docs/robots/getting-started/introduction)
- [Sitemap](https://nuxtseo.com/docs/sitemap/getting-started/introduction)
- [OG Image](https://nuxtseo.com/docs/og-image/getting-started/introduction)
- [Schema.org](https://nuxtseo.com/docs/schema-org/getting-started/introduction)
- [Link Checker](https://nuxtseo.com/docs/link-checker/getting-started/introduction)
- [SEO Utils](https://nuxtseo.com/docs/seo-utils/getting-started/introduction)
- [Site Config](https://nuxtseo.com/docs/site-config/getting-started/introduction)
- [Skew Protection](https://nuxtseo.com/docs/skew-protection/getting-started/introduction)
- [AI Ready](https://nuxtseo.com/docs/ai-ready/getting-started/introduction)

### [NuxtSEO Pro](https://nuxtseo.com/pro "Nuxt SEO Pro")

- [Getting Started](https://nuxtseo.com/pro)
- [Dashboard](https://nuxtseo.com/pro/dashboard)
- [Pro MCP](https://nuxtseo.com/pro/docs/getting-started/mcp-setup)

### [Learn SEO](https://nuxtseo.com/learn-seo "Learn SEO")

Nuxt

- [Mastering Meta](https://nuxtseo.com/learn-seo/nuxt/mastering-meta)
- [Controlling Crawlers](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers)
- [Launch & Listen](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen)
- [Routes & Rendering](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering)
- [Staying Secure](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/security)

Vue

- [Vue SEO Guide](https://nuxtseo.com/learn-seo/vue)
- [Mastering Meta](https://nuxtseo.com/learn-seo/vue/mastering-meta)
- [Controlling Crawlers](https://nuxtseo.com/learn-seo/vue/controlling-crawlers)
- [SPA SEO](https://nuxtseo.com/learn-seo/vue/spa)
- [SSR Frameworks](https://nuxtseo.com/learn-seo/vue/ssr-frameworks)
- [SEO Checklist](https://nuxtseo.com/learn-seo/checklist)
- [Pre-Launch Warmup](https://nuxtseo.com/learn-seo/pre-launch-warmup)
- [Backlinks & Authority](https://nuxtseo.com/learn-seo/backlinks)

### [Tools](https://nuxtseo.com/tools "SEO Tools")

- [Social Share Debugger](https://nuxtseo.com/tools/social-share-debugger)
- [Robots.txt Generator](https://nuxtseo.com/tools/robots-txt-generator)
- [Meta Tag Checker](https://nuxtseo.com/tools/meta-tag-checker)
- [HTML to Markdown](https://nuxtseo.com/tools/html-to-markdown)
- [XML Sitemap Validator](https://nuxtseo.com/tools/xml-sitemap-validator)
- [Schema.org Validator](https://nuxtseo.com/tools/schema-validator)
- [Keyword Idea Generator](https://nuxtseo.com/tools/keyword-generator)
- [Keyword Research](https://nuxtseo.com/tools/keyword-research)
- [SERP Analyzer](https://nuxtseo.com/tools/serp-analyzer)
- [Domain Rankings](https://nuxtseo.com/tools/domain-rankings)

Copyright © 2023-2026 Harlan Wilton - [MIT License](https://github.com/harlan-zw/nuxt-seo/blob/main/license) · [mdream](https://mdream.dev)