Nuxt实战(4)-SEO、SiteMap、I18N国际化配置

export default defineNuxtConfig({
  // 站点基础信息
  site: {
    url: 'https://game-community.cn',
    name: '游戏讨论&创作社区',
    description: '专注游戏讨论、创作分享和玩家交流的综合性游戏社区平台',
    defaultLocale: 'zh-CN', // 默认语言
    trailingSlash: false, // URL 是否包含尾部斜杠
  },

  // 应用配置
  app: {
    head: {
      title: '游戏讨论&创作社区',
      titleTemplate: '%s - 游戏讨论&创作社区',
      meta: [
        { name: 'keywords', content: '游戏社区,游戏讨论,游戏创作,玩家交流,游戏攻略,游戏评测' },
        { name: 'description', content: '专注游戏讨论、创作分享和玩家交流的综合性游戏社区平台' },
        { name: 'author', content: '游戏社区团队' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { charset: 'utf-8' }
      ],
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
        { rel: 'canonical', href: 'https://game-community.cn' }
      ]
    }
  }
})

<script setup lang="ts">
// 基础页面 SEO
useHead({
  title: '首页',
  meta: [
    { name: 'description', content: '欢迎来到游戏讨论&创作社区首页，发现精彩游戏内容' },
    { name: 'keywords', content: '游戏首页,游戏社区,游戏讨论,游戏创作' }
  ],
  link: [
    { rel: 'canonical', href: 'https://game-community.cn/' }
  ]
})
</script>

<script setup lang="ts">
// 完整的 SEO 元数据配置
useSeoMeta({
  // 基础信息
  title: '游戏讨论&创作社区 - 玩家的精神家园',
  description: '专注游戏讨论、创作分享和玩家交流的综合性游戏社区平台，提供游戏攻略、评测、创作工具等服务',
  keywords: '游戏社区,游戏讨论,游戏创作,玩家交流,游戏攻略,游戏评测,游戏资讯',

  // Open Graph (Facebook, LinkedIn 等)
  ogTitle: '游戏讨论&创作社区 - 玩家的精神家园',
  ogDescription: '专注游戏讨论、创作分享和玩家交流的综合性游戏社区平台，提供游戏攻略、评测、创作工具等服务',
  ogImage: 'https://game-community.cn/og-image.jpg',
  ogUrl: 'https://game-community.cn',
  ogType: 'website',
  ogSiteName: '游戏讨论&创作社区',

  // Twitter Cards
  twitterCard: 'summary_large_image',
  twitterSite: '@gamecommunity',
  twitterCreator: '@gameteam',
  twitterTitle: '游戏讨论&创作社区 - 玩家的精神家园',
  twitterDescription: '专注游戏讨论、创作分享和玩家交流的综合性游戏社区平台',
  twitterImage: 'https://game-community.cn/twitter-image.jpg',

  // 其他元数据
  robots: 'index, follow',
  googlebot: 'index, follow',
  author: '游戏社区团队',
  publisher: '游戏讨论&创作社区'
})
</script>

<script setup lang="ts">
// 页面级元数据定义
definePageMeta({
  title: '关于我们',
  description: '了解游戏讨论&创作社区团队和我们的使命',
  layout: 'default'
})
</script>

<script setup lang="ts">
// 动态标题模板
useHead({
  titleTemplate: (title) => {
    return title ? `${title} - 游戏讨论&创作社区` : '游戏讨论&创作社区 - 玩家的精神家园'
  }
})

// 根据路由动态设置 SEO
const route = useRoute()
const { data: pageData } = await $fetch(`/api/pages${route.path}`)

useSeoMeta({
  title: pageData.title,
  description: pageData.description,
  ogImage: pageData.image || '/default-og.jpg'
})
</script>

export default defineNuxtConfig({
  // 站点索引配置
  site: {
    indexable: true // 允许搜索引擎索引
  },

  // Robots 规则
  robots: {
    // 允许所有爬虫
    UserAgent: '*',
    // 禁止访问的路径
    Disallow: ['/admin', '/api', '/private'],
    // 允许访问的路径
    Allow: ['/api/public'],
    // 网站地图位置
    Sitemap: 'https://game-community.cn/sitemap.xml'
  },

  // 路由规则
  routeRules: {
    // 禁止管理后台被索引
    '/admin/**': { robots: false },
    // 禁止 API 路由被索引
    '/api/**': { robots: false },
    // 首页高优先级
    '/': { sitemap: { priority: 1.0, changefreq: 'daily' } },
    // 博客页面
    '/blog/**': { sitemap: { priority: 0.8, changefreq: 'weekly' } }
  }
})

