---
title: "Nuxt SEO Meta Tags Guide"
description: "Set titles, descriptions, Open Graph, and Schema.org in Nuxt with useSeoMeta, plus the priority order when tags conflict."
canonical_url: "https://nuxtseo.com/learn-seo/nuxt/mastering-meta"
last_updated: "2026-10-05"
---

::key-takeaways
- Nuxt renders pages on the server by default, so `useSeoMeta()`{lang="ts"} and `useHead()`{lang="ts"} work by default, no manual head library setup needed
- Inspect conflicting tags after async data resolves and after client navigation
- Google can select page content or your meta description for a snippet; write a unique, accurate summary
::

Nuxt renders pages on the server by default. Use its built-in [Unhead](https://unhead.unjs.io/) integration to include meta tags in that response.

```html
<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()`{lang="ts"} or `useHead()`{lang="ts"}:

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

## What Meta Tags Control

| Meta Tag                                                                                        | Used By                             | Purpose                                              |
| ----------------------------------------------------------------------------------------------- | ----------------------------------- | ---------------------------------------------------- |
| [`<title>`{lang="html"}](/learn-seo/nuxt/mastering-meta/titles)                                 | Search engines, browsers            | Page title in search results and browser tab         |
| [`<meta name="description">`{lang="html"}](/learn-seo/nuxt/mastering-meta/descriptions)         | Search engines                      | A possible source for snippet text in search results |
| [`<meta property="og:*">`{lang="html"}](/learn-seo/nuxt/mastering-meta/open-graph)              | Social clients that read Open Graph | Link preview metadata                                |
| [`<meta name="twitter:*">`{lang="html"}](/learn-seo/nuxt/mastering-meta/twitter-cards)          | Twitter/X                           | Tweet cards (set explicit X metadata)                |
| [`<script type="application/ld+json">`{lang="html"}](/learn-seo/nuxt/mastering-meta/schema-org) | Search engines                      | Rich results (stars, products, recipes)              |

### Search Engine Tags

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

- [**Page Titles**](/learn-seo/nuxt/mastering-meta/titles): Your main call-to-action in search results. Keep titles concise and descriptive.
- [**Meta Descriptions**](/learn-seo/nuxt/mastering-meta/descriptions): The snippet below your title. Google can use them when they describe the page better than an extracted passage.
- [**Image Alt Text**](/learn-seo/nuxt/mastering-meta/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**](/learn-seo/nuxt/mastering-meta/open-graph): The Open Graph protocol describes preview metadata. Set `og:title`, `og:description`, `og:image`. Includes [Slack-specific behavior](/learn-seo/nuxt/mastering-meta/open-graph#slack-discord).
- [**Twitter Cards**](/learn-seo/nuxt/mastering-meta/twitter-cards): Set explicit X titles, descriptions, and image URLs.

### Structured Data

- [**Schema.org**](/learn-seo/nuxt/mastering-meta/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:

```ts
// 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](https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics), so client-rendered tags are not universally invisible to search engines. Check each provider's crawler policy before blocking it; see [controlling crawlers](/learn-seo/nuxt/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](/learn-seo/nuxt/mastering-meta/open-graph#open-graph-tags-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](/learn-seo/nuxt/mastering-meta/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.

```ts
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.

## Sitemap

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