Nuxt and i18n: Google showing mixed language results

Question

I've made a site using Nuxt.

The site has 2 languages: Italian (default) and English for everyone else. I installed nuxt-i18n and configured it, and everything seems to work fine (especially when looking at the code with the devtools, html lang, rel=alternate and so on..).

But here's the problem: when i search for the site with google (in italian), the snippet for the site in the SERP is in english.

Here's my code:

    ['nuxt-i18n', {
      seo: false,
      baseUrl: 'https://www.leconturbanti.it',
      locales: [
        {
          name: 'Italiano',
          code: 'it',
          iso: 'it-IT',
          file: 'it-IT.js'
        },
        {
          name: 'English',
          code: 'en',
          iso: 'en-US',
          file: 'en-US.js'
        },
      ],
      pages: {
        'contatti/index': {
          it: '/contatti',
          en: '/contact-us'
        },
        'illustrazioni-collezione/index': {
          it: '/illustrazioni-collezione',
          en: '/illustrations-capsule'
        }
      },
      langDir: 'lang/',
      parsePages: false,
      defaultLocale: 'it',
      lazy: true
    }]

I set seo: false for better performance as explained in the docs, and merge the data in the default layout:

    head(){
      return{
        script:[
          {type: `text/javascript`, innerHTML: this.$t('policy.cookieId')},
          {src: `//cdn.iubenda.com/cs/iubenda_cs.js`, charset: `UTF-8`, type: `text/javascript`}
        ],
        __dangerouslyDisableSanitizers: ['script'],
        ...this.$nuxtI18nSeo()
      }
    },

I also set the meta tags for every page with $t in the head(). For example, in home:

    head(){
      return{
        title: this.$t('seo.home.title'),
        meta: [
          { hid: 'description', name: 'description', content: this.$t('seo.home.description')},
          { hid: 'og:title', property: 'og:title', content: this.$t('seo.home.title') },
          { hid: 'og:url', property: 'og:url', content: this.$t('seo.home.url') },
          { hid: 'twitter:title', property: 'twitter:title', content: this.$t('seo.home.title') },
          { hid: 'og:description', property: 'og:description', content: this.$t('seo.home.description') },
          { hid: 'twitter:description', property: 'twitter:description', content: this.$t('seo.home.description') },
        ]     
      }
    },

I can't understand what i did wrong. I already added the site in Search Console. If you need to visit it for inspection, the url is: www.leconturbanti.it

If you need more of my code in order to answer just ask. Thank you.

Any luck with this? Running into the same issue.. – Jake Aug 27 '20 at 21:11 — Jake, Aug 27 '20 at 21:11
Yes, i posted an answer. Give a look. – sintj Aug 28 '20 at 23:09 — sintj, Aug 28 '20 at 23:09

sintj · Accepted Answer · 2020-08-31T09:11:50.800

3

Found out that this issue is from nuxt-i18n itself. The problem is that the Google Crawler will fallback to the english version of a page, and this not good if you have another locale as default. More here.

For now, until the problem is solved, the workaround I used is to disable the auto detect language to avoid the redirect with detectBrowserLanguage: false.

edited Aug 31 '20 at 09:11

answered Aug 28 '20 at 23:08

sintj

804
2
11
23

You know, I kinda figured this was the issue but I didn't want to mess with SEO rankings trying to fix it. Thanks for confirming! – Jake Aug 31 '20 at 15:11

score 0 · Answer 2 · answered Oct 29 '22 at 15:40

My nuxt page head:

head(){
    return {
      ...this.$nuxtI18nHead({ addDirAttribute: true, addSeoAttributes: true }),
      title: this.page.title,
      meta: [
        {
          property: 'og:description',
          name: 'description',
          content: this.page.description
        },
        {
          property: 'og:title',
          name: 'title',
          content: this.page.title
        }
      ],
    }
  },

My nuxt.config.js

i18n: {
    locales ,
    strategy: 'prefix',//no_prefix , prefix , prefix_and_default ,prefix_except_default
    vueI18nLoader: true,
    defaultLocale: process.env.LOCALE_DEFAULT||'en',
    langDir: '~/locales/',
    vueI18n: {
      silentTranslationWarn: true
    },
    detectBrowserLanguage: false
  },

Nuxt and i18n: Google showing mixed language results

2 Answers2