发布于 由admin

在 Nuxt.js 中，如何实现国际化 (i18n) 和 SEO 优化 (如 meta 标签动态生成、Sitemap)？

欢迎大家来到今天的“Nuxt.js 国际化和 SEO 优化”讲座！我是你们的导游，今天咱们一起探索一下如何让你的 Nuxt.js 应用不仅能说多国语言，还能在搜索引擎里闪闪发光。

第一部分：国际化 (i18n) – 让你的网站“出口成章”

想象一下，你的网站就像一个外交官，需要用不同的语言和不同的文化背景的用户交流。国际化就是让你的网站具备这种能力。在 Nuxt.js 中，我们通常会借助 nuxt-i18n 这个模块来实现。

1. 安装 nuxt-i18n

首先，我们需要安装这个好帮手：

npm install @nuxtjs/i18n
# 或
yarn add @nuxtjs/i18n

2. 配置 nuxt.config.js

接下来，在你的 nuxt.config.js 文件中配置 nuxt-i18n 模块。这是核心步骤，相当于告诉 Nuxt.js：“嘿，我们要开始说外语啦！”

export default {
  modules: [
    '@nuxtjs/i18n',
  ],

  i18n: {
    locales: [
      {
        code: 'en',
        iso: 'en-US',
        name: 'English',
      },
      {
        code: 'zh',
        iso: 'zh-CN',
        name: '中文',
      },
    ],
    defaultLocale: 'en',
    strategy: 'prefix_except_default', // 'prefix', 'prefix_except_default', 'prefix_and_default', 'no_prefix'
    detectBrowserLanguage: {
      useCookie: true,
      cookieKey: 'i18n_redirected',
      redirectOn: 'root',  // recommended
    },
    vueI18n: {
      fallbackLocale: 'en',
      messages: {
        en: {
          welcome: 'Welcome to our website!',
          about: 'About Us',
        },
        zh: {
          welcome: '欢迎来到我们的网站！',
          about: '关于我们',
        },
      },
    },
  },
}

让我们逐行解释一下这些配置项：

  • locales: 定义你的网站支持的语言。code 是语言代码（例如 en 表示英语），iso 是 ISO 语言代码（例如 en-US），name 是语言的名称。
  • defaultLocale: 默认语言，如果用户没有指定语言，就使用这个语言。
  • strategy: 这个选项决定了 URL 中如何显示语言代码。
    • prefix: 所有 URL 都带语言代码（例如 /en/about, /zh/about）。
    • prefix_except_default: 除了默认语言，其他语言的 URL 都带语言代码（例如 /about, /zh/about）。这是推荐的选项。
    • prefix_and_default: 所有 URL 都带语言代码，包括默认语言（例如 /en/about, /zh/about）。
    • no_prefix: URL 中不带语言代码，通过其他方式（例如 Cookie 或浏览器设置）来判断语言。
  • detectBrowserLanguage: 是否自动检测浏览器语言。useCookie 表示是否使用 Cookie 来保存用户选择的语言，cookieKey 是 Cookie 的名称，redirectOn 表示在哪个页面进行重定向。
  • vueI18n: 这是 Vue I18n 的配置项，fallbackLocale 是备用语言，messages 是语言文件。

3. 创建语言文件

在 nuxt.config.js 中，我们直接把语言文件放在了 vueI18n.messages 里面。但是，当你的网站变得庞大时，把所有语言都放在一个文件里会变得难以维护。所以，更好的做法是把语言文件放在单独的文件中。

你可以创建一个 locales 目录，并在其中创建 en.json 和 zh.json 文件：

locales/
  en.json
  zh.json

en.json:

{
  "welcome": "Welcome to our website!",
  "about": "About Us",
  "products": "Products",
  "contact": "Contact Us"
}

zh.json:

{
  "welcome": "欢迎来到我们的网站！",
  "about": "关于我们",
  "products": "产品",
  "contact": "联系我们"
}

然后，修改 nuxt.config.js：

import en from './locales/en.json'
import zh from './locales/zh.json'

export default {
  modules: [
    '@nuxtjs/i18n',
  ],

  i18n: {
    locales: [
      {
        code: 'en',
        iso: 'en-US',
        name: 'English',
      },
      {
        code: 'zh',
        iso: 'zh-CN',
        name: '中文',
      },
    ],
    defaultLocale: 'en',
    strategy: 'prefix_except_default',
    detectBrowserLanguage: {
      useCookie: true,
      cookieKey: 'i18n_redirected',
      redirectOn: 'root',
    },
    vueI18n: {
      fallbackLocale: 'en',
      messages: {
        en,
        zh,
      },
    },
  },
}