<script setup lang="ts">
// 禁止特定页面被索引
defineRouteRules({
  robots: false, // 禁止索引
  sitemap: false // 不包含在网站地图中
})

// 或者使用 useSeoMeta
useSeoMeta({
  robots: 'noindex, nofollow' // 禁止索引和跟踪链接
})
</script>

export default defineNuxtConfig({
  sitemap: {
    // 网站地图 URL
    hostname: 'https://game-community.cn',

    // 缓存配置
    cacheMaxAgeSeconds: 24 * 60 * 60, // 24小时缓存

    // 自动检测最后修改时间
    autoLastmod: true,

    // 默认配置
    defaults: {
      changefreq: 'weekly',
      priority: 0.5,
      lastmod: new Date().toISOString()
    },

    // 包含的路径
    include: [
      '/games/**',
      '/discussions/**',
      '/creations/**',
      '/guides/**',
      '/reviews/**',
      '/about'
    ],

    // 排除的路径
    exclude: [
      '/admin/**',
      '/api/**',
      '/private/**',
      '/_nuxt/**'
    ]
  }
})

export default defineNuxtConfig({
  sitemap: {
    // 自定义 XSL 样式表
    xsl: '/sitemap.xsl',

    // 自定义列配置
    xslColumns: [
      { label: 'URL', width: '50%' },
      { label: '最后修改', select: 'sitemap:lastmod', width: '25%' },
      { label: '优先级', select: 'sitemap:priority', width: '12.5%' },
      { label: '更新频率', select: 'sitemap:changefreq', width: '12.5%' }
    ],

    // 自定义提示信息
    xslTips: true
  }
})

<script setup lang="ts">
// 设置页面在网站地图中的属性
defineRouteRules({
  sitemap: {
    changefreq: 'daily',
    priority: 0.9,
    lastmod: new Date('2024-01-01')
  }
})

// 使用 SEO 元数据设置最后修改时间
useSeoMeta({
  articleModifiedTime: '2024-01-01T00:00:00.000Z'
})
</script>

export default defineNuxtConfig({
  sitemap: {
    // 多语言支持
    i18n: true,

    // 为每种语言生成单独的网站地图
    sitemaps: {
      'zh-CN': {
        hostname: 'https://game-community.cn',
        defaults: { changefreq: 'weekly', priority: 0.5 }
      },
      'zh-TW': {
        hostname: 'https://tw.game-community.cn',
        defaults: { changefreq: 'weekly', priority: 0.5 }
      }
    }
  }
})

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

  i18n: {
    // 支持的语言列表
    locales: [
      {
        code: 'zh-CN',
        name: '简体中文',
        iso: 'zh-CN',
        file: 'zh-CN.json',
        dir: 'ltr'
      },
      {
        code: 'zh-TW',
        name: '繁體中文',
        iso: 'zh-TW',
        file: 'zh-TW.json',
        dir: 'ltr'
      }
    ],

    // 默认语言
    defaultLocale: 'zh-CN',

    // 语言文件目录
    langDir: 'locales/',

    // 路由策略
    strategy: 'prefix_except_default', // 默认语言不加前缀

    // 检测用户语言
    detectBrowserLanguage: {
      useCookie: true,
      cookieKey: 'i18n_redirected',
      redirectOn: 'root',
      alwaysRedirect: false,
      fallbackLocale: 'zh-CN'
    },

    // SEO 配置
    seo: true,

    // 编译优化
    compilation: {
      strictMessage: false,
      escapeHtml: false
    }
  }
})

<template>
  <div>
    <!-- 基础翻译 -->
    <h1>{{ $t('home.title') }}</h1>
    <p>{{ $t('home.description') }}</p>

    <!-- 带参数的翻译 -->
    <p>{{ $t('welcome.message', { name: userName }) }}</p>

    <!-- 复数形式 -->
    <p>{{ $tc('items.count', itemCount, { count: itemCount }) }}</p>

    <!-- 当前语言信息 -->
    <p>{{ $i18n.locale }} - {{ $i18n.locales.find(l => l.code === $i18n.locale)?.name }}</p>
  </div>
</template>

<script setup lang="ts">
const { t, locale, locales } = useI18n()
const userName = ref('张三')
const itemCount = ref(5)

// 响应式翻译
const title = computed(() => t('home.title'))

// 切换语言
const switchLanguage = (newLocale: string) => {
  locale.value = newLocale
}
</script>

