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

- [Titles](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/titles)
- [Meta Description](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/descriptions)
- [Image Alt Text](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/alt-text)
- [Social Sharing](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/open-graph)
- [Rich Results](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/rich-results)
- [Schema.org](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/schema-org)
- [Twitter Cards](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/twitter-cards)

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

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

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

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

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

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

1. [Learn SEO for Nuxt](https://nuxtseo.com/learn-seo)
2.
3. [Mastering Meta](https://nuxtseo.com/learn-seo/nuxt/mastering-meta)
4.
5. [Open Graph](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/open-graph)

# Social Sharing Meta Tags in Nuxt

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 Dec 17, 2025

What you'll learn

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

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](#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/nuxt/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)

```
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](#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:

```
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](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/alt-text).

### [Article Metadata](#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](#twitterx-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](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/twitter-cards) for card types, required tags, and testing.

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

Both platforms read OG tags directly. No platform-specific tags needed. Discord supports animated GIFs and shows real-time previews.

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

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: `og:type`, `og:locale`, `article:*` tags, Twitter Card tags, and Schema.org markup.

**Caching**: Slack typically caches unfurls for 7 days. To force a refresh, append a query parameter (`?v=2`) to the URL or use the [Slack URL Debugger](https://api.slack.com/tools/debug/url).

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

**Authenticated pages**: Slack's crawler cannot log in. 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](#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 |
| Telegram | Effectively infinite | [@WebpageBot](https://t.me/WebpageBot) |

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.

## [Dynamic Meta Tags](#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](#automated-og-image-generation)

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

[OG Image v6.3.23.8M534 Generate OG Images with Vue templates in Nuxt.](https://nuxtseo.com/docs/og-image/getting-started/introduction)

```
<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](https://nuxtseo.com/docs/og-image/getting-started/introduction) for setup and advanced patterns.

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

## [All-in-One Solution](#all-in-one-solution)

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

[Nuxt SEO v5.1.02.7M1.4K The all-in-one module that brings it all together.](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)

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

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

---

[Image Alt Text How to write effective image alt text in Nuxt for accessibility, Google Images ranking, and AI model understanding.](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/alt-text) [Rich Results Get rich results in Google search with Schema.org structured data. Learn which types still work after Google's 2023 FAQ/HowTo removals.](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/rich-results)

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)
- [Automated OG Image Generation](#automated-og-image-generation)
- [Testing Tools](#testing-tools)
- [Troubleshooting](#troubleshooting)
- [All-in-One Solution](#all-in-one-solution)

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

- [Getting Started](https://nuxtseo.com/pro)
- [Dashboard](https://nuxtseo.com/pro/dashboard)
- [Pro MCP](https://nuxtseo.com/docs/nuxt-seo-pro/mcp/installation)

### [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 Research Pro](https://nuxtseo.com/tools/keyword-research)
- [SERP Analyzer Pro](https://nuxtseo.com/tools/serp-analyzer)
- [Domain Rankings Pro](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)