---
title: "Social Sharing Meta Tags in Nuxt"
description: "Set Open Graph and X card metadata in Nuxt, then inspect the initial HTML and test previews on your target platforms."
canonical_url: "https://nuxtseo.com/learn-seo/nuxt/mastering-meta/open-graph"
last_updated: "2026-10-05"
---

::key-takeaways
- Open Graph describes preview metadata; test how each target platform displays it
- Use public absolute image URLs; this example uses a 1200x600px image
- Nuxt OG Image generates images after you configure a template and renderer
::

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.

```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 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](/learn-seo/nuxt/mastering-meta/titles). 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()`{lang="ts"}](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

| Spec           | Value                                    |
| -------------- | ---------------------------------------- |
| Example size   | 1200x600px                               |
| Aspect ratio   | 2:1 in this example                      |
| File size      | Keep images small enough to load quickly |
| Example format | JPEG                                     |
| URL            | Absolute HTTPS                           |

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:

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

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](/learn-seo/nuxt/mastering-meta/twitter-cards) 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](https://docs.slack.dev/messaging/unfurling-links-in-messages/). 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](/learn-seo/nuxt/mastering-meta/descriptions#dynamic-meta-descriptions) 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.

::module-card{slug="og-image"}
::

Follow the [current installation guide](/docs/og-image/getting-started/installation) for a renderer and supported template names.

## Testing Tools

Preview how a link will render before you ship it:

1. **[Facebook Sharing Debugger](https://developers.facebook.com/tools/debug/)**: paste a URL to see the exact OG tags Facebook reads, and force a cache refresh. Test Slack separately.
2. **[LinkedIn Post Inspector](https://www.linkedin.com/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](/tools/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](http://Schema.org) modules. Generated images still need the OG Image setup.

::module-card{slug="nuxt-seo"}
::

Set per-page metadata with `useSeoMeta()`{lang="ts"}. Follow the [OG Image installation guide](/docs/og-image/getting-started/installation) for generated images.

## Checklist

::checklist{#nuxt-open-graph}
- Set `ogTitle`, `ogDescription`, `ogImage`, and `ogUrl` with `useSeoMeta()`{lang="ts"}
- Use a public absolute URL for `ogImage` and test its dimensions on the target platform
- Set `twitterCard` explicitly and test the card on X
- Test previews with the Facebook Sharing Debugger, LinkedIn Post Inspector, or the [Social Share Debugger](/tools/social-share-debugger)
- Consider Nuxt OG Image when you need generated image templates
::

## Sitemap

See the full [sitemap](/sitemap.md) for all pages.