--- title: "Nuxt SEO Meta Tags Guide" description: "Set up meta tags in Nuxt with useSeoMeta. Covers titles, descriptions, Open Graph, Twitter Cards, and Schema.org. with SSR patterns that actually get indexed." canonical_url: "https://nuxtseo.com/learn-seo/nuxt/mastering-meta" last_updated: "2026-01-29" --- 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 ~70%)
< 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 30% that stick. - [**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. ## Future-Proofing for AI In 2026, meta tags aren't just for search engines - they're for AI models too. "Generative Engine Optimization" (GEO) relies on clear signals: - **Descriptions:** LLMs often use your meta description as a concise summary of your page. - **Structured Data:** Helps AI "translate" your content into structured facts for citations. - **Robots Tags:** Control which AI bots (like `GPTBot` or `Applebot`) can ingest your content. Using `useSeoMeta` ensures these signals are clean and machine-readable. ## 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 automatically. Page tags override layout tags. ## 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`).