vuejs3 - Nuxt 3: Meta Tags Not Updating in "View Page Source" but Visible in DevTools - Stack Overflow

admin管理员组

文章数量:1410674

Description: I'm using Nuxt 3 with useHead() to set dynamic meta tags based on locale. The meta tags appear correctly in the Elements tab (DevTools) but are missing in "View Page Source".

This suggests that the meta tags are only being set on the client-side instead of during Server-Side Rendering (SSR).

What I Have Tried:

1. Ensured SSR is enabled in nuxt.config.ts:

export default defineNuxtConfig({
  ssr: true,
  target: 'server',
});

2. Used useHead() inside watchEffect() to update meta tags dynamically:

watchEffect(() => {
if (pending.value) return;
useHead({
title: t('metaHomeTitle'),
meta: [
name: 'description', content: t('metaHomeDescription') },
property: 'og:title', content: t('metaHomeOGTitle') },
property: 'og:description', content: t('metaHomeOGDescription') },
property: 'og:url', content: '/' },
    ],
  });
});

3. Checked if SSR is working properly by running:

`curl -A "Googlebot" -L http://localhost:3000/es`

• The output still shows an old or incorrect title.

4. Cleared Nuxt cache and rebuilt the project:

`rm -rf .nuxt && npm run dev`

Expected vs. Actual Behavior:

• Expected: The updated meta tags should appear in View Page Source and be accessible for SEO & crawlers.
• Actual: Meta tags only update dynamically in DevTools, but View Page Source still shows default values.

Questions:

1. Why is Nuxt not rendering the correct meta tags in SSR mode?
2. Is there a proper way to force Nuxt to generate static meta tags for SEO?
3. Could this issue be caused by useHead() being called inside watchEffect() instead of at the top level?

本文标签： vuejs3Nuxt 3 Meta Tags Not Updating in quotView Page Sourcequot but Visible in DevToolsStack Overflow