SeoMeta and I18N

[plucky herald]

Hi @violet isle. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

To address your issue with useSeoMeta and i18n integration in Nuxt, I can provide some guidance based on the available information. The problem you're experiencing where the values are empty when using useSeoMeta with i18n is likely related to reactivity and how the internationalized content is being provided to the SEO meta tags.

Here's a potential solution:

1. Use a computed property to generate your SEO meta data dynamically based on the current language:

<script setup lang="ts">
const { t, locale } = useI18n()

const computedSeoMeta = computed(() => ({
  title: t('pageTitle'),
  ogTitle: t('pageTitle'),
  description: t('pageDescription'),
  ogDescription: t('pageDescription'),
  // Add other meta tags as needed
}))

useSeoMeta(computedSeoMeta)
</script>

This approach ensures that your SEO meta tags are reactive and will update whenever the language changes.

2. Make sure to use the computed getter syntax for reactive values, as mentioned in the useSeoMeta documentation (https://nuxt.com/docs/api/composables/use-seo-meta):

useSeoMeta({
  title: () => t('pageTitle'),
  description: () => t('pageDescription'),
  // Other meta tags...
})

3. If you're using nuxt-i18n module, ensure that you've properly configured it to work with Nuxt 3 and that your translations are correctly set up.

4. For dynamic route-based meta tags, you can combine definePageMeta with useSeoMeta in your page components, as shown in the SEO and Meta documentation (https://nuxt.com/docs/getting-started/seo-meta#with-definepagemetaexamples).

5. If you're still facing issues, you might want to check if the i18n translations are loaded properly before setting the meta tags. You could use a watch effect to update the meta tags once the translations are available:

<script setup lang="ts">
const { t, locale } = useI18n()

watch(() => locale.value, () => {
  useSeoMeta({
    title: t('pageTitle'),
    description: t('pageDescription'),
    // Other meta tags...
  })
}, { immediate: true })
</script>

Remember that SEO meta tags should be set server-side for optimal performance and crawlability. Make sure your i18n setup is configured to work with SSR if you're using it.

If these suggestions don't solve your problem, you might want to create a minimal reproduction of the issue and seek further assistance from the Nuxt community through GitHub Discussions (https://nuxt.com/docs/community/getting-help).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@violet isle Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[violet isle]

The values are being retrieved correctly, but from what I can see, they are not being rendered on the server side.