Nuxt SEO Meta Tags Guide
Nuxt renders pages on the server by default, so meta tags work out of the box. This guide covers SSR-compatible patterns using Nuxt's built-in Unhead integration.
<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
| 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 - Your main call-to-action in search results. Keep under 60 characters.
- Meta Descriptions - The snippet below your title. Google rewrites most of them, but write them anyway for the 30% that stick.
Social Sharing Tags
These control link previews when someone shares your URL.
- Open Graph - The standard for Facebook, LinkedIn, Discord, and most platforms. Set
og:title,og:description,og:image. - Twitter Cards - Twitter-specific tags. Falls back to Open Graph if not set, so often you don't need them.
- Slack Unfurls - Slack uses Open Graph. Same tags, different quirks.
Structured Data
- Schema.org - JSON-LD markup for rich results. Overkill for most sites, but useful for recipes, products, FAQs.
Quick Setup
Most sites need just this:
// app.vue or layouts/default.vue
useHead({
titleTemplate: '%s · My Site',
})
useSeoMeta({
ogSiteName: 'My Site',
twitterCard: 'summary_large_image'
})
Then per-page:
<script setup lang="ts">
useSeoMeta({
title: 'About Us',
description: 'We build things.',
ogImage: 'https://mysite.com/about-og.png'
})
</script>
That's it. Twitter falls back to OG tags. Slack uses OG tags. LinkedIn uses OG tags. Don't duplicate unless you need platform-specific content.
Priority Order
When tags conflict, here's what wins:
- Page-level
useSeoMeta()in your page component - Layout-level
useSeoMeta()in your layout - App-level setup in app.vue
Nuxt merges these automatically. Page tags override layout tags.
Common Mistakes
Forgetting absolute URLs for images
// ❌ Won't work - relative path
ogImage: '/og.png'
// ✅ Works - absolute URL
ogImage: 'https://mysite.com/og.png'
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 before deploying:
- Google Rich Results Test - Structured data validation
- Facebook Sharing Debugger - OG tags for most platforms
- X/Twitter - Compose a tweet (don't post) to preview cards