Getting Started

Create a connection

Sign in to OpenGraph+
Go to your website’s Meta Tags page
Create a new connection and copy your connection URL

Your connection URL looks like https://$OGPLUS_KEY.ogplus.net.

Find your layout

App-level: app.vue is the entry point for your Nuxt app.

Layouts: layouts/default.vue wraps pages that use the default layout.

Either location works for site-wide meta tags.

Add Open Graph meta tags

Use useSeoMeta in your layout to set default Open Graph tags site-wide. These control how your pages appear when shared on Twitter, Slack, LinkedIn, and other platforms.

<!-- app.vue or layouts/default.vue -->
<script setup>
const route = useRoute()

useSeoMeta({
  ogTitle: 'My Site',
  ogDescription: 'Welcome to my site',
  ogUrl: `https://mysite.com${route.path}`,
  ogSiteName: 'My Site',
  ogType: 'website',
  ogImage: `https://$OGPLUS_KEY.ogplus.net${route.path}`,
  twitterCard: 'summary_large_image',
})
</script>

Replace https://$OGPLUS_KEY.ogplus.net with your connection URL, and "My Site" with your actual site name.

What each tag does

Tag	Purpose
`og:title`	The title shown in the link preview
`og:description`	The description shown below the title
`og:url`	The canonical URL of the page
`og:site_name`	Your website’s name
`og:type`	Content type (`website`, `article`, `product`)
`og:image`	The social card image (powered by OpenGraph+)
`twitter:card`	Tells Twitter to show a large image card

Dynamic tags for pages

Call useSeoMeta in page components to override the layout defaults with data from your API.

Blog posts

<!-- pages/posts/[slug].vue -->
<script setup>
const { data: post } = await useFetch(`/api/posts/${useRoute().params.slug}`)

useSeoMeta({
  ogTitle: post.value.title,
  ogDescription: post.value.excerpt,
  ogType: 'article',
  ogImage: `https://$OGPLUS_KEY.ogplus.net/posts/${useRoute().params.slug}`,
  twitterCard: 'summary_large_image',
})
</script>

Products

<!-- pages/products/[id].vue -->
<script setup>
const { data: product } = await useFetch(`/api/products/${useRoute().params.id}`)

useSeoMeta({
  ogTitle: product.value.name,
  ogDescription: `$${product.value.price} — ${product.value.description}`,
  ogType: 'product',
  ogImage: `https://$OGPLUS_KEY.ogplus.net/products/${useRoute().params.id}`,
  twitterCard: 'summary_large_image',
})
</script>

Using useHead

useHead is an alternative that maps directly to HTML meta tag attributes:

<script setup>
const route = useRoute()

useHead({
  meta: [
    { property: 'og:title', content: 'My Site' },
    { property: 'og:description', content: 'Welcome to my site' },
    { property: 'og:url', content: `https://mysite.com${route.path}` },
    { property: 'og:site_name', content: 'My Site' },
    { property: 'og:type', content: 'website' },
    { property: 'og:image', content: `https://$OGPLUS_KEY.ogplus.net${route.path}` },
    { name: 'twitter:card', content: 'summary_large_image' },
  ]
})
</script>

Both approaches work identically. useSeoMeta is the more idiomatic Nuxt 3 option.

SSR note

Nuxt renders on the server by default, so your meta tags will be present in the initial HTML response. No extra configuration needed for social crawlers to pick them up.

Verify

Start your development server and view the page source. Check that all og: meta tags are present with the correct values.

Open the preview tool in your OpenGraph+ dashboard and paste a URL from your site to see the social card image.