Social Sharing Meta Tags in Nuxt

Social platforms use Open Graph (OG) and Twitter Card meta tags to generate link previews. Without them, shared links appear as plain text.

Nuxt renders your meta tags on the server by default, so social crawlers receive them in the initial HTML response—no extra configuration needed.

<script setup lang="ts">
useSeoMeta({
  // Open Graph (Facebook, LinkedIn, Discord, Slack)
  ogTitle: 'Your page title',
  ogDescription: 'Short description',
  ogImage: 'https://mysite.com/og.png',
  ogUrl: 'https://mysite.com/page',
  // Twitter/X (required - no OG fallback for card type)
  twitterCard: 'summary_large_image'
})
</script>

Quick Tips

1. Images matter: Posts with optimized OG images see 40-60% higher click-through rates. Images must be absolute URLs, minimum 1200x630px.
2. Social titles can differ: Your og:title doesn't have to match your page title. Use casual, provocative language for social—it's not search.
3. Always set twitterCard: X/Twitter has no fallback for card type. Skip it and you get plain text.

Open Graph Tags

Use useSeoMeta() for OG tags—it handles the property attribute automatically.

Core Tags

useSeoMeta({
  ogTitle: 'Hey! Open graph images are important.',
  ogDescription: 'But who reads the description anyway?',
  ogImage: 'https://mysite.com/og.png', // must be absolute URL
  ogUrl: 'https://mysite.com/products/item', // canonical URL
  ogType: 'website' // or 'article', 'product', etc.
})

Image Requirements

Include dimensions for faster rendering:

useSeoMeta({
  ogImage: 'https://mysite.com/og-images/preview.jpg',
  ogImageAlt: 'Product preview showing 3 stacked boxes',
  ogImageWidth: 1200,
  ogImageHeight: 630,
  ogImageType: 'image/jpeg'
})

Article Metadata

For blog posts, add article-specific tags:

useSeoMeta({
  ogType: 'article',
  articleAuthor: ['Harlan Wilton'],
  articleSection: 'SEO Tutorials',
  articleTag: ['nuxt', 'seo', 'meta-tags'],
  articlePublishedTime: '2024-11-05T00:00:00Z',
  articleModifiedTime: '2025-12-17T00:00:00Z'
})

Twitter/X Cards

X requires its own twitter:* meta tags. Without twitter:card, your links appear as plain text—no image, no description.

Card Types

summary_large_image — Full-width image. Use this for most pages.

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

summary — Small square thumbnail. For compact previews.

useSeoMeta({
  twitterCard: 'summary',
  twitterImage: '/icon.jpg' // 1:1 ratio, min 144x144px
})

player and app cards require approval from X.

X Fallbacks

X falls back to Open Graph when twitter:* equivalents are missing:

twitter:card has no fallback—skip it and you get no card.

Minimal setup using fallbacks:

useSeoMeta({
  twitterCard: 'summary_large_image', // required
  ogTitle: 'My page',
  ogImage: 'https://mysite.com/image.jpg'
})

Optional Twitter Tags

useSeoMeta({
  twitterSite: '@yourhandle', // Site's X handle
  twitterCreator: '@authorhandle', // Author's handle
  twitterImageAlt: 'Alt text' // 420 chars max
})

Slack & Discord

Both platforms read Open Graph tags. No platform-specific tags needed.

useSeoMeta({
  ogTitle: 'Dashboard Analytics',
  ogDescription: '847 active users, 12.4% conversion rate',
  ogImage: 'https://mysite.com/og/dashboard.png'
})

Slack also reads Twitter Card tags as fallback. Discord supports animated GIFs and shows real-time previews.

Slack-Specific Behavior

• Cache: ~30 minutes globally
• Ignores: og:type, og:locale, article:* tags, Schema.org
• No redirect following for images—use direct URLs

Platform Cache Times

Dynamic Meta Tags

Fetch your data with useFetch() or useAsyncData()—Nuxt handles server-side rendering automatically.

<script setup lang="ts">
const { data: product } = await useFetch(`/api/products/${route.params.id}`)

useSeoMeta({
  ogTitle: () => product.value?.name,
  ogDescription: () => product.value?.shortPitch,
  ogImage: () => `https://mysite.com/api/og?title=${encodeURIComponent(product.value?.name || '')}`,
  twitterCard: 'summary_large_image'
})
</script>

Automated OG Image Generation

Creating OG images manually for every page is tedious. The Nuxt OG Image module generates them automatically:

<script setup lang="ts">
defineOgImageComponent('NuxtSeo', {
  title: 'Social Sharing Meta Tags in Nuxt',
  description: 'Configure Open Graph and Twitter Cards',
  theme: '#18181b'
})
</script>

The module generates images at build time or on-demand, with zero runtime overhead. It supports:

• Vue SFCs as templates
• Tailwind CSS styling
• Custom fonts
• Dynamic text and images
• Edge function generation

Read the OG Image docs for setup and advanced patterns.

Testing Tools

1. Facebook Sharing Debugger — Also validates OG tags for Slack
2. LinkedIn Post Inspector
3. X/Twitter — Compose a tweet (don't post) to see preview
4. Discord — Paste link for real-time preview

Troubleshooting

Image not showing

• URL must be absolute HTTPS (not relative)
• File under 5MB
• Image returns 200 (not redirect)
• Not blocked by robots.txt

Wrong title/description

• Platform cached old version—add ?v=2 to URL
• For X: check you're setting twitterCard

Card not appearing at all

• Missing twitterCard for X (no fallback)
• Page requires auth (crawlers can't log in)

All-in-One Solution

The Nuxt SEO module includes OG Image generation, plus sitemaps, robots.txt, and Schema.org:

Configure social sharing site-wide in nuxt.config.ts:

export default defineNuxtConfig({
  site: {
    url: 'https://mysite.com',
    name: 'My Site',
    defaultLocale: 'en'
  },
  ogImage: {
    enabled: true,
    fonts: ['Inter:400', 'Inter:700']
  }
})

Then override per-page as needed with useSeoMeta() or defineOgImageComponent().