NuxtSEO

Debug Vue SEO Issues

Fix meta tags not rendering, hydration mismatches, and indexing problems. Chrome DevTools workflow and GSC URL Inspection guide.
Harlan WiltonHarlan Wilton12 mins read Published
What you'll learn
  • View Source shows what Google sees first—Inspect Element shows post-JavaScript DOM
  • Hydration mismatches break meta tags and cause layout shifts
  • URL Inspection in Search Console shows exactly what Google renders

If you can't see meta tags in View Source, neither can Google. Most Vue SEO bugs come from client-side rendering, hydration mismatches, or Unhead configuration mistakes.

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 without SSR) -->
<!DOCTYPE html>
<html>
  <head>
    <title>Loading...</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/app.js"></script>
  </body>
</html>

<!-- ✅ GOOD: Content in View Source (SSR) -->
<!DOCTYPE html>
<html>
  <head>
    <title>How to Debug Vue SEO | MySite</title>
    <meta name="description" content="Fix meta tags not rendering in Vue apps...">
  </head>
  <body>
    <div id="app">
      <h1>How to Debug Vue SEO</h1>
      <p>Fix meta tags not rendering...</p>
    </div>
    <script src="/app.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 Unhead.

<!-- ❌ Doesn't work on navigation -->
<script setup>
import { watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

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

Fix: Use useHead() from Unhead. It tracks navigation and updates meta tags correctly.

<!-- ✅ Updates on every navigation -->
<script setup>
import { useHead } from '@unhead/vue'
import { useRoute } from 'vue-router'

const route = useRoute()

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

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

Debugging Navigation Updates

Open Chrome DevTools while navigating between pages. Watch the <head> section in Elements tab:

  1. Open DevTools (F12)
  2. Select Elements tab
  3. Find <head> element
  4. Navigate to different page
  5. Watch for meta tag updates

If meta tags don't change, you're not using useHead() or reactive values correctly.

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.

Vue 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>
</script>

<!-- ✅ Only access on client -->
<script setup>
import { onMounted, ref } from 'vue'

const userAgent = window.navigator.userAgent

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>
</script>

<!-- ✅ Use v-if + onMounted -->
<script setup>
import { onMounted, ref } from 'vue'

const randomId = Math.random()
const timestamp = new Date().toLocaleString()

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.

Unhead Configuration Mistakes

Most Unhead bugs come from setup errors or missing SSR support.

Missing createHead() Setup

Unhead requires initialization. Without it, useHead() silently fails.

// ❌ Missing Unhead setup
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.mount('#app')

Fix: Call createHead() and install plugin (Unhead Installation Guide):

import { createHead } from '@unhead/vue/client'
// ✅ Correct Unhead setup
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
const head = createHead()
app.use(head)
app.mount('#app')

For SSR apps, import from @unhead/vue/server instead.

Wrong Import Paths (Unhead v2)

Unhead v2 changed import paths. Old imports fail silently or throw errors.

// ❌ Old Unhead v1 imports
import { createHead } from '@unhead/vue'

// ✅ Unhead v2 subpath imports
import { createHead } from '@unhead/vue/client' // Client-side
import { createHead } from '@unhead/vue/server' // Server-side

Check Unhead v2 migration guide for breaking changes.

Not Using SSR

Client-only Unhead won't help SEO. Meta tags appear in DevTools but not View Source.

// ❌ Client-only setup (no SEO benefit)
import { createHead } from '@unhead/vue/client'

// ✅ SSR setup (meta tags in initial HTML)
import { createHead } from '@unhead/vue/server'

Without SSR, search engines see empty <div id="app"></div> containers (vue-meta GitHub issue #610).

Reactive Values Not Updating

Passing .value instead of the ref breaks reactivity:

<script setup>
import { useHead } from '@unhead/vue'
import { ref } from 'vue'

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>
import { useHead } from '@unhead/vue'
import { computed, ref } from 'vue'

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>
import { useHead } from '@unhead/vue'

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() call per component.

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:

  1. Open DevTools (F12)
  2. Network tab → Clear (trash icon)
  3. Reload page
  4. Click first request (usually document)
  5. 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:

  1. Elements tab
  2. Ctrl+F (Cmd+F on Mac) to search
  3. Search for <meta name="description"
  4. 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"
  • "Unhead is missing Vue context"
  • Failed fetch requests preventing data load
  • Component errors during SSR

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

4. Lighthouse SEO Audit

Lighthouse tab includes basic SEO checks:

  1. Lighthouse tab
  2. Select "SEO" category
  3. 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

  1. Open Google Search Console
  2. Enter URL in search bar at top
  3. Click "Test Live URL" for current version
  4. 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:

  1. Click "View tested page"
  2. Screenshot tab shows visual render
  3. More info → HTML shows rendered HTML
  4. 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:

  1. First wave: Crawl initial HTML
  2. 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:

  1. URL Inspection → "Request Indexing"
  2. Google queues URL for recrawl
  3. 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 Vue SEO Debugging Scenarios

Meta Tags Appear in DevTools But Not View Source

Cause: Client-side rendering without SSR.

Test:

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

If curl shows empty title, you're not using SSR.

Fix: Implement SSR using Vite SSR or a framework like Nuxt. See Vue rendering modes guide.

Meta Tags Don't Update on Navigation

Cause: Not using Unhead, or using document.title directly.

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

Fix:

<script setup>
import { useHead } from '@unhead/vue'
import { useRoute } from 'vue-router'

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>
import { onMounted, ref } from 'vue'

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: Fetch data before render:

<!-- ❌ Client-only fetch -->
<script setup>
import { onMounted, ref } from 'vue'
</script>

<!-- ✅ SSR-compatible 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 })

const post = ref(await fetch('/api/post').then(r => r.json()))

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

For client-only apps, consider prerendering critical pages.

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.

Using Nuxt?

Nuxt handles SSR and meta tag management automatically. Most debugging issues disappear with Nuxt's built-in SEO features. See Nuxt SEO debugging guide for framework-specific solutions.

IndexNow

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

AI Search Optimization

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