Nuxt 应用程序为每个语言环境生成重复的 hreflang

Question

我正在构建一个具有多个语言环境的 Nuxt 应用程序。 Nuxt 似乎会自动在 head 中生成 hreflang 标签，但它会为每个语言环境生成重复的标签，例如：

<link data-n-head="ssr" data-hid="i18n-alt-fr" rel="alternate" href="https://example.com/fr-FR/" hreflang="fr">
<link data-n-head="ssr" data-hid="i18n-alt-fr-FR" rel="alternate" href="https://example.com/fr-FR/" hreflang="fr-FR">

有没有办法控制它？我发布了 nuxt.config.js 文件中的 i18n 部分以供参考：

i18n: {
  lazy: true,
  langDir: 'i18n/',
  locales: [
    {
      code: 'en',
      iso: 'en',
      file: 'en.json',
      name: 'English',
    },
    {
      code: 'de-DE',
      iso: 'de-DE',
      file: 'de.json',
      name: 'Deutsch',
    },
    {
      code: 'nl-NL',
      iso: 'nl-NL',
      file: 'nl.json',
      name: 'Nederlands',
    },
    {
      code: 'fr-FR',
      iso: 'fr-FR',
      file: 'fr.json',
      name: 'Français',
    },
  ],
  baseUrl: 'https://example.com',
  defaultLocale: 'en',
  vueI18n: {
    fallbackLocale: 'en',
  },
  seo: true,
  strategy: 'prefix_except_default',
},

Answer 1

我不知道这是否是一个好的解决方案，但您可以使用 :

 在 

layouts/default.vue

中删除它们

export default {
  head () {
    if (!this.$nuxtI18nHead) {
      return ''
    }

    // Issue : https://github.com/nuxt-modules/i18n/issues/1170
    const head = this.$nuxtI18nHead({ addSeoAttributes: true })
    head.link = head.link.filter(item => (item.hreflang && item.hreflang.includes('-')))
    return head
  },
}

希望对你有帮助:)