4. 在组件中使用 i18n

现在，你可以在你的 Vue 组件中使用 $t 函数来翻译文本：

<template>
  <div>
    <h1>{{ $t('welcome') }}</h1>
    <p>{{ $t('about') }}</p>
  </div>
</template>

或者，你也可以使用 i18n 对象：

<template>
  <div>
    <h1>{{ i18n.t('welcome') }}</h1>
    <p>{{ i18n.t('about') }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    i18n() {
      return this.$nuxtI18n
    },
  },
}
</script>

5. 切换语言

nuxt-i18n 提供了很多方便的方法来切换语言。最常用的方法是使用 <nuxt-link> 组件：

<template>
  <div>
    <nuxt-link :to="switchLocalePath('en')">English</nuxt-link>
    <nuxt-link :to="switchLocalePath('zh')">中文</nuxt-link>
  </div>
</template>

switchLocalePath 函数会根据当前的语言和目标语言生成正确的 URL。

你也可以使用 setLocale 函数来手动切换语言：

<template>
  <button @click="setLocale('en')">English</button>
  <button @click="setLocale('zh')">中文</button>
</template>

<script>
export default {
  methods: {
    setLocale(locale) {
      this.$i18n.setLocale(locale)
    },
  },
}
</script>

第二部分：SEO 优化 – 让你的网站“鹤立鸡群”

SEO (Search Engine Optimization) 就像是给你的网站化妆，让它在搜索引擎中更具吸引力。主要目标是提高网站在搜索引擎结果页面 (SERP) 中的排名。

1. Meta 标签动态生成

Meta 标签是 HTML 文档 <head> 部分中的特殊标签，用于提供关于网页的元数据，例如描述、关键词、作者等等。搜索引擎会根据这些标签来了解你的网页内容。

在 Nuxt.js 中，我们可以使用 head 函数来动态生成 Meta 标签。

<script>
export default {
  head() {
    return {
      title: this.$t('pageTitle'), // 使用 i18n 获取标题
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.$t('pageDescription'), // 使用 i18n 获取描述
        },
        {
          hid: 'keywords',
          name: 'keywords',
          content: this.$t('pageKeywords'), // 使用 i18n 获取关键词
        },
      ],
    }
  },
}
</script>

在这个例子中，我们使用了 i18n 来获取标题、描述和关键词。这意味着你可以为每种语言设置不同的 Meta 标签，从而更好地针对不同的用户。

重要提示：hid 属性

hid 属性非常重要。它用于标识 Meta 标签，这样 Nuxt.js 才能正确地更新它们。如果没有 hid 属性，Nuxt.js 可能会重复添加 Meta 标签，导致 SEO 问题。

更详细的 Meta 标签设置

除了标题、描述和关键词，你还可以设置其他 Meta 标签，例如：

  • og:title: Open Graph 标题，用于社交媒体分享。
  • og:description: Open Graph 描述。
  • og:image: Open Graph 图片。
  • twitter:card: Twitter 卡片类型。
  • twitter:title: Twitter 标题。
  • twitter:description: Twitter 描述。
  • twitter:image: Twitter 图片。
<script>
export default {
  head() {
    return {
      title: this.$t('pageTitle'),
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.$t('pageDescription'),
        },
        {
          hid: 'keywords',
          name: 'keywords',
          content: this.$t('pageKeywords'),
        },
        {
          hid: 'og:title',
          property: 'og:title',
          content: this.$t('pageTitle'),
        },
        {
          hid: 'og:description',
          property: 'og:description',
          content: this.$t('pageDescription'),
        },
        {
          hid: 'og:image',
          property: 'og:image',
          content: '/images/og-image.jpg', // 替换为你的图片 URL
        },
        {
          hid: 'twitter:card',
          name: 'twitter:card',
          content: 'summary_large_image',
        },
        {
          hid: 'twitter:title',
          name: 'twitter:title',
          content: this.$t('pageTitle'),
        },
        {
          hid: 'twitter:description',
          name: 'twitter:description',
          content: this.$t('pageDescription'),
        },
        {
          hid: 'twitter:image',
          name: 'twitter:image',
          content: '/images/twitter-image.jpg', // 替换为你的图片 URL
        },
      ],
    }
  },
}
</script>

