Nuxt•2mo ago

useSeoMeta with i18n

Hello, I use useSeoMeta with i18n I have two languages : fr and en. My meta works perfectly fine with https://domain.fr/fr and https://domain.fr/en, but fails with https://domain.fr. How to treat the case when the root domain doesn't have the prefix yet when shared ? Thanks 🙂

14 Replies

kapa.ai•2mo ago

Hi @Omnislash. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To address the issue of handling SEO meta tags for the root domain without a language prefix while using i18n, you can use a combination of useSeoMeta and the i18n configuration. Here's how you can approach this: 1. First, ensure that your i18n configuration in nuxt.config.ts is set up correctly to handle the root domain. You might want to use the defaultLocale option:

export default defineNuxtConfig({
  // other config options
  i18n: {
    defaultLocale: 'en', // or 'fr', depending on your preference
    locales: ['en', 'fr'],
    // other i18n options
  }
})

export default defineNuxtConfig({
  // other config options
  i18n: {
    defaultLocale: 'en', // or 'fr', depending on your preference
    locales: ['en', 'fr'],
    // other i18n options
  }
})

2. In your app.vue or the component where you're setting the SEO meta tags, you can use useSeoMeta in combination with the useI18n composable to dynamically set the meta tags based on the current locale:

<script setup>
const { locale } = useI18n()

useSeoMeta({
  title: () => {
    if (locale.value === 'en') return 'English Title'
    if (locale.value === 'fr') return 'Titre Français'
    return 'Default Title' // Fallback for root domain
  },
  description: () => {
    if (locale.value === 'en') return 'English description'
    if (locale.value === 'fr') return 'Description en français'
    return 'Default description' // Fallback for root domain
  },
  // Add other meta tags as needed
})
</script>

<script setup>
const { locale } = useI18n()

useSeoMeta({
  title: () => {
    if (locale.value === 'en') return 'English Title'
    if (locale.value === 'fr') return 'Titre Français'
    return 'Default Title' // Fallback for root domain
  },
  description: () => {
    if (locale.value === 'en') return 'English description'
    if (locale.value === 'fr') return 'Description en français'
    return 'Default description' // Fallback for root domain
  },
  // Add other meta tags as needed
})
</script>

This approach ensures that even when the root domain is accessed without a language prefix, appropriate meta tags are still set based on the default locale. For more detailed information on using useSeoMeta, you can refer to the Nuxt documentation on useSeoMeta. Remember to test your implementation thoroughly to ensure it works as expected for all cases: the root domain, /fr, and /en routes. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

OmnislashOP•2mo ago

@kapa.ai if it's access without prefix, what will be the value of locale.value ?

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- When accessing the site without a language prefix, the value of locale.value will typically be the defaultLocale specified in your i18n configuration. According to the Nuxt i18n documentation, if you haven't set a specific locale and are accessing the root domain without a prefix, the defaultLocale will be used. For example, if your i18n configuration in nuxt.config.ts looks like this:

export default defineNuxtConfig({
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'fr'],
    // other i18n options
  }
})

export default defineNuxtConfig({
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'fr'],
    // other i18n options
  }
})

Then, when accessing <https://domain.fr> (without a language prefix), locale.value would be 'en'. However, it's important to note that the actual behavior can be influenced by other i18n settings, such as detectBrowserLanguage or custom routing configurations. If you have these additional settings, they might affect the locale.value when accessing the site without a prefix. To be absolutely certain about the behavior in your specific setup, you could add a console log or use the Vue devtools to check the value of locale.value when accessing your site without a language prefix. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

OmnislashOP•2mo ago

So I don't see how the code Kapa gave me would work, since value will always be fr or en If someone has an idea I'm listening ^^"

harlan•2mo ago

can you share some code

OmnislashOP•2mo ago

sure 🙂

const { locale, t } = useI18n()

useSeoMeta({
    title: 'Launchbase',
    ogTitle: 'Launchbase',
    description: t('metaDescription'),
    ogDescription: t('metaDescription'),
    ogImage: `/images/edito/header-${locale.value}.jpg`
})

const { locale, t } = useI18n()

useSeoMeta({
    title: 'Launchbase',
    ogTitle: 'Launchbase',
    description: t('metaDescription'),
    ogDescription: t('metaDescription'),
    ogImage: `/images/edito/header-${locale.value}.jpg`
})

OmnislashOP•2mo ago

perfect here : https://launchbase.fr/en

Launchbase

Your entrepreneurial success starts here

OmnislashOP•2mo ago

not working here : https://launchbase.fr

Launchbase

metaDescription

OmnislashOP•2mo ago

My bad, I thought defaultLocale was to force a default language without considering the user browser... but it was not ^^" Solved 🙂

harlan•2mo ago

Cool, not too sure why the second link didn't unfurl correctly you're always server side redirecting it to /fr ?

OmnislashOP•2mo ago

I thought it was done by fallbackLocale: 'fr' in the i18n config, but most likely not ^^" It seems it's done with defaultLocale: 'fr', now that I added it, it works nicely : https://launchbase.fr

Launchbase

Votre succès entrepreneurial commence ici

harlan•2mo ago

yup looks good 👍

Gaming

Programming

useSeoMeta with i18n

Did you find this page helpful?