NuxtJS - 02.SEO详情请参考：https://ezdoc.cn/docs/nuxtjs/getting-st

1.添加 favicon 图标和 TDK（标题、描述、关键词）：

nuxt.config.ts 添加配置：

export default defineNuxtConfig({
  app: {
    title: "website-name",
    meta: [
      {
        name: 'keywords',
        content: '网站关键字'
      },
      {
        name: 'description',
        content: '网站描述'
      }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: 'favicon.ico' }],
    head: {
      charset: 'utf-8',
      viewport: 'width=device-width, initial-scale=1',
    }
    style: [],
    script: [],
    noscript: []
  }
})

2.使用 useHead：

在app.vue中使用

<script setup lang="ts">
useHead({
  title: "Nuxtjs - mywebsite" // 动态改变网站title
  link: [
    {
      rel: 'icon', type: 'image/x-icon', href: 'favicon.ico'
    }
  ],
  meta: [
    { name: 'keywords', content: 'Nuxtjs,前端架构,JavaScript,TypeScript' },
    { name: 'description', content: '网站描述' }
  ]
})
</script>

3.使用 useSeoMeta：

<script setup lang="ts">
useServerSeoMeta({
  title: "网站标题",
  ogTitle: "网站标题",
  description: '网站描述/简介',
  ogDescription: '网站描述/简介',
  ogImage: 'https://example.com/image.png',
  twitterCard: 'summary_large_image',
})
</script>

当插入响应性标签时，您应该使用计算得到的语法 () => value

或使用 useHead 实现动态标题：

<script setup lang="ts">
const title = ref('my - website');
useSeoMeta({
  title,
  description: () => `description: ${title.value}`
})
</script>

<script setup lang="ts">
useHead({
  // 作为字符串
  // 其中`%s`会被标题替换
  titleTemplate: '%s - website - title',
  // ... 或者作为一个函数
  titleTemplate: (productCategory) => {
    return productCategory
      ? `${productCategory} - website - title`
      : 'website title'
  }
})
</script>

4. 内置组件：

Nuxt 提供<Title>, <Base>, <NoScript>, <Style>, <Meta>, <Link>, <Body>, <Html> 和 <Head> 组件，以便您可以直接与组件模板中的元数据进行交互

因为这些组件名称与原生 HTML 元素相匹配，所以在模板中将它们 大写 非常重要!

<Head> 和 <Body> 可以接受嵌套元标记(出于审美原因)，但这对嵌套元标记在最终 HTML 中呈现的位置没有影响

<template>
  <div>
    <Head>
      <Title>{{ title }}</Title>
      <Meta name="description" :content="title" />
      <Style type="text/css" children="
        body {
          background-color:rgba(255,0,0,.1);
        }
      "></Style>
    </Head>
    <h1>{{ title }}</h1>
  </div>
</template>
<script setup lang="ts">
  const title = ref('Hello World');
</script>

5. 外部 CSS：

<script setup lang="ts">
useHead({
  link: [
    {
      rel: 'preconnect',
      href: 'https://fonts.googleapis.com'
    },
    {
      rel: 'stylesheet',
      href: 'https://fonts.googleapis.com/css2?family=Roboto&display=swap',
      crossorigin: ''
    }
  ]
})
</script>

6. `/pages/` 目录中可以使用 `definePageMeta` 来根据当前路由设置元数据：

<script setup lang="ts">
definePageMeta({
  title: '网站标题'
})
</script>

7. 安装 @nuxtjs/seo 模块：

npx nuxi@latest module add seo

我们需要安装 @nuxtjs/seo 插件，@nuxtjs/seo 是一个模块集合，它覆盖了搜索引擎中常用的模块：

@nuxtjs/sitemap：网站地图

nuxt-simple-robots：蜘蛛爬虫协议

nuxt-schema-org：网页标准

nuxt-seo-experiments：实验性 SEO 元特征

nuxt-og-image：生成动态的社交分享图片

nuxt-link-checker：检查失效链接

在 nuxt.config.ts 中根据实际情况添加配置：

export default defineNuxtConfig({
  // SEO 配置
  site: {
    url: 'https://dream-site.cn',
    name: 'Dream Site',
    description: '致力于打造程序员的梦中情站',
    defaultLocale: 'zh-cn',
    exclude: ['/admin/_components/**'],  // 过滤不需要的 url
    cacheMaxAgeSeconds: 24 * 3600,  // 缓存时间一天
    autoLastmod: true, _// 自动检测每个 URL 的 lastmod 日期
  },
  routeRules: {
    // Don't add any /secret/\*\* URLs to the sitemap.xml
    '/admin/_components/**': { robots: false },
  }
})

现在你就能打开 sitemap.xml 和 robots.txt 了，其他更加详细的配置可以参考官方文档：nuxt-seo

8. Robots：

1. 禁用网站索引

在 nuxt.config.ts

export default defineNuxtConfig({
  site: {
    indexable: false 
  }
})

2. 禁用页面索引

<script setup lang="ts">
defineRouteRules({
  robots: false
})
</script>