2. Sitemap 生成

Sitemap 是一个 XML 文件，包含了你的网站的所有 URL。它可以帮助搜索引擎更好地抓取和索引你的网站。

在 Nuxt.js 中，我们可以使用 @nuxtjs/sitemap 模块来自动生成 Sitemap。

安装 @nuxtjs/sitemap

npm install @nuxtjs/sitemap
# 或
yarn add @nuxtjs/sitemap

配置 nuxt.config.js

export default {
  modules: [
    '@nuxtjs/sitemap',
  ],

  sitemap: {
    hostname: 'https://yourwebsite.com', // 替换为你的网站域名
    gzip: true, // 是否启用 gzip 压缩
    routes: async () => {
      // 这里可以动态生成 Sitemap 的 URL
      const posts = await fetch('https://yourwebsite.com/api/posts').then(res => res.json())
      return posts.map(post => `/blog/${post.slug}`)
    },
    i18n: {
      locales: ['en', 'zh'],
      routesNameSeparator: '___',
      trailingSlash: false,
    }
  },
}

让我们解释一下这些配置项：

  • hostname: 你的网站域名。
  • gzip: 是否启用 gzip 压缩。启用 gzip 压缩可以减小 Sitemap 文件的大小，提高下载速度。
  • routes: 一个函数，用于动态生成 Sitemap 的 URL。你可以从数据库或 API 中获取数据，然后生成 URL。
  • i18n: 配置 i18n 相关的选项。
    • locales: 你的网站支持的语言。
    • routesNameSeparator: 路由名称分隔符，用于区分不同语言的路由。
    • trailingSlash: 是否在 URL 后面添加斜杠。

动态生成 Sitemap URL

在 routes 函数中，你可以使用 async 和 await 来异步获取数据，然后生成 Sitemap 的 URL。

例如，假设你有一个博客，并且你的博客文章的 URL 格式是 /blog/:slug。你可以使用以下代码来生成 Sitemap 的 URL：

sitemap: {
  hostname: 'https://yourwebsite.com',
  gzip: true,
  routes: async () => {
    const posts = await fetch('https://yourwebsite.com/api/posts').then(res => res.json())
    return posts.map(post => `/blog/${post.slug}`)
  },
  i18n: {
    locales: ['en', 'zh'],
    routesNameSeparator: '___',
    trailingSlash: false,
  }
},

生成 i18n Sitemap
@nuxtjs/sitemap 默认支持i18n，只需要在 sitemap.i18n.locales 中配置你的语言，并确保你的路由已经正确设置了语言前缀。

3. Robots.txt

robots.txt 文件告诉搜索引擎哪些页面可以抓取，哪些页面不应该抓取。

你可以创建一个 static 目录，并在其中创建一个 robots.txt 文件：

static/
  robots.txt

robots.txt:

User-agent: *
Disallow: /admin/
Disallow: /private/

Sitemap: https://yourwebsite.com/sitemap.xml

在这个例子中，我们禁止搜索引擎抓取 /admin/ 和 /private/ 目录，并告诉搜索引擎 Sitemap 文件的位置。

4. 结构化数据 (Schema Markup)

结构化数据是一种标准化的格式，用于提供关于网页内容的额外信息。搜索引擎可以使用这些信息来更好地理解你的网页，并将其显示在搜索结果中。

你可以使用 JSON-LD 格式来添加结构化数据。

<script>
export default {
  head() {
    return {
      script: [
        {
          hid: 'organization',
          type: 'application/ld+json',
          json: {
            "@context": "https://schema.org",
            "@type": "Organization",
            "name": "Your Company Name",
            "url": "https://yourwebsite.com",
            "logo": "https://yourwebsite.com/logo.png"
          }
        }
      ]
    }
  },
}
</script>

总结

今天我们学习了如何在 Nuxt.js 中实现国际化和 SEO 优化。

  • 国际化: 使用 nuxt-i18n 模块来让你的网站支持多种语言。
  • SEO 优化:
    • 使用 head 函数来动态生成 Meta 标签。
    • 使用 @nuxtjs/sitemap 模块来自动生成 Sitemap。
    • 创建 robots.txt 文件来告诉搜索引擎哪些页面可以抓取。
    • 使用结构化数据来提供关于网页内容的额外信息。

希望今天的讲座对你有所帮助。 记住， SEO 优化是一个持续的过程，需要不断地学习和实践。 祝你的网站在搜索引擎中取得好成绩！

下次再见！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注