Nuxt SEO Meta Tags Guide

Nuxt renders pages on the server by default. Use its built-in Unhead integration to include meta tags in that response.

<head>
  <title>My Page · My Site</title>
  <meta name="description" content="What this page is about">
  <meta property="og:image" content="https://mysite.com/og.png">
</head>

In Nuxt, you manage these with useSeoMeta() or useHead():

useSeoMeta({
  title: 'My Page',
  description: 'What this page is about',
  ogImage: 'https://mysite.com/og.png'
})

What Meta Tags Control

Search Engine Tags

These affect how your pages appear in Google, Bing, and other search results.

• Page Titles: Your main call-to-action in search results. Keep titles concise and descriptive.
• Meta Descriptions: The snippet below your title. Google can use them when they describe the page better than an extracted passage.
• Image Alt Text: Alt text describes informative images for accessibility and helps Google understand image content.

Social Sharing Tags

These control link previews when someone shares your URL.

• Open Graph: The Open Graph protocol describes preview metadata. Set og:title, og:description, og:image. Includes Slack-specific behavior.
• Twitter Cards: Set explicit X titles, descriptions, and image URLs.

Structured Data

• Schema.org: JSON-LD markup for rich results. Useful when your content matches a supported search feature, such as recipes or products.

Quick Setup

Most sites need this:

// app.vue or layouts/default.vue
useHead({
  titleTemplate: '%s · My Site',
})
useSeoMeta({
  ogSiteName: 'My Site',
  twitterCard: 'summary_large_image'
})

Then set per-page meta using the patterns described in each guide below. Set explicit platform metadata where needed, and test each target platform separately.

Meta Tags and AI Crawlers

Server-rendered metadata is available in the initial response, including to clients that do not execute JavaScript. Google can render JavaScript, so client-rendered tags are not universally invisible to search engines. Check each provider's crawler policy before blocking it; see controlling crawlers.

Priority Order

Avoid setting conflicting values across app, layout, and page components. Unhead deduplicates matching tags; registration order and tag priority can affect the result.

Inspect the rendered head after async data resolves and after client navigation. A fixed page-over-layout hierarchy is not a substitute for checking the actual output.

Common Mistakes

Forgetting absolute URLs for images. OG images require absolute URLs. See the Open Graph image requirements for details.

Setting the same description everywhere

Write descriptions that summarize each page. Generic templates can omit the details readers need.

Ignoring the preview

Test your meta tags with the tools listed in each guide below.

Start with Page Titles

For Module Authors

If you're building a Nuxt module, you can inject meta tags globally using the setGlobalHead utility from @nuxt/kit. Use it to add default meta tags, scripts, or styles your module requires.

import { defineNuxtModule, setGlobalHead } from '@nuxt/kit'

export default defineNuxtModule({
  setup(options, nuxt) {
    setGlobalHead({
      meta: [
        { name: 'theme-color', content: '#00dc82' }
      ],
      script: [
        { src: 'https://js.stripe.com/v3/', defer: true }
      ]
    })
  }
})

This adds global head configuration. Test conflicts against your supported Nuxt version rather than assuming module or user values always win.