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设置就到这里了，如果你觉得还不错，记得关注+收藏哦。转载请标明出处。

栏目分类

最新文章

访问最多

扫码访问微信小程序

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

关于