<template>
  <nav>
    <!-- 使用 localePath 生成本地化链接 -->
    <NuxtLink :to="localePath('/')">
      {{ $t('nav.home') }}
    </NuxtLink>

    <NuxtLink :to="localePath('/games')">
      {{ $t('nav.games') }}
    </NuxtLink>

    <NuxtLink :to="localePath('/discussions')">
      {{ $t('nav.discussions') }}
    </NuxtLink>

    <NuxtLink :to="localePath('/creations')">
      {{ $t('nav.creations') }}
    </NuxtLink>

    <!-- 切换到其他语言的相同页面 -->
    <NuxtLink :to="switchLocalePath('zh-TW')">
      繁體中文
    </NuxtLink>
  </nav>
</template>

<script setup lang="ts">
const { localePath, switchLocalePath } = useI18n()
</script>

<script setup lang="ts">
const { t, locale } = useI18n()

// 多语言 SEO 配置
useSeoMeta({
  title: t('seo.title'),
  description: t('seo.description'),
  ogTitle: t('seo.ogTitle'),
  ogDescription: t('seo.ogDescription'),

  // 语言标识
  ogLocale: locale.value,

  // 替代语言版本
  ogLocaleAlternate: ['zh-CN', 'zh-TW']
})

// 设置 HTML lang 属性
useHead({
  htmlAttrs: {
    lang: locale.value
  }
})
</script>

<script setup lang="ts">
// 使用默认模板
defineOgImageComponent('Default')

// 使用自定义参数
defineOgImageComponent('Default', {
  title: '技术博客',
  description: '分享最新的开发技术和经验'
})

// 动态生成
const route = useRoute()
const { data: post } = await $fetch(`/api/posts/${route.params.slug}`)

defineOgImageComponent('BlogPost', {
  title: post.title,
  description: post.excerpt,
  image: post.coverImage,
  author: post.author.name,
  publishedAt: post.publishedAt
})
</script>

export default defineNuxtConfig({
  // 基础模块
  modules: [
    '@nuxtjs/seo',
    '@nuxtjs/i18n',
    'nuxt-gtag',
    'nuxt-clarity-analytics'
  ],

  // 站点配置
  site: {
    url: 'https://game-community.cn',
    name: '游戏讨论&创作社区',
    description: '专注游戏讨论、创作分享和玩家交流的综合性游戏社区平台',
    defaultLocale: 'zh-CN',
    indexable: true
  },

  // SEO 配置
  app: {
    head: {
      title: '游戏讨论&创作社区',
      titleTemplate: '%s - 游戏讨论&创作社区',
      meta: [
        { name: 'keywords', content: '游戏社区,游戏讨论,游戏创作,玩家交流,游戏攻略,游戏评测' },
        { name: 'description', content: '专注游戏讨论、创作分享和玩家交流的综合性游戏社区平台' },
        { name: 'author', content: '游戏社区团队' }
      ]
    }
  },

  // 国际化配置
  i18n: {
    locales: [
      { code: 'zh-CN', name: '简体中文', file: 'zh-CN.json' },
      { code: 'zh-TW', name: '繁體中文', file: 'zh-TW.json' }
    ],
    defaultLocale: 'zh-CN',
    langDir: 'locales/',
    strategy: 'prefix_except_default',
    seo: true
  },

  // 网站地图配置
  sitemap: {
    hostname: 'https://game-community.cn',
    cacheMaxAgeSeconds: 24 * 60 * 60,
    autoLastmod: true,
    exclude: ['/admin/**', '/api/**']
  },

  // Robots 配置
  robots: {
    UserAgent: '*',
    Disallow: ['/admin', '/api/private'],
    Sitemap: 'https://game-community.cn/sitemap.xml'
  },

  // 路由规则
  routeRules: {
    '/': { sitemap: { priority: 1.0, changefreq: 'daily' } },
    '/games/**': { sitemap: { priority: 0.9, changefreq: 'daily' } },
    '/discussions/**': { sitemap: { priority: 0.8, changefreq: 'hourly' } },
    '/creations/**': { sitemap: { priority: 0.8, changefreq: 'weekly' } },
    '/guides/**': { sitemap: { priority: 0.7, changefreq: 'weekly' } },
    '/reviews/**': { sitemap: { priority: 0.7, changefreq: 'weekly' } },
    '/admin/**': { robots: false, sitemap: false }
  },

  // Google Analytics
  gtag: {
    id: 'G-XXXXXXXXXX'
  },

  // 运行时配置
  runtimeConfig: {
    public: {
      siteUrl: 'https://game-community.cn',
      clarityId: process.env.MICROSOFT_CLARITY_ID
    }
  }
})