Adding hreflang alternate links in head

[lucpotage]

I'm trying to automatically add the hreflang links in the head but it's not that easy.

I moved the locales array outside of the module.exports and added the following code in thenuxt.config.js file and it kinda works:

const locales = [
  { code: 'en', ... },
  { code: 'fr', ... }
]

module.exports = {
  ...
  head: {
    link: [
      ...
    ].concat((function () {
      let alternates = []
      locales.forEach((locale) => {
        alternates.push({
          hid: `alternate-${locale.code}`,
          rel: 'alternate',
          hreflang: locale.code,
          href: `https://example.com/${locale.code}`
        })
      })
      return alternates
    })())
  }
}

However, I didn't find a way to dynamically change the href value. The method switchLocalePath() is not accessible from the nuxt.config.js file and it seems we can't access to this.$route.name too.

Any idea on how to do that? What about nuxt-i18n injecting theses alternate links by default since Nuxt is sold as SEO-friendly out of the box. It would be a great addition to the module.

Finally an unrelated question. Why nuxt-i18n is not a scoped package like the sitemap module for instance @nuxtjs/sitemap?

_{This question is available on Nuxt.js community (#c4)}

[paulgv]

Hi @lucpotage
Just released v2.2.0 with alternate links generation, more here: https://github.com/nuxt-community/nuxt-i18n#seo
Hope you can give it a try to confirm it works as expected.
One thing I noted is that alternate tags disappear when you navigate in the app manually (they reappear if you refresh the page) but I guess it does not matter since Google bot accesses each page directly as far as I know.
Thanks for the suggestion!

[matsrietdijk]

@paulgv the hreflang tags should not be added to pages which are in ignorePaths as they do not have alternatives. Currently they render as invalid html (validated with https://validator.w3.org) and looks like:

<link data-n-head="true" data-hid="alternate-hreflang-nl-NL" rel="alternate" href="" hreflang="nl-NL"/>
<link data-n-head="true" data-hid="alternate-hreflang-en-US" rel="alternate" href="" hreflang="en-US"/>

Note the empty href attribute.

[paulgv]

Thanks @matsrietdijk ! It should be fixed in v2.3.0!

[ghost]

This question has been resolved by @paulgv, see answer.

[matsrietdijk]

@paulgv currently on v5.4.4 and again for ignored pages (by setting nuxtI18n: false on the component) these link tags are added. Now also causing vue-router warnings because <routename>___<code> does not exist.

[bangjelkoski]

@matsrietdijk I have the same issue. Have you solved that issue somehow?

[matsrietdijk]

@bangjelkoski currently I disabled SEO all together and rolled my own plugin to add the correct tags/attributes. So not ideal but it does the job.

[bangjelkoski]

@matsrietdijk I did the same. I am still not in production so I dont need SEO at the moment but I hope this issue will be resolved.

@paulgv can you please have a look?

[phortx]

@paulgv This is a serious issue not just because of the broken tags but also because it generates thousands of warnings which really causes high cpu usage and makes the app slow.

[mirash333]

Ok, I think I found a solution to the problem, in layouts, in default.vue we create a base head for our application and take the fields with this.$nuxtI18nSeo():

head() {
    return {
        link: this.$nuxtI18nSeo().link.filter(
            (item) => (item.rel = 'alternate' && item.hreflang)
            ),
        }
    },

This option will dynamically create links, so far I see the solution to this problem like this.Hope helped.

[furkanmutlu]

I was able to fix this issue like so:

in layouts, in default.vue add:

export default {
      head() {
          if (!this.$nuxtI18nHead) {
              return '';
          }
  
          return this.$nuxtI18nHead({ addSeoAttributes: true })
      }
  };

Then in nuxt-config.js configure the locales option as an array of objects, set all iso option.

i18n: {
locales: [
  {
     code: 'en',
     iso: 'en-US'
  },
  {
     code: 'es',
     iso: 'es-ES'
  },
  {
     code: 'fr',
    iso: 'fr-FR'
  }
]
}

Last set your baseUrl option

i18n: {
     locales: {...},
     baseUrl: process.env.BASE_URL || 'your production url'
}