SEO配置

Mr.Liu大约 4 分钟

SEO配置

默认配置

nuxt提供了默认值，没有特殊需要，你没必须自己设置。当然有必须的话，你也可以自己更改这此信息

//nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      charset: 'utf-16',
      viewport: 'width=500, initial-scale=1',
      title: 'My App',
      meta: [
        // <meta name="description" content="My amazing site">
        { name: 'description', content: 'My amazing site.' }
      ],
    }
  }
})

组合式函数: useHead

使用useHead可以管理你项目中的head中的标签。这种方式更灵活，支持响应式的设置。Nuxt内部是使用@vueuse/head来实现此功能的。和所有的其它组合式函数样，你只能在组件中的setup和生命周期中的钩子中使用此接口。

示例:

<script setup lang="ts">
useHead({
  title: 'My App',
  meta: [
    { name: 'description', content: 'My amazing site.' }
  ],
  bodyAttrs: {
    class: 'test'
  },
  script: [ { children: 'console.log(\'Hello world\')' } ]
})
</script>

组件

Nuxt提供了<Title>, <Base>,<NoScript>,<Meta>, <Link>,<Body>,<Html>和<Head>等组件让你在组件中方便的设置和更改你项目中的metadata。

由于这些组件名与原生的HTML中的一些元素一样，所以你在template中使用时，一定要注意大写。

<Head>和<Body>可以内部包含元标签(meta tags)。但对最终渲染成的HTML中的嵌套元标签没有什么影响 。

示例:

<script setup>
const title = ref('Hello World')
</script>

<template>
  <div>
    <Head>
      <Title>{{ title }}</Title>
      <Meta name="description" :content="title" />
      <Style type="text/css" children="body { background-color: green; }" />
    </Head>

    <h1>{{ title }}</h1>
  </div>
</template>

类型

interface MetaObject {
  title?: string
  titleTemplate?: string | ((title?: string) => string)
  base?: Base
  link?: Link[]
  meta?: Meta[]
  style?: Style[]
  script?: Script[]
  noscript?: Noscript[];
  htmlAttrs?: HtmlAttributes;
  bodyAttrs?: BodyAttributes;
}

你可以在useHead, app.head和组件中使用上面这么类型的元数据。

响应式

所有的属性都是支持响应式的。你可以使用refs和reactive来设置和修改这些属性。例如:

<!-- 使用useHead -->
<script setup lang="ts">
const desc = ref('My amazing site.')

useHead({
  meta: [
    { name: 'description', content: desc }
  ],
})
</script>

使用组件

<script setup>
const desc = ref('My amazing site.')
</script>
<template>
<div>
  <Meta name="description" :content="desc" />
</div>
</template>

标题模板

你可以使用titleTemplate这个可选项，这个可以提供一个动态的模板来定制化你的网站的标题。例如给每个页面的头部添加网站名。 titleTemplate可以是一个字符串，字符串中的%s可以被标题替换。也可以是一个函数。如果你想使用函数，那你就不能在nuxt.config配置文件中去设置了，推荐在app.vue文件中去设置，这样就可以将此模板应用到全部页面了。

<script setup lang="ts">
  useHead({
    titleTemplate: (titleChunk) => {
      return titleChunk ? `${titleChunk} - Site Title` : 'Site Title';
    }
  })
</script>

Body 标签

你可以在link和script元标签中添加body: true可选项，这样这些元标签就将被添加到<body>标签的最后面。

例如:

<script setup lang="ts">
useHead({
  script: [
    {
      src: 'https://third-party-script.com',
      body: true
    }
  ]
})
</script>

definePageMeta使用示例

在你的page/目录下，你可以基于当前路由使用definePageMeta来设置元信息。

例如:

<!-- pages/some-page.vue -->
<script setup>
definePageMeta({
  title: 'Some Page'
})
</script>

这些信息会在项目的构建编译阶段被提取，你不能动态设置这些信息。

通过上面的设置后，你就就可以在布局文件中使用这些路由信息了。

<!-- layouts/default.vue -->
<script setup>
const route = useRoute()

useHead({
  meta: [{ property: 'og:title', content: `App Name - ${route.meta.title}` }]
})
</script>

添加动态标题

使用titleTemplate添加动态的标题

<!-- app.vue -->
<script setup>
  useHead({
    // as a string,
    // where `%s` is replaced with the title
    titleTemplate: '%s - Site Title',
    // ... or as a function
    titleTemplate: (productCategory) => {
      return productCategory
        ? `${productCategory} - Site Title`
        : 'Site Title'
    }
  })
</script>

添加外部的CSS

<!-- 使用useHead -->
<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>

<!-- 使用组件的方式 -->
<template>
<div>
  <Link rel="preconnect" href="https://fonts.googleapis.com" />
  <Link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" crossorigin="" />
</div>
</template>

综合案例

import { loadEnv } from 'vite'

interface VITE_ENV_CONFIG {
    VITE_API_URL: string
}
const envScript = (process.env as any).npm_lifecycle_script.split(' ')
const envName = envScript[envScript.length - 1]
const envData = loadEnv(envName, 'env') as unknown as VITE_ENV_CONFIG



export default defineNuxtConfig({
    app: {
        // 为每一个页面进行head设置 --- SEO 和 加载外部资源
        // 在nuxt项目中 没有index.html文件
        // 所以对应的配置写在这里
        head: {
            // 设置title
            title: 'wst客户端',
            // charset 和 viewport比较特殊 可以提到app顶层进行配置
            // charset: 'utf-8',
            // viewport: 'width=device-width, initial-scale=1.0, maximum-scalable=1.0, minmum-scalable=1.0, user-scalable=no',

            // 设置meta
            meta: [
                // 对象中的key是meta的属性名
                // 对象中的value是meta的属性值
                {
                    charset: 'utf-8'
                },
                {
                    name: 'viewport',
                    content: 'width=device-width, initial-scale=1.0, maximum-scalable=1, minmum-scalable=1, user-scalable=no'
                },
                {
                    name: 'keywords',
                    content: 'nuxt3 config'
                },
                {
                    name: 'description',
                    content: 'nuxt3 config description'
                }
            ],
            // 设置script
            script: [
                {
                    // 默认情况下，是插入到head中
                    src: 'https://www.example.js'
                },

                {
                    src: 'https://www.foo.js',
                    // script插入到body的最后边
                    body: true
                }
            ],
            // 设置link
            link: [
                {
                    rel: 'shortcut icon',
                    href: 'favicon.ico',
                    type: 'image/x-icon'
                }
            ],
            style: [
                {
                    // 有一个特殊的属性 children
                    // children对应的属性值会被作为对应属性的子元素
                    // 所以下述会被渲染为 <style>body { color: red }</style>
                    children: `
              body {
                color: red;
              }
            `,
                },
            ],

            // 给body元素添加对应的属性
            // ps: 这里的值是对象不是数组
            bodyAttrs: {
                class: 'body-style'
            }
        }
    }
})

原文链接：nuxt3-SEO篇