nuxt3中设置网页搜索引擎优化的几种方式

常想一二三
1,956 阅读1分钟

nuxt主要是服务端渲染而生，开发者使用服务端渲染的一个主要目的也是为了利于网站的搜索引擎优化（SEO）,那么本文就来重点介绍一下在nuxt3中进行网页head设置的几种方式。

useHead方式

在组件的setup钩子函数内通过使用useHead函数进行设置

useHead函数使用方式分为两种：

第一种传入一个对象

对象通过key:value的形式对相应的head头信息进行设置，比如title、titleTemplate、meta、base、script、style、link。也可以使用htmlAttrs 和 bodyAttrs分别对html 和 body标签进行属性设置。另外nuxt3还对常用的一些meta信息进行了简化处理，比如可以直接通过chartset 和 viewport属性对网页编码和网页视口信息进行设置，下面是一段演示代码

<script setup>
useHead({
  titleTemplate: 'My App - %s',
  // or, instead:
  // titleTemplate: (title) => `My App - ${title}`,
  viewport: 'width=device-width, initial-scale=1, maximum-scale=1',
  charset: 'utf-8',
  meta: [
    { name: 'description', content: 'My amazing site.' }
  ],
  bodyAttrs: {
    class: 'test'
  }
})
</script>
useHead方法也可以传入一个匿名方法进行设置

传入的匿名方法通过返回一个对象的形式对网页头信息进行设置

<script setup>
// 注意此处useHead的参数是一个匿名方法
useHead(() => {
  titleTemplate: 'My App - %s',
  // or, instead:
  // titleTemplate: (title) => `My App - ${title}`,
  viewport: 'width=device-width, initial-scale=1, maximum-scale=1',
  charset: 'utf-8',
  meta: [
    { name: 'description', content: 'My amazing site.' }
  ],
  bodyAttrs: {
    class: 'test'
  }
})
</script>

Meta components

nuxt3还提供了一套组件，从而更加语意化的设置网页头信息，这里需要注意一点，因为html标签里面本身就存在着<title>, <base>, <script>, <style>, <meta>, <link>, <body>, <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>

使用definePageMeta 和 useHead结合的方式

首页我们可以在页面组件中通过使用definePageMeta的方式定义一些meta信息

// /pages/index.vue
<script setup>
definePageMeta({
  title: 'index page',
  keywords: '我是nuxt, nuxt is good'
})
</script>

然后在布局文件中使用useHead方法动态设置页面head信息

<script setup>
const route = useRoute()
console.log(route.meta, 'route meta')
useHead({
  title: `App name - ${route.meta.title}`,
  meta: [
    {name: 'keywords', content: `index page ${route.meta.keywords}`}
  ]
})
</script>

注意此处可以通过useRoute获取当前路由参数，然后通过route.meta可以获取到当前页面设置的一些meta信息，从而可以动态设置例如title,keywords,description,viewport等信息，使用起来更加灵活

avatar
文章
阅读
粉丝