Debug Nuxt SEO Issues

Fix meta tags not rendering, hydration mismatches, and indexing problems. Chrome DevTools workflow and GSC URL Inspection guide.

Harlan Wilton10 mins read Published Dec 17, 2025

If you can't see meta tags in View Source, neither can Google. Most Nuxt SEO bugs come from hydration mismatches, configuration mistakes, or disabling SSR where you shouldn't.

View Source vs Inspect Element

Two different ways to view HTML show different content:

View Source (Right-click → View Page Source) shows the initial HTML your server sends. This is what Google's crawler sees first.

Inspect Element (F12 → Elements tab) shows the live DOM after JavaScript executes. Meta tags added by JavaScript appear here but might not be indexed.

Test: Open your site, right-click, select "View Page Source." Search for <title> or <meta name="description". If you can't find your content in View Source, Google can't either.

<!-- ❌ BAD: Empty in View Source (SPA mode) -->
<!DOCTYPE html>
<html>
  <head>
    <title>Loading...</title>
  </head>
  <body>
    <div id="__nuxt"></div>
    <script src="/_nuxt/entry.js"></script>
  </body>
</html>

<!-- ✅ GOOD: Content in View Source (SSR mode, default) -->
<!DOCTYPE html>
<html>
  <head>
    <title>How to Debug Nuxt SEO | MySite</title>
    <meta name="description" content="Fix meta tags not rendering in Nuxt apps...">
  </head>
  <body>
    <div id="__nuxt">
      <h1>How to Debug Nuxt SEO</h1>
      <p>Fix meta tags not rendering...</p>
    </div>
    <script src="/_nuxt/entry.js"></script>
  </body>
</html>

Google renders JavaScript but it's a two-wave process: crawl the HTML first, then render JavaScript days later. If critical content only appears after JavaScript executes, indexing gets delayed by weeks.

Meta Tags Not Updating on Navigation

Single Page Applications change routes without full page reloads. Meta tags set during initial render might not update when users navigate.

Common mistake: Using document.title instead of Nuxt's composables.

<!-- ❌ Doesn't work on navigation -->
<script setup>
const route = useRoute()

watch(() => route.path, () => {
  document.title = route.meta.title // Won't update in head manager
})
</script>

Fix: Use useHead() or useSeoMeta(). Nuxt tracks navigation and updates meta tags correctly.

<!-- ✅ Updates on every navigation -->
<script setup>
const route = useRoute()

useHead({
  title: () => route.meta.title as string
})
</script>

Nuxt's Unhead integration synchronizes meta tags across SSR and client-side navigation. The Unhead documentation explains reactivity patterns.

Debugging Navigation Updates with Nuxt DevTools

Nuxt DevTools provides a dedicated view for monitoring meta tags:

Open app in browser
Click Nuxt DevTools icon (bottom right)
Select "Head" tab
Navigate between pages
Watch meta tags update in real-time

If meta tags don't change, you're not using reactive values correctly or have SSR disabled.

Hydration Mismatches Breaking Meta Tags

Hydration is when Vue takes server-rendered HTML and "activates" it with reactivity and event listeners. A hydration mismatch occurs when the HTML rendered on the client differs from the server-rendered HTML.

Nuxt displays warnings like "Hydration completed but contains mismatches" or "Text content does not match server-rendered HTML." These warnings appear in browser console and indicate server/client HTML differences (Vue SSR Guide).

Common Causes

Invalid HTML nesting triggers browser auto-correction, causing mismatches:

<!-- ❌ Invalid: div inside p -->
<template>
  <p /><div>Content</div> <!-- Browser auto-closes <p> before <div> -->
</template>

<!-- ✅ Valid HTML structure -->
<template>
  <div>
    <p>Content</p>
  </div>
</template>

Browser-only APIs don't exist during SSR:

<!-- ❌ Crashes during SSR -->
<script setup>
const userAgent = window.navigator.userAgent
</script>

<!-- ✅ Only access on client -->
<script setup>
const userAgent = ref('')

onMounted(() => {
  userAgent.value = window.navigator.userAgent
})
</script>

Random values and timestamps differ between server and client:

<!-- ❌ Different on server vs client -->
<script setup>
const randomId = Math.random()
const timestamp = new Date().toLocaleString()
</script>

<!-- ✅ Use ClientOnly or onMounted -->
<script setup>
const randomId = ref('')
const mounted = ref(false)

onMounted(() => {
  mounted.value = true
  randomId.value = Math.random().toString()
})
</script>

<template>
  <div v-if="mounted">
    ID: {{ randomId }}
  </div>
</template>

Third-party libraries without SSR support cause mismatches (How to Fix Vue Hydration Mismatch):

<!-- Wrap client-only libraries -->
<template>
  <ClientOnly>
    <GoogleMap />
  </ClientOnly>
</template>