3. 如果需要更精细的编程控制，可以使用 `nuxt.config.ts` 配置该模块

在 nuxt.config.ts

export default defineNuxtConfig({
  robots: {
    disallow: ['/secret', '/admin'],
  }
})

9. Sitemap：

1. 禁用 `URL` 模式的索引

export default defineNuxtConfig({
  routeRules: {
    // Don't add any /secret/** URLs to the sitemap.xml
    '/secret/**': {
      robots: false 
    },
  }
})

2. 对于所有其他情况，您可以使用 `include` 和 `exclude` 模块选项来过滤 `url`

export default defineNuxtConfig({
  sitemap: {
    // exclude all URLs that start with /secret
    exclude: ['/secret/**'],
    // include all URLs that start with /public
    include: ['/public/**'],
  }
})

3. 设置 `Lastmod`、`changefreq`、`priority`

<script setup lang="ts">
useSeoMeta({
  // will be inferred as the lastmod value in the sitemap
  articleModifiedTime: '2024-10-01'
})
defineRouteRules({
  sitemap: {
    changefreq: 'daily',
    priority: 0.3
  }
})
</script>

4. 缓存时间

export default defineNuxtConfig({
  sitemap: {
    cacheMaxAgeSeconds: 3600  // 1 hour
  }
})

5. 自定义样式

export default defineNuxtConfig({
  sitemap: {
    xslColumns: [
      { label: 'URL', width: '50%' },
      { label: 'Last Modified', select: 'sitemap:lastmod', width: '25%' },
      { label: 'Priority', select: 'sitemap:priority', width: '12.5%' },
      { label: 'Change Frequency', select: 'sitemap:changefreq', width: '12.5%' },
    ],
  },
})

10. OG Image

1. 使用可组合 `defineOgImageComponent` 来定义主页的 `og:image`

<script lang="ts" setup>
defineOgImageComponent('NuxtSeo')
</script>

2. 在浏览器中访问主页并打开 Nuxt DevTools (`Shift` + `Alt` + `D`)

3. 自定义模板

<script lang="ts" setup>
defineOgImageComponent('NuxtSeo', {
  title: 'Hello OG Image 👋',
  description: 'Look what at me in dark mode',
  theme: '#ff0000',
  colorMode: 'dark',
})
</script>

11. Schema.org

1. 配置默认值

<script lang="ts" setup>
useSchemaOrg([
  defineWebPage({
    name: 'My Page'
  }),
  defineWebSite({
    name: 'My Site'
  })
])
</script>

2. 如果你不想使用默认值

export default defineNuxtConfig({
  schemaOrg: {
    default: false
  }
})

3. 设置身份类型

export default defineNuxtConfig({
  schemaOrg: {
    identity: {
      type: 'Organization',  // or 'Person'
      name: 'My Company',
      url: 'https://example.com',
      logo: 'https://example.com/logo.png'
    }
  }
})

4. 自定义节点

<script lang="ts" setup>
useSchemaOrg([
  {
    '@type': 'DefinedTerm',
    'name': 'Nuxt Schema.org',
    'description': 'Nuxt Schema.org is a Nuxt module for adding Schema.org to your Nuxt app.',
    'inDefinedTermSet': {
      '@type': 'DefinedTermSet',
      'name': 'Nuxt Modules',
    },
  }
])
</script>

12. 添加 Google Analytics 统计代码

1. 安装 nuxt-gtag：

npx nuxi@latest module add gtag

2. nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['nuxt-gtag'],
  gtag: {
    id: 'G-XXXXXXXXXX'
  }
})

3. 或者在环境变量中添加 `NUXT_PUBLIC_GTAG_ID` ：

NUXT_PUBLIC_GTAG_ID = G-XXXXXXXXXX

13. 添加 Microsoft Clarity 统计代码

1. 安装 nuxt-clarity-analytics：

pnpm add -D nuxt-clarity-analytics

2. `nuxt.config.ts` 添加依赖：

export default defineNuxtConfig({
  modules: [
    'nuxt-clarity-analytics'
  ]
})

3. 在环境变量中添加：

MICROSOFT_CLARITY_ID = 'clarity ID'

14. 添加 Umami 统计代码

1、安装 nuxt-umami：

pnpm add nuxt-umami

nuxt.config.ts 添加配置：

defineNuxtConfig({
  extends: ['github:ijkml/nuxt-umami']
});

3. `app.config.ts` 添加配置：

export default defineAppConfig({
  umami: {
    id: '95653e90-7b8b-4541-b6de-ea5e544d8c2d',
    host: 'https://umami.baiwumm.com',
    useDirective: true,
    version: 2,
    domains: ['dream-site.cn'],
    ignoreLocalhost: true
  }
});

4. 跟踪事件

<template>
  <button v-umami="'Event-Name'">
    Event Button
  </button>

  <button v-umami="{ name: 'Event-Name' }">
    as object
  </button>

  <button v-umami="{ name: 'Event-Name', position: 'left', ...others }">
    with event details
  </button>
</template>

NuxtJS - 02.SEO