Nuxt3项目实战篇8——Nuxt3的头部设置,SEO的处理方法

2022-07-26 17:29:51

上一篇我们讲了Nuxt3的组件通信以及状态共享。接下来我们要开讲Nuxt3的head设置的方法。

Nuxt3 提供了多种方法为所有网页或特定网页设置头部 <head> 标签的信息。

1.  首先,可以直接在nuxt.config.js中配置, 如果页面中有useHead属性,会覆盖掉这个设置

export default defineNuxtConfig({
  ssr: true, //SSR渲染。 若设置为false, 则表示单页开发
  app: {
    head: {
      title: '我是title',
      meta: [
        // <meta name="viewport" content="width=device-width, initial-scale=1">
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { name: 'description', content: '我是description' },
        { name: 'keywords', content: '我是keywords' },
      ],
      script: [
        // <script src="https://myawesome-lib.js"></script>
        { src: 'https://awesome-lib.js' }
      ],
      link: [
        // <link rel="stylesheet" href="https://myawesome-lib.css">
        { rel: 'stylesheet', href: 'https://awesome-lib.css' }
      ],
      // please note that this is an area that is likely to change
      style: [
        // <style type="text/css">:root { color: red }</style>
        { children: ':root { color: red }', type: 'text/css' }
      ]
    }
  }
})

2. 还可以使用 useHead() 组合式 API 来设置特定的页面(组件)的头部信息,入参是一个对象或返回对象的函数,该对象可以具有以下属性:

  • title 设置网页的标题
  • titleTemplate 设置网页的标题模板
  • base 设置文档根 URL 元素,即 <base> 标签
  • script 设置脚本
  • style 设置网页样式
  • meta 设置元信息
  • link 设置样式表
  • charset 设置 <meta charset="UTF-8"> 标签
  • viewport 设置 <meta name="viewport" ...> 标签
  • htmlAttrs 为 <html> 元素添加属性
  • bodyAttrs 为 <body> 元素添加属性
<script setup>
useHead({
  // 设置网页的标题模板,基于原有的网页标题进行更改
  titleTemplate: 'My App - %s', // or, title => `My App - ${title}`
  // 设置 <meta name="viewport" ...> 标签
  viewport: 'width=device-width, initial-scale=1, maximum-scale=1',
  // 设置 <meta charset="UTF-8"> 标签
  charset: 'utf-8',
  // 添加 <meta> 标签
  meta: [
    { name: 'description', content: 'My amazing site.' }
  ],
  // 为 <body> 添加类名
  bodyAttrs: {
    class: 'test'
  }
})
</script>

3. 在特定页面使用 definePageMeta() 方法为该页面所对应的路由添加元信息,然后再在布局组件中通过 useHead() 来基于路由元信息为网页设置头部信息。

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


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

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

Nuxt3提供的一些内置的组件来设置网页的头部信息:

  • <Title>
  • <Base>
  • <Script>
  • <Meta>
  • <Link>
  • <Body>
  • <Html>
  • <Head>

4. 基于使用习惯,允许在 <Head> 和 <Body> 内部嵌套使用其他的组件,但是最终这些用于设置网页头部信息的组件渲染成为相应的 <meta> 的位置是在网页的头部标签内的

<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>

当然我们也我们可以创建一个公共components/head组件,再app.vue中使用, 也可以根据根据情况,每个页获取属性,传递值给head组件

<script setup>
useHead({
  title:'我是title',
  viewport: 'width=device-width, initial-scale=1, maximum-scale=1',
  charset: 'utf-8',
  meta: [
    {
      name: 'description',
      content:'我是description'
    },
    {
      name: 'keywords',
      content:'我是keywords'
    },
  ],
  bodyAttrs: { //body上赋值class
    class: userLang.value,
  },
  htmlAttrs: { //html上赋值语言
    lang: userLang.value,
  },
})
</script>

或许上面的方法直接创建在composables中更合适。因为composables文件夹下的文件会自动导入到项目中。

Nuxt3的SEO设置就到这里了,如果你觉得还不错,记得关注+收藏哦。 转载请标明出处。

关于

联系方式 :

mail: hey_cool@163.com ,
QQ:583459700

备案许可证编号:蜀ICP备16005545号-1 © COPYRIGHT 2015-2022 zhmzjl.com | by: KAPO