---
title: "Social Sharing Meta Tags in Nuxt"
description: "Set Open Graph and Twitter Card tags in Nuxt so links preview correctly on Facebook, X, LinkedIn, Slack, and Discord instead of plain text."
canonical_url: "https://nuxtseo.com/learn-seo/nuxt/mastering-meta/open-graph"
last_updated: "2026-07-16"
---

<key-takeaways>

- OG tags control link previews on Facebook, [LinkedIn](https://linkedin.com), Discord, Slack
- Images must be absolute HTTPS URLs, 1200x600px (2:1) recommended
- Nuxt OG Image module generates images automatically at build time

</key-takeaways>

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 with no extra configuration needed.

```vue
<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**: a page with a working `og:image` renders as a card with a preview image; a page without one renders as a bare text link. Images must be absolute URLs.
2. **Social titles can differ**: your `og:title` doesn't have to match your [page title](/learn-seo/nuxt/mastering-meta/titles). Search intent doesn't apply on social, so casual or provocative language works fine.
3. **Always set twitterCard**: X/Twitter has no fallback for card type. Skip it and you get plain text.

## Open Graph Tags

Use [`useSeoMeta()`](https://unhead.unjs.io/docs/head/api/composables/use-seo-meta) for OG tags: it handles the `property` attribute automatically.

### Core Tags

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

<table>
<thead>
  <tr>
    <th>
      Spec
    </th>
    
    <th>
      Value
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      Minimum size
    </td>
    
    <td>
      600x315px
    </td>
  </tr>
  
  <tr>
    <td>
      Recommended size
    </td>
    
    <td>
      1200x600px (2:1)
    </td>
  </tr>
  
  <tr>
    <td>
      Max file size
    </td>
    
    <td>
      5MB (1MB recommended)
    </td>
  </tr>
  
  <tr>
    <td>
      Formats
    </td>
    
    <td>
      JPG, PNG, WebP, GIF
    </td>
  </tr>
  
  <tr>
    <td>
      URL
    </td>
    
    <td>
      Absolute HTTPS
    </td>
  </tr>
</tbody>
</table>

Use 1200x600px (2:1): it matches X's card ratio, renders cleanly on Discord and Slack, and Facebook displays it fine even though its own docs still list the older 1.91:1 (1200x630px) spec. The Nuxt OG Image module defaults to 1200x600px, so one image covers every platform.

Include dimensions for faster rendering:

```ts
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 best practices on writing effective alt text, see the [alt text guide](/learn-seo/nuxt/mastering-meta/alt-text).

### Article Metadata

For blog posts, add article-specific tags:

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

X requires `twitter:card` with no OG fallback for card type. Without it, your links appear as plain text. X does fall back to OG tags for title, description, and image, so you only need to add `twitterCard: 'summary_large_image'` alongside your OG tags for most pages.

See the [Twitter Cards guide](/learn-seo/nuxt/mastering-meta/twitter-cards) for card types, required tags, and testing.

## Slack & Discord

Both platforms read OG tags directly, no platform-specific tags needed. Discord supports animated GIFs, but it caches embeds per message rather than fetching live on every view.

Slack displays images at 360x200px in chat and 1200x600px when expanded. It reads `og:title`, `og:description`, `og:image`, and `og:url`; everything else is ignored, including `og:type`, `og:locale`, `article:*` tags, Twitter Card tags, and Schema.org markup.

**Caching**: Slack caches unfurls for about 30 minutes per URL. To force a refresh, append a query parameter (`?v=2`) so Slack treats it as a new URL.

**Images**: Slack does not follow redirects for `og:image` URLs, so use direct image URLs. Images must be under 5MB, HTTPS, and in PNG/JPG/GIF format.

**Authenticated pages**: Slack's crawler cannot log in, so pages behind auth show generic unfurls. Most SaaS apps accept this rather than engineering workarounds.

**Dynamic content**: Because of caching, all users sharing the same URL see the same preview. If previews should differ per user, generate unique URLs (`/dashboard?user=alice`).

## Platform Cache Times

<table>
<thead>
  <tr>
    <th>
      Platform
    </th>
    
    <th>
      Cache Duration
    </th>
    
    <th>
      Clear Cache
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      Facebook
    </td>
    
    <td>
      ~30 days
    </td>
    
    <td>
      <a href="https://developers.facebook.com/tools/debug/" rel="nofollow">
        Sharing Debugger
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      LinkedIn
    </td>
    
    <td>
      ~7 days
    </td>
    
    <td>
      <a href="https://www.linkedin.com/post-inspector/" rel="nofollow">
        Post Inspector
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      X/Twitter
    </td>
    
    <td>
      ~7 days (not officially documented)
    </td>
    
    <td>
      Add <code>
        ?v=2
      </code>
      
       to the URL
    </td>
  </tr>
  
  <tr>
    <td>
      Slack
    </td>
    
    <td>
      ~30 minutes
    </td>
    
    <td>
      Add <code>
        ?v=2
      </code>
      
       to the URL
    </td>
  </tr>
  
  <tr>
    <td>
      Discord
    </td>
    
    <td>
      Cached per message
    </td>
    
    <td>
      Delete and re-paste the link
    </td>
  </tr>
  
  <tr>
    <td>
      Telegram
    </td>
    
    <td>
      Effectively indefinite
    </td>
    
    <td>
      <a href="https://t.me/WebpageBot" rel="nofollow">
        @WebpageBot
      </a>
    </td>
  </tr>
</tbody>
</table>

<note icon="i-simple-icons-telegram">

Telegram's OG cache is effectively infinite. While it may expire for links no one has interacted with in a long time, you should assume it never clears on its own. The official [@WebpageBot](https://t.me/WebpageBot) can instantly refresh the OG image and metadata for everyone.

</note>

## Dynamic Meta Tags

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

```vue
<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:

<module-card slug="og-image">



</module-card>

```vue
<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](https://tailwindcss.com) styling
- Custom fonts
- Dynamic text and images
- Edge function generation

[Read the OG Image docs](/docs/og-image/getting-started/introduction) for setup and advanced patterns.

## 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. Slack's crawler reads the same tags, so this catches Slack unfurl problems too.
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**

- 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 the old version: add `?v=2` to the 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:

<module-card slug="nuxt-seo">



</module-card>

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

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

## Checklist

<checklist id="nuxt-open-graph">

- Set `ogTitle`, `ogDescription`, `ogImage`, and `ogUrl` with `useSeoMeta()`
- Use an absolute HTTPS URL for `ogImage`, at least 600x315px
- Set `twitterCard` too: there's no OG fallback for the card type itself
- Test previews with the Facebook Sharing Debugger, LinkedIn Post Inspector, or the [Social Share Debugger](/tools/social-share-debugger)
- Consider the Nuxt OG Image module for images generated automatically at build time

</checklist>