nuxt3-SEO篇

最新推荐文章于 2024-05-07 15:15:45 发布

showwaychen

最新推荐文章于 2024-05-07 15:15:45 发布

阅读量1.5k

点赞数

文章标签： javascript vue.js 前端

原文链接：https://tr.zhiyakeji.com/post/1673943931497

版权

nuxt3-SEO篇

通过Nuxt提供的强大的head config，组合式函数和组件来提升你的网站的的SEO。

App Head

在nuxt.config.ts配置文件中，可以通过app.head属性来定制化你的网站的head信息。

::: alertinfo
这种方式并不支持响应式数据。如果你需要全局的响应式数据的话，你可以在app.vue中使用useHead接口
:::

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

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>