---
title: "Social Sharing Meta Tags in Vue"
description: "Add Open Graph and Twitter Card metadata to the initial HTML in Vue. Test public images and previews on each platform."
canonical_url: "https://nuxtseo.com/learn-seo/vue/mastering-meta/social-sharing"
last_updated: "2026-10-05"
---

> Index of every page on this site: [llms.txt](https://nuxtseo.com/llms.txt)

::key-takeaways
- OG tags control social previews on Facebook, [LinkedIn](https://linkedin.com), Slack, Discord
- Use absolute HTTPS image URLs for reliable access
- Set `twitterCard` explicitly and test the preview on X
::

Social platforms use Open Graph (OG) and Twitter Card meta tags to generate link previews. Missing or inaccessible tags can produce incomplete previews.

**Initial HTML required**: Put social tags in the response a platform fetches. Static HTML, prerendering, and [server-side rendering](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/rendering) can all provide them.

```vue
<script setup lang="ts">
import { useSeoMeta } from '@unhead/vue'

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',
  // Set the X card layout explicitly
  twitterCard: 'summary_large_image'
})
</script>
```

## Quick Tips

1. **Images matter**: a public `og:image` gives platforms a preview image to use. The resulting layout depends on the platform. Images must be absolute URLs.
2. **Social titles can differ**: your `og:title` doesn't have to match your [page title](https://nuxtseo.com/learn-seo/vue/mastering-meta/titles). Search intent doesn't apply on social, so casual or provocative language works fine.
3. **Set `twitterCard` explicitly**: Choose the card layout and test it on X.

## Open Graph Tags

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

### Core Tags

```vue
<script setup lang="ts">
import { useSeoMeta } from '@unhead/vue'

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.
})
</script>
```

### Image Requirements

Check each platform's image requirements. A 1200×630 image is a useful starting point. Preview cropping can differ. Test important images on the platforms your readers use.

Include metadata describing the image dimensions:

```vue
<script setup lang="ts">
import { useSeoMeta } from '@unhead/vue'

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

::warning
Use absolute HTTPS image URLs. The Open Graph protocol accepts HTTP and HTTPS, but HTTPS avoids mixed-content and access problems. Always include the full URL, such as `https://mysite.com/images/og.png`
::

### Article Metadata

For blog posts, add article-specific tags:

```vue
<script setup lang="ts">
import { useSeoMeta } from '@unhead/vue'

useSeoMeta({
  ogType: 'article',
  articleAuthor: ['Harlan Wilton'],
  articleSection: 'SEO Tutorials',
  articleTag: ['vue', 'seo', 'meta-tags'],
  articlePublishedTime: '2024-11-05T00:00:00Z',
  articleModifiedTime: '2026-07-16T00:00:00Z'
})
</script>
```

## Twitter/X Cards

Set X card metadata explicitly when you need a specific layout. Preview behavior can depend on the platform and cached metadata.

### Card Types

**summary_large_image**: Full-width image. Use this for most pages.

```vue
<script setup lang="ts">
import { useSeoMeta } from '@unhead/vue'

useSeoMeta({
  twitterCard: 'summary_large_image',
  twitterImage: 'https://mysite.com/preview.jpg' // Check the current X large-image requirements
})
</script>
```

**summary**: Small square thumbnail. For compact previews.

```vue
<script setup lang="ts">
import { useSeoMeta } from '@unhead/vue'

useSeoMeta({
  twitterCard: 'summary',
  twitterImage: 'https://mysite.com/icon.jpg' // Check the current X summary-image requirements
})
</script>
```

**player** and **app** cards have additional platform requirements. Check X's current guidance before choosing them.

### X Fallbacks

Set platform-specific tags when your X preview must differ. Test the preview with the current platform. The former X card markup documentation now redirects to a generic developer overview.

An explicit title and image setup:

```vue
<script setup lang="ts">
import { useSeoMeta } from '@unhead/vue'

useSeoMeta({
  twitterCard: 'summary_large_image',
  ogTitle: 'My page',
  ogImage: 'https://mysite.com/image.jpg',
  twitterTitle: 'My page',
  twitterImage: 'https://mysite.com/image.jpg'
})
</script>
```

### Optional Twitter Tags

```vue
<script setup lang="ts">
import { useSeoMeta } from '@unhead/vue'

useSeoMeta({
  twitterSite: '@yourhandle', // Site's X handle
  twitterCreator: '@authorhandle', // Author's handle
  twitterImageAlt: 'Alt text'
})
</script>
```

## Slack & Discord

Both platforms read Open Graph tags directly, no platform-specific tags needed.

```vue
<script setup lang="ts">
import { useSeoMeta } from '@unhead/vue'

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

Check Slack and Discord previews after changing tags or images. Each platform can cache its own copy.

Platform behavior can change. Check the preview instead of relying on an exact cache lifetime.

## Platform Cache Times

Platforms cache metadata. Use [Facebook Sharing Debugger](https://developers.facebook.com/tools/debug/) or [LinkedIn Post Inspector](https://www.linkedin.com/post-inspector/) to request a refresh where supported. Recheck the preview after updates. A query parameter can create a different URL, but it does not guarantee cache invalidation.

## Dynamic Meta Tags

Data must be available while generating the initial HTML. These excerpts show data flow only. Your SSR entry must also install Unhead, render the Vue app, and insert the rendered head tags. `onMounted` does not run during SSR.

```ts
// entry-server.ts
export async function render(url: string) {
  const product = await fetch(`https://api.mysite.com/product/${url}`).then(r => r.json())
  const app = createSSRApp(App)
  app.provide('product', product)
  return { app, product }
}
```

```vue
<script setup lang="ts">
import { useSeoMeta } from '@unhead/vue'
import { inject } from 'vue'

const product = inject <Product> ('product')

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

## Testing & Troubleshooting

Test previews before you ship:

1. [Facebook Sharing Debugger](https://developers.facebook.com/tools/debug/): Check Facebook's fetch and preview
2. [LinkedIn Post Inspector](https://www.linkedin.com/post-inspector/)
3. X/Twitter: Compose a tweet (don't post) to see preview
4. Discord: Paste link for real-time preview

**Image not showing**

- URL must be absolute HTTPS (not relative)
- File meets the target platform's current limits
- Image is publicly accessible at its final URL
- Not blocked by robots.txt

**Wrong title/description**

- Platform may have cached an old version. Use its refresh tool where available
- For X: check your card metadata and the current preview

**Card not appearing at all**

- Missing or inaccessible card metadata
- Page requires auth (crawlers can't log in)

## OG Image Tools

Creating OG images manually is tedious:

- [OG Image Playground](https://og-playground.vercel.app/): Design and export with code
- [x-satori](https://github.com/Zhengqbbb/x-satori): Vue SFCs + Tailwind to generate at build time

## Checklist

::checklist{#vue-social-sharing}
- Set `ogTitle`, `ogDescription`, `ogImage`, and `ogUrl` with `useSeoMeta()`{lang="ts"} from `@unhead/vue`
- Use an absolute HTTPS URL for `ogImage`, with dimensions suited to your target platforms
- Set `twitterCard` explicitly and test the X preview
- Fetch data before render (not in `onMounted()`{lang="ts"}) so crawlers see it
- Test previews with the Facebook Sharing Debugger, LinkedIn Post Inspector, or the [Social Share Debugger](https://nuxtseo.com/tools/social-share-debugger)
::

Using Nuxt? [Nuxt SEO](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction) handles social sharing automatically with the OG Image module. [Learn more about Social Sharing in Nuxt →](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/open-graph)

## Sitemap

See the full [sitemap](https://nuxtseo.com/sitemap.md) for all pages.