Guides › Frameworks & CMS

How to add Open Graph tags in Nuxt

Use the built-in useSeoMeta composable in a page or layout:

<script setup>
useSeoMeta({
  title: 'My page',
  ogTitle: 'My page',
  description: 'What this page is about.',
  ogDescription: 'What this page is about.',
  ogImage: 'https://example.com/og/my-page.png',
  twitterCard: 'summary_large_image',
})
</script>

Use absolute image URLs. For generated images, the community module nuxt-og-image renders them from Vue components. Make sure pages are server-rendered or prerendered (not ssr: false), or crawlers won't see the tags.

Verify

Deploy, then run the live URL through the OG previewer. It fetches the page like a social crawler (no JavaScript), so tags added only on the client side won't show up. That matches what Facebook, LinkedIn and X see.

Related