Suppressing Mismatches in Vue 3.5+

For inevitable mismatches (like timestamps), use data-allow-mismatch:

<template>
  <time :data-allow-mismatch="true">
    {{ new Date().toLocaleString() }}
  </time>
</template>

This tells Vue to expect differences and skip warnings.

External Factors

HTML minification causes hydration mismatches. Most HTML minifiers must be disabled (Harlan Wilton - Nuxt 3 Hydration Mismatch).

Cloudflare users: Disable Cloudflare's automatic HTML minifier in dashboard → Speed → Optimization → Auto Minify.

Browser cache loads outdated JavaScript. Clear cache when debugging mismatches.

Nuxt Configuration Mistakes

Most Nuxt SEO bugs come from configuration errors or disabling features that shouldn't be disabled.

Disabling SSR Globally

Setting ssr: false in nuxt.config.ts breaks SEO for the entire site:

// ❌ Disables SSR globally (bad for SEO)
export default defineNuxtConfig({
  ssr: false
})

Fix: Remove global SSR disable or use route-level rules:

// ✅ Disable SSR only where needed
export default defineNuxtConfig({
  routeRules: {
    '/dashboard/**': { ssr: false }, // Client-only for authenticated routes
    '/blog/**': { prerender: true } // SSG for blog pages
  }
})

Reactive Values Not Updating

Passing .value instead of the ref breaks reactivity:

<script setup>
const pageTitle = ref('Loading...')

// ❌ Loses reactivity
useHead({
  title: pageTitle.value
})

// ✅ Stays reactive
useHead({
  title: pageTitle
})

// Later update works with reactive version
pageTitle.value = 'Loaded Content'
</script>

For computed values, use getter functions:

<script setup>
const post = ref({ title: 'Loading...' })

useHead({
  title: () => post.value.title // Updates when post changes
})
</script>

Duplicate Meta Tags

Multiple useHead() calls with same meta tags create duplicates:

<!-- ❌ Creates 2 description tags -->
<script setup>
useHead({
  meta: [{ name: 'description', content: 'First description' }]
})

useHead({
  meta: [{ name: 'description', content: 'Second description' }]
})
</script>

Unhead deduplicates by default but multiple calls can override unexpectedly. Consolidate meta tags into single useHead() or useSeoMeta() call per component.

Missing Data During SSR

Data fetched in onMounted() won't be available during SSR:

<!-- ❌ Client-only fetch -->
<script setup>
const post = ref({ title: 'Loading...' })

onMounted(async () => {
  post.value = await fetch('/api/post').then(r => r.json())
})

useHead({ title: () => post.value.title })
</script>

<!-- ✅ SSR-compatible fetch -->
<script setup>
const { data: post } = await useFetch('/api/post')

useHead({ title: () => post.value?.title || 'Loading...' })
</script>

Nuxt's useFetch() and useAsyncData() work during both SSR and client-side navigation.

Chrome DevTools SEO Workflow

DevTools helps debug meta tags, rendering issues, and JavaScript errors.

1. Check Initial HTML Response

Network panel shows server-sent HTML before JavaScript executes:

Open DevTools (F12)
Network tab → Clear (trash icon)
Reload page
Click first request (usually document)
Preview or Response tab shows initial HTML

Look for meta tags in this response. If missing, your SSR isn't working.

2. Search for Meta Tags

Elements panel lets you find all meta tags quickly:

Elements tab
Ctrl+F (Cmd+F on Mac) to search
Search for <meta name="description"
Examine content attributes

Compare what you find against your useHead() calls.

3. Console Errors

JavaScript errors break meta tag updates. Console shows Vue warnings and Unhead errors.

Look for:

"Hydration completed but contains mismatches"
Failed fetch requests preventing data load
Component errors during SSR
Route errors breaking navigation

Fix errors before debugging meta tags. Broken JavaScript breaks everything.

4. Lighthouse SEO Audit

Lighthouse tab includes basic SEO checks:

Lighthouse tab
Select "SEO" category
Click "Generate report"

Checks:

Document has <title> element
Document has meta description
Links have descriptive text
<html> has lang attribute

Lighthouse doesn't verify correctness—just presence. A title "undefined" passes but isn't useful.

Google Search Console URL Inspection

URL Inspection tool shows exactly what Google sees when crawling your page.

How to Use URL Inspection

Open Google Search Console
Enter URL in search bar at top
Click "Test Live URL" for current version
View results

Tool shows (Google URL Inspection documentation):

Whether page is indexed
How it was crawled
What resources were blocked
Structured data Google found
Rendered page screenshot

Index Status

"URL is on Google" means the URL is eligible to appear in search results (not guaranteed). "URL is not on Google" means the URL can't appear—check "Page indexing" section for why.

View Crawled Page

See how Google renders your page:

Click "View tested page"
Screenshot tab shows visual render
More info → HTML shows rendered HTML
More info → Console log shows JavaScript errors

