--- title: "How to Debug Nuxt SEO Issues" description: "Fix meta tags that won't render, hydration mismatches, and stalled indexing in Nuxt using View Source, DevTools, and Search Console." canonical_url: "https://nuxtseo.com/learn-seo/nuxt/launch-and-listen/debugging" last_updated: "2026-07-16" --- - Use View Source (not DevTools) to see what Google sees. If meta tags are missing there, SSR isn't working - `useFetch()` and `useAsyncData()` work during SSR; `onMounted()` fetches are client-only - URL Inspection in Search Console shows exactly how Google renders your page including JavaScript 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 `` or `<meta name="description"`. If you can't find your content in View Source, Google can't either. ```html  <!DOCTYPE html> <html> <head> <title>Loading...

How to Debug Nuxt SEO | MySite

How to Debug Nuxt SEO

Fix meta tags not rendering...

``` Google [processes pages in three phases](https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics): crawling, rendering, and indexing. A page that needs JavaScript to show its content has to wait for the rendering phase before Google can index it, and Google publishes no fixed timeline for that wait. If critical content only appears after JavaScript executes, indexing gets delayed. ## 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. ```vue ``` Fix: Use `useHead()` or `useSeoMeta()`. Nuxt tracks navigation and updates meta tags correctly. ```vue ``` Nuxt's Unhead integration synchronizes meta tags across SSR and client-side navigation. The [Unhead documentation](https://unhead.unjs.io/docs/head/api/composables/use-head) explains reactivity patterns. Nuxt DevTools provides a dedicated view for monitoring meta tags during navigation: 1. Open app in browser 2. Click Nuxt DevTools icon (bottom right) 3. Select "Head" tab 4. Navigate between pages 5. 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](https://vuejs.org/guide/scaling-up/ssr.html)). ### Common Causes **Invalid HTML nesting** triggers browser auto-correction, causing mismatches: ```vue ``` **Browser-only APIs** don't exist during SSR: ```vue ``` **Random values and timestamps** differ between server and client: ```vue ``` ```vue ``` **Third-party libraries** without SSR support cause mismatches ([How to Fix Vue Hydration Mismatch](https://dev.to/jacobandrewsky/how-to-fix-vue-hydration-mismatch-47eg)): ```vue ``` ### Suppressing Mismatches in Vue 3.5+ For inevitable mismatches (like timestamps), use `data-allow-mismatch`: ```vue ``` This tells Vue to expect differences and skip warnings. Two external factors also cause mismatches. **HTML minification** rewrites whitespace between server and client renders. Disable most HTML minifiers ([Harlan Wilton - Nuxt 3 Hydration Mismatch](https://harlanzw.com/blog/nuxt3-hydration-node-mismatch)). [Cloudflare](https://cloudflare.com) 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 essential features. ### Disabling SSR Globally Setting `ssr: false` in `nuxt.config.ts` breaks SEO for the entire site: ```ts // ❌ Disables SSR globally (bad for SEO) export default defineNuxtConfig({ ssr: false }) ``` Fix: Remove global SSR disable or use route-level rules: ```ts // ✅ 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: ```vue ``` For computed values, use getter functions: ```vue ``` ### Duplicate Meta Tags Multiple `useHead()` calls with same meta tags create duplicates: ```vue ``` 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: ```vue ``` 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: 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. To find all meta tags at once, switch to the Elements panel, press Ctrl+F (Cmd+F on Mac), and search for `` element - Document has meta description - Links have descriptive text - `` has `lang` attribute Lighthouse checks presence, not correctness: a title of "undefined" passes the audit but isn't useful to anyone. ## 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](https://search.google.com/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](https://support.google.com/webmasters/answer/9012289)): - Whether page is indexed - How it was crawled - What resources were blocked - [Structured data](/learn-seo/nuxt/mastering-meta/schema-org) Google found - Rendered page screenshot "Whether page is indexed" resolves to one of two states: "URL is on Google" means the URL is eligible to appear in search results (not guaranteed), while "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 [processes pages in three phases](https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics): crawling, rendering, then indexing. Content that only shows up once JavaScript has rendered waits for that second phase before it can be indexed. 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 the URL for recrawl [Google doesn't guarantee indexing](https://support.google.com/webmasters/answer/7440203) or a specific timeline. It still evaluates content quality first. The UI has a daily quota per property. The [Indexing API](https://developers.google.com/search/apis/indexing-api/v3/quickstart) is faster for bulk operations, but it only covers pages marked up with `JobPosting` or `BroadcastEvent` (livestream) structured data, not general pages, and defaults to a 200-request daily quota. ## Common Nuxt SEO Debugging Scenarios ### Meta Tags Appear in DevTools But Not View Source **Cause:** SSR disabled globally or for specific routes. **Test:** ```bash curl -s https://yoursite.com | grep "" ``` If curl shows empty title, check `nuxt.config.ts` for `ssr: false` or route rules disabling SSR. **Fix:** Re-enable SSR: ```ts // 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:** ```vue <script setup lang="ts"> const route = useRoute() useHead({ title: () => route.meta.title as string }) </script> ``` ### Google Shows Wrong Title/Description **Cause:** Google [keeps your `<title>` as-is around 87% of the time](https://developers.google.com/search/blog/2021/09/more-info-about-titles); the rest get rewritten, usually because the tag is missing, duplicated, or doesn't match the page content. There's no equivalent published figure for descriptions, but vague or boilerplate ones get replaced more often. **Test:** Search for `site:yoursite.com` in Google. Compare displayed titles to your actual meta tags. **Fix:** Write better [titles](/learn-seo/nuxt/mastering-meta/titles) and [descriptions](/learn-seo/nuxt/mastering-meta/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`: ```vue <script setup lang="ts"> 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()`: ```vue  <script setup lang="ts"> const post = ref({ title: 'Loading...' }) onMounted(() => { (async () => { post.value = await fetch('/api/post').then(r => r.json()) })() }) useHead({ title: () => post.value.title }) </script>  <script setup lang="ts"> 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: right-click → View Page Source and search for critical meta tags, fixing SSR first if they're missing. ### 1. Curl Test ```bash # 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. For staging environments, set up a staging site in Search Console and test URL Inspection there before pushing to production. ### 2. Lighthouse CI Automate SEO checks in CI/CD: ```bash npm install -g @lhci/cli # Run Lighthouse lhci autorun --collect.url=http://localhost:3000 ``` Configure assertion for minimum SEO score. ### 3. Nuxt DevTools in Production Enable DevTools in production for debugging (temporarily): ```ts // nuxt.config.ts export default defineNuxtConfig({ devtools: { enabled: true // Normally auto-disabled in production } }) ``` Remember to disable after debugging. DevTools add overhead. <tip title="Debugging AI Crawlers"> AI bots like `GPTBot` don't execute JavaScript, so they only ever see your initial HTML response, the same thing View Source shows you. Spoof the user agent in Chrome DevTools (`Mozilla/5.0 (compatible; GPTBot/1.0; +https://openai.com/gptbot)`) to confirm your content loads without JS and isn't blocked by robots.txt. </tip> ## Checklist <checklist id="nuxt-debugging"> - View Source shows your meta tags and page content, not just the DevTools Elements panel - No unintended `ssr: false` on public routes in `nuxt.config.ts` or `routeRules` - Titles and descriptions use `useHead()` or `useSeoMeta()`, never `document.title` - Fetch data for meta tags with `useFetch()` or `useAsyncData()`, not `onMounted()` - No "Hydration completed but contains mismatches" warnings in the console - URL Inspection in Search Console matches what your server sends </checklist>