--- 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-07-16" --- - Nuxt renders pages on the server by default, so `useSeoMeta()` and `useHead()` work by default, no manual head library setup needed - Page-level meta overrides layout-level meta, which overrides app-level meta; Nuxt merges all three automatically - Google rewrites most meta descriptions it doesn't like, but a unique, accurate one still improves click-through on the ones it keeps Nuxt renders pages on the server by default, so meta tags work by default. This guide covers SSR-compatible patterns using Nuxt's built-in [Unhead](https://unhead.unjs.io/) integration. ```html My Page · My Site ``` In Nuxt, you manage these with `useSeoMeta()` or `useHead()`: ```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 > Search engines, browsers Page title in search results and browser tab
< meta name = " description " > Search engines Snippet text in search results ( Google rewrites ~63% )
< meta property = " og:* " > Facebook, LinkedIn , Discord, Slack Link preview cards
< meta name = " twitter:* " > Twitter/X Tweet cards (falls back to OG tags)
< script type = " application/ld+json " > Search engines Rich results (stars, FAQs, 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 under 60 characters. - [**Meta Descriptions**](/learn-seo/nuxt/mastering-meta/descriptions): The snippet below your title. Google rewrites most of them, but write them anyway for the ones it keeps as-is. - [**Image Alt Text**](/learn-seo/nuxt/mastering-meta/alt-text): Alt text for accessibility, Google Images ranking, and AI understanding. The #1 accessibility failure on the web. ### Social Sharing Tags These control link previews when someone shares your URL. - [**Open Graph**](/learn-seo/nuxt/mastering-meta/open-graph): The standard for Facebook, LinkedIn, Discord, Slack, and most platforms. Set `og:title`, `og:description`, `og:image`. Includes [Slack-specific behavior](/learn-seo/nuxt/mastering-meta/open-graph#slack-behavior). - [**Twitter Cards**](/learn-seo/nuxt/mastering-meta/twitter-cards): Twitter-specific tags. Falls back to Open Graph if not set, so often you don't need them. ### Structured Data - [**Schema.org**](/learn-seo/nuxt/mastering-meta/schema-org): JSON-LD markup for rich results. Overkill for most sites, but useful for recipes, products, FAQs. ## 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. Twitter, Slack, and LinkedIn all fall back to OG tags, so don't duplicate unless you need platform-specific content. ## Meta Tags and AI Crawlers AI crawlers like GPTBot and ClaudeBot fetch your HTML but don't execute JavaScript, so meta tags rendered client-side are invisible to them the same way they're invisible to search engines. Server-rendered meta descriptions and Schema.org markup give these bots the same clean signal they give Google. Robots directives control which of them can access your content at all; see [controlling crawlers](/learn-seo/nuxt/controlling-crawlers) for the specific bot names. ## Priority Order When tags conflict, here's what wins: 1. **Page-level** `useSeoMeta()` in your page component 2. **Layout-level** `useSeoMeta()` in your layout 3. **App-level** setup in app.vue Nuxt merges these per-key, not per-call, so a page only needs to override the keys that change: ```ts // layouts/default.vue useSeoMeta({ title: 'My Site', ogSiteName: 'My Site' }) // pages/about.vue useSeoMeta({ title: 'About' // wins; ogSiteName still comes from the layout }) ``` The rendered `` is `About`, and `og:site_name` still comes through from the layout. You don't need to repeat `ogSiteName` on every page because you overrode `title`. ## 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#images) for details. **Setting the same description everywhere** Each page needs a unique description. Template descriptions like "Welcome to {page}" are lazy and hurt click-through rates. **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`. This is useful for adding default meta tags, scripts, or styles that 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 merges with the user's `app.head` configuration, with your module's values taking precedence if there are conflicts (though users can override them in their `nuxt.config.ts`).