Compare screenshot to your actual page. Missing content indicates rendering problems.

JavaScript Rendering Test

Google renders JavaScript but processes happen in two waves:

First wave: Crawl initial HTML
Second wave: Render JavaScript (days later)

If content only appears after JavaScript, it gets delayed. URL Inspection shows both:

"Live test" → Current rendered version
"Indexed version" → What's in Google's index

Request Indexing

After fixing issues:

URL Inspection → "Request Indexing"
Google queues URL for recrawl
Re-indexing takes 1-4 weeks

Google doesn't guarantee indexing—it still evaluates content quality.

Daily quota limits requests. For bulk operations, use Google Indexing API (up to 2,000 URLs/day).

Common Nuxt SEO Debugging Scenarios

Meta Tags Appear in DevTools But Not View Source

Cause: SSR disabled globally or for specific routes.

Test:

curl -s https://yoursite.com | grep "<title>"

If curl shows empty title, check nuxt.config.ts for ssr: false or route rules disabling SSR.

Fix: Re-enable SSR:

// nuxt.config.ts
export default defineNuxtConfig({
  // Remove ssr: false if present

  // Or use route-level control
  routeRules: {
    '/dashboard/**': { ssr: false }, // Only disable for client-only sections
  }
})

Meta Tags Don't Update on Navigation

Cause: Not using reactive values or using document.title directly.

Test: Navigate between pages, watch <title> in Nuxt DevTools Head tab.

Fix:

<script setup>
const route = useRoute()

useHead({
  title: () => route.meta.title as string
})
</script>

Google Shows Wrong Title/Description

Cause: Google rewrites 60-70% of meta descriptions and titles it deems low-quality.

Test: Search for site:yoursite.com in Google. Compare displayed titles to your actual meta tags.

Fix: Write better titles and descriptions:

Titles: 50-60 characters, unique per page, include target keyword
Descriptions: 150-160 characters, compelling copy, match search intent
Avoid duplicates across pages
Make them relevant to page content

Google still might rewrite—that's normal. If it rewrites everything, your meta tags are probably too generic or off-topic.

Hydration Mismatch on Meta Tags

Cause: Server and client render different meta tag values (timestamps, random IDs, browser APIs).

Test: Look for console warnings: "Hydration completed but contains mismatches."

Fix: Use ClientOnly wrapper or data-allow-mismatch:

<script setup>
const timestamp = ref('')

onMounted(() => {
  timestamp.value = new Date().toISOString()
})

useHead({
  meta: [
    { property: 'og:updated_time', content: timestamp }
  ]
})
</script>

Content Loads After SSR

Cause: Data fetched in onMounted() instead of during SSR.

Test: View Source shows "Loading..." instead of actual content.

Fix: Use useFetch() or useAsyncData():

<!-- ❌ Client-only fetch -->
<script setup>
const post = ref({ title: 'Loading...' })

onMounted(async () => {
  post.value = await fetch('/api/post').then(r => r.json())
})

useHead({ title: () => post.value.title })
</script>

<!-- ✅ SSR-compatible fetch -->
<script setup>
const { data: post } = await useFetch('/api/post')

useHead({ title: () => post.value?.title || 'Loading...' })
</script>

Testing Before Deployment

Don't wait for Google to tell you something's broken. Test locally:

1. View Source Test

Right-click → View Page Source. Search for critical meta tags. If they're missing, fix SSR before deploying.

2. Curl Test

# Check initial HTML
curl -s https://yoursite.com | grep -A 5 "<head>"

# Check specific meta tag
curl -s https://yoursite.com | grep 'name="description"'

Should show full meta tags in output.

3. Search Console Test Environment

Set up staging site in Search Console. Test URL Inspection on staging before pushing to production.

4. Lighthouse CI

Automate SEO checks in CI/CD:

npm install -g @lhci/cli

# Run Lighthouse
lhci autorun --collect.url=http://localhost:3000

Configure assertion for minimum SEO score.

5. Nuxt DevTools in Production

Enable DevTools in production for debugging (temporarily):

// nuxt.config.ts
export default defineNuxtConfig({
  devtools: {
    enabled: true // Normally auto-disabled in production
  }
})

Remember to disable after debugging—DevTools add overhead.

IndexNow

Notify search engines instantly when content changes using IndexNow, Google Indexing API, and RequestIndexing.

AI Search Optimization

Make your Nuxt site visible in AI Overviews, ChatGPT, and other generative search engines with structured data and content strategies.

On this page

View Source vs Inspect Element
Meta Tags Not Updating on Navigation
Hydration Mismatches Breaking Meta Tags
Nuxt Configuration Mistakes
Chrome DevTools SEO Workflow
Google Search Console URL Inspection
Common Nuxt SEO Debugging Scenarios
Testing Before Deployment