Social Sharing Meta Tags in Nuxt

Social platforms use Open Graph (OG) and Twitter Card meta tags to generate link previews. Preview behavior depends on the platform.

Nuxt renders your meta tags on the server by default, so social crawlers receive them in the initial HTML response with 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 card selection
  twitterCard: 'summary_large_image'
})
</script>

Quick Tips

1. Images matter: supply a public absolute image URL and test the preview on the target platform.
2. Social titles can differ: your og:title doesn't have to match your page title. Search intent doesn't apply on social, so casual or provocative language works fine.
3. Set twitterCard explicitly: choose the card type you want and test it on X.

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

This example uses 1200x600px. Treat it as a design choice, then check the preview on each target platform.

Include dimensions that match your actual image:

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

Write descriptive ogImageAlt text that conveys the image content. For examples, see the alt text guide.

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: '2026-07-16T00:00:00Z'
})

Twitter/X Cards

Set an explicit twitterCard value and X title, description, and image metadata. Test the shared URL on X; Open Graph metadata alone does not prove the platform's rendered result.

See the Twitter Cards guide for card types, required tags, and testing.

Slack & Discord

Test your public URL on the platform where readers share it. Slack distinguishes classic link unfurling from app-provided unfurls. An app can provide a preview for authenticated content.

Use publicly reachable image URLs for ordinary link previews. Check the response status, content type, and image bytes. Do not assume a fixed cache duration or that every platform uses the same metadata.

Platform Cache Times

Social platforms can cache previews. This guide does not assume a fixed expiry time.

After changing metadata, inspect the current HTML and image response first. Then use the target platform's inspection tool, if available. A third-party preview cannot establish what another platform has cached.

Dynamic Meta Tags

Use reactive getters when data changes. If data comes from your API, fetch it during setup and handle missing data before rendering metadata. The endpoint and image generator are app-owned dependencies.

See the description example for the reactive getter pattern.

Automated OG Image Generation

Nuxt OG Image can generate images after you configure a template and renderer. Runtime generation uses server resources; prerendering moves generation into the build.

Follow the current installation guide for a renderer and supported template names.

Testing Tools

Preview how a link will render before you ship it:

1. Facebook Sharing Debugger: paste a URL to see the exact OG tags Facebook reads, and force a cache refresh. Test Slack separately.
2. LinkedIn Post Inspector: shows LinkedIn's cached preview and lets you force a refetch after a change.
3. X/Twitter: compose a tweet without posting it to see the card render live.
4. Discord: paste the link into any channel; Discord fetches and caches the embed per message.
5. Social Share Debugger: this site's own tool checks OG and Twitter Card tags directly, without needing an account on any platform.

Troubleshooting

Image not showing

• Image URL is absolute and publicly reachable
• Image size and format meet the target platform's requirements
• Image URL resolves to valid image bytes
• Not blocked by robots.txt

Wrong title/description

• Compare the public page response with the preview before diagnosing a cache issue
• For X: check you're setting twitterCard

Card not appearing at all

• Missing or incorrect X card metadata
• Page requires auth (crawlers can't log in)

All-in-One Solution

The Nuxt SEO module bundles OG Image alongside sitemap, robots, and Schema.org modules. Generated images still need the OG Image setup.

Set per-page metadata with useSeoMeta(). Follow the OG Image installation guide for generated images.

Checklist