Social Sharing Meta Tags in Vue · 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/vue/mastering-meta)

- [Titles](https://nuxtseo.com/learn-seo/vue/mastering-meta/titles)
- [Meta Description](https://nuxtseo.com/learn-seo/vue/mastering-meta/descriptions)
- [Social Sharing](https://nuxtseo.com/learn-seo/vue/mastering-meta/social-sharing)
- [Schema.org](https://nuxtseo.com/learn-seo/vue/mastering-meta/schema-org)
- [Migrating vue-meta](https://nuxtseo.com/learn-seo/vue/mastering-meta/migrating-vue-meta)
- [Rich Results](https://nuxtseo.com/learn-seo/vue/mastering-meta/rich-results)
- [Image Alt Text](https://nuxtseo.com/learn-seo/vue/mastering-meta/alt-text)

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

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

[ SPA SEO](https://nuxtseo.com/learn-seo/vue/spa)

- [Prerendering](https://nuxtseo.com/learn-seo/vue/spa/prerendering)
- [Dynamic Rendering](https://nuxtseo.com/learn-seo/vue/spa/dynamic-rendering)
- [Hydration & SEO](https://nuxtseo.com/learn-seo/vue/spa/hydration)

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

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

[ SSR Frameworks](https://nuxtseo.com/learn-seo/vue/ssr-frameworks)

- [Nuxt vs Quasar](https://nuxtseo.com/learn-seo/vue/ssr-frameworks/nuxt-vs-quasar)
- [Custom Vite SSR](https://nuxtseo.com/learn-seo/vue/ssr-frameworks/vite-ssr)
- [VitePress SEO](https://nuxtseo.com/learn-seo/vue/ssr-frameworks/vitepress)

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

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

1. [Learn SEO for Vue](https://nuxtseo.com/learn-seo)
2.
3. [Mastering Meta](https://nuxtseo.com/learn-seo/vue/mastering-meta)
4.
5. [Social Sharing](https://nuxtseo.com/learn-seo/vue/mastering-meta/social-sharing)

# Social Sharing Meta Tags in Vue

Configure Open Graph and Twitter Card meta tags for rich link previews on Facebook, X/Twitter, LinkedIn, Slack, and Discord.

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

What you'll learn

- OG tags control social previews on Facebook, [LinkedIn](https://linkedin.com), Slack, Discord
- Images must be absolute HTTPS URLs (not relative paths)
- Twitter/X requires `twitterCard`. there's no fallback from OG tags

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

**SSR required**: Social crawlers don't run JavaScript. Your meta tags must be in the initial HTML response, which means [server-side rendering](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/rendering) or prerendering.

```
<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',
  // Twitter/X (required - no OG fallback for card type)
  twitterCard: 'summary_large_image'
})
</script>
```

## [Quick Tips](#quick-tips)

1. **Images matter**: Posts with optimized OG images see [40-60% higher click-through rates](https://ahrefs.com/blog/open-graph-meta-tags/#why-open-graph-tags-matter). Images must be absolute URLs, minimum 1200x600px.
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). 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](#open-graph-tags)

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

### [Core Tags](#core-tags)

```
<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](#image-requirements)

| Spec | Value |
| --- | --- |
| Minimum size | 1200x600px (2:1 ratio) |
| Max file size | 5MB (1MB recommended) |
| Formats | JPG, PNG, WebP, GIF |
| URL | Absolute HTTPS |

As of 2026, all major social platforms (Facebook, X/Twitter, LinkedIn, Discord, Slack) render 2:1 share images without cropping. The old 1.91:1 (1200x630) recommendation from Facebook's early docs is outdated. Use 1200x600 for clean 2:1 images.

Include dimensions for faster rendering:

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

OG images must use absolute URLs with HTTPS. Relative paths like `/images/og.png` won't work. social crawlers don't know your domain. Always include the full URL: `https://mysite.com/images/og.png`

### [Article Metadata](#article-metadata)

For blog posts, add article-specific tags:

```
<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-01-29T00:00:00Z'
})
</script>
```

## [Twitter/X Cards](#twitterx-cards)

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

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

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

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

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

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

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

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

**player** and **app** cards require [approval from X](https://developer.x.com/en/docs/x-for-websites/cards/overview/player-card).

### [X Fallbacks](#x-fallbacks)

X [falls back to Open Graph](https://developer.x.com/en/docs/x-for-websites/cards/overview/markup) when `twitter:*` equivalents are missing:

| Twitter Tag | Fallback |
| --- | --- |
| `twitter:title` | `og:title` |
| `twitter:description` | `og:description` |
| `twitter:image` | `og:image` |

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

Minimal setup using fallbacks:

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

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

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

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

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

## [Slack & Discord](#slack-discord)

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

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

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

### [Slack-Specific Behavior](#slack-specific-behavior)

- Cache: 7 days globally
- To refresh: use [Slack URL Debugger](https://api.slack.com/tools/debug/url) or add `?v=2` to URL
- Ignores: `og:type`, `og:locale`, `article:*` tags, Schema.org
- No redirect following for images. use direct URLs

## [Platform Cache Times](#platform-cache-times)

| Platform | Cache Duration | Clear Cache |
| --- | --- | --- |
| Facebook | 14-30 days | [Sharing Debugger](https://developers.facebook.com/tools/debug/) |
| LinkedIn | 7 days | [Post Inspector](https://www.linkedin.com/post-inspector/) |
| X/Twitter | ~7 days | Add `?v=2` to URL |
| Slack | 7 days | [Slack URL Debugger](https://api.slack.com/tools/debug/url) |
| Discord | Real-time | No cache |

## [Dynamic Meta Tags](#dynamic-meta-tags)

Data must be available during server render. `onMounted` runs too late for crawlers.

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

```
<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 Tools](#testing-tools)

1. [Facebook Sharing Debugger](https://developers.facebook.com/tools/debug/): Also validates OG tags for Slack
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

## [Troubleshooting](#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)

## [OG Image Tools](#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

## [Using Nuxt?](#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)

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

---

[Meta Description Meta descriptions get rewritten by Google 70% of the time anyway. Here's how to implement them properly in Vue using composables and let your content do the heavy lifting.](https://nuxtseo.com/learn-seo/vue/mastering-meta/descriptions) [Schema.org Learn how to implement Schema.org structured data in Vue using Unhead. Get rich results in Google search with type-safe JSON-LD markup.](https://nuxtseo.com/learn-seo/vue/mastering-meta/schema-org)

On this page

- [Quick Tips](#quick-tips)
- [Open Graph Tags](#open-graph-tags)
- [Twitter/X Cards](#twitterx-cards)
- [Slack & Discord](#slack-discord)
- [Platform Cache Times](#platform-cache-times)
- [Dynamic Meta Tags](#dynamic-meta-tags)
- [Testing Tools](#testing-tools)
- [Troubleshooting](#troubleshooting)
- [OG Image Tools](#og-image-tools)
- [Using Nuxt?](#using-nuxt)

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