SEO

介绍

@nuxtjs/i18n 提供了 $nuxtI18nHead 函数，您可以使用它生成 SEO 元数据，以优化应用与地区相关的方面以便搜索引擎收录。

以下是它所启用的具体优化和功能：

  • <html> 标签的 lang 属性
  • hreflang 替代链接生成
  • OpenGraph 语言标签生成
  • 规范链接生成

在下面阅读更多关于这些功能的信息

要求

要利用 SEO 的好处，您必须将 locales 选项配置为一个对象数组，其中每个对象的 iso 选项设置为地区语言标签：

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

您还必须将 baseUrl 选项设置为您的生产域名，以使替代 URL 变为完整的合格 URL：

nuxt.config.ts
i18n: {
  baseUrl: 'https://my-nuxt-app.com'
}

（请注意，baseUrl 也可以设置为一个函数。请查看 baseUrl 文档）

设置

$nuxtI18nHead 函数返回由集成在 Nuxt 中的 Vue Meta 插件处理的元数据。这些元数据可以在 Nuxt 的多个位置进行指定：

  • Nuxt 配置文件中的 head() 选项 (nuxt.config.ts)
  • 您的 页面 组件或布局文件中的 head() 组件选项

要启用 SEO 元数据，请在上述指定的任一位置声明一个 head 函数，并使其返回 $nuxtI18nHead 函数调用的结果。

为了避免代码重复，建议在您的 nuxt.config.ts 文件中全局设置该选项，并在必要时按布局或按页面组件覆盖某些值。

nuxt.config.ts
export default {
  // ...其他 Nuxt 选项...
  head() {
    return this.$nuxtI18nHead({ addSeoAttributes: true })
  }
}

查看您可以传递给 $nuxtI18nHead 的选项，请参阅 API 文档。

就这些！

如果您还想添加自己的元数据，则必须将您的数据与 $nuxtI18nHead 返回的对象合并。可以使用下面的示例或使用类似 deepmerge 的库对两个对象进行深度合并。

nuxt.config.ts
export default {
  // ...其他 Nuxt 选项...
  head() {
    const i18nHead = this.$nuxtI18nHead({ addSeoAttributes: true })
    return {
      htmlAttrs: {
        myAttribute: '我的值',
        ...i18nHead.htmlAttrs
      },
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: '我的自定义描述'
        },
        ...i18nHead.meta
      ],
      link: [
        {
          hid: 'apple-touch-icon',
          rel: 'apple-touch-icon',
          sizes: '180x180',
          href: '/apple-touch-icon.png'
        },
        ...i18nHead.link
      ]
    }
  }
}

功能详情

  • <html> 标签的 lang 属性
    在 <html> 标签中设置正确的 lang 属性，相当于当前地区的 iso 值。
  • hreflang 替代链接
    为每个配置的地区生成 <link rel="alternate" hreflang="x"> 标签。地区的 iso 值用作 hreflang 值。
    从版本 v6.6.0 开始，还为每个区域组（例如 en-*）提供了一个“通用”地区 hreflang 链接。默认情况下，它是提供的第一个地区，但可以通过在您的 @nuxtjs/i18n 配置的特定地区对象上将 isCatchallLocale 设置为 true 来选择另一个地区。关于 hreflang 的更多信息
    没有选择“通用”地区的示例：
    nuxt.config.ts
    i18n: {
  locales: [
    {
      code: 'en',
      iso: 'en-US' // 默认将用作“通用”地区
    },
    {
      code: 'gb',
      iso: 'en-GB'
    }
  ]
}

    这是如何使用 isCatchallLocale 选择另一个地区的：
    nuxt.config.ts
    i18n: {
  locales: [
    {
      code: 'en',
      iso: 'en-US'
    },
    {
      code: 'gb',
      iso: 'en-GB',
      isCatchallLocale: true // 这个将用作通用地区
    }
  ]
}

    如果您已经设置了 en 地区的 iso，则它将用作“通用”地区，而无需做其他操作。
    nuxt.config.ts
    i18n: {
  locales: [
    {
      code: 'gb',
      iso: 'en-GB'
    },
    {
      code: 'en',
      iso: 'en' // 将用作“通用”地区
    }
  ]
}
  • OpenGraph 语言标签生成
    按照 Open Graph 协议 生成 og:locale 和 og:locale:alternate meta 标签。
  • 规范链接
    在所有页面上生成 rel="canonical" 链接，以指定应该由搜索引擎索引的页面的“主”版本。这在多种情况下是有益的：
    • 当使用 prefix_and_default 策略时，实际上为默认地区生成了两组页面——一组是带前缀的，一组是未带前缀的。规范链接将设置为未带前缀版本的页面，以避免重复索引。
    • 当页面包含查询参数时，规范链接默认不包括查询参数。这通常是正确的做法，因为各种查询参数可能会被跟踪器插入，并且不应该成为规范链接的一部分。可以使用 canonicalQueries 选项重写这一点。例如：
      export default {
  head() {
    return this.$nuxtI18nHead({
      addSeoAttributes: {
        canonicalQueries: ['foo']
      }
    })
  }

    关于规范的更多信息

浏览器语言检测

懒加载翻译