码云 Nuxt3教程 2022-09-20

12. Nuxt3 中SEO相关的配置

使用Nuxt3框架解决的主要问题就是要对搜索引擎友好，比如你到百度上搜索“码云笔记”，就可以搜到我的博客。那为什么搜索引擎可以搜到我的网站呢？这要归功于HTML中的Mate标签和title 标签。

title 和 meta 标签的作用

title标签：主要是为了告诉搜索引擎我们的网站标题是什么，然后搜索引擎才会根据你提供的的title给你打上tag，用户在搜索的时候才会搜索到你。

meta标签：这个标签根据name的不同有很多中，和SEO相关的主要是name=description 和name=keywords 这两种，如果不设置这两个标签，对SEO的效果就会有所影响。所以我们在开发需要SEO的网站时，对这两个标签一定要进行设置。当然你可以用两种方法对meta标签进行设置，这节我们就讲两个方法：

使用useHead()方法
直接在模板中使用标签

Nuxt3中的useHead 和useMeta

Nuxt3中提供了 useHead方法来设置SEO需要的内容，用它可以设置HTML中Head的全部内容，所以这也包括meta标签的内容，基本的使用方法也是很简单。上节课我们新建了一个Nuxt3的项目，这节我们就在上节课的项目中继续。在练习的根目录中下的 page文件夹下，新建一个文件 demo1.vue，然后使用 useHead()方法来设置头部信息。

<template>
  <div class="">Demo8 Page</div>
</template>

<script setup>
useHead({
  title: "码云笔记-前端博客-前端教程-记录web前端开发的个人技术博客",
  viewport: "width=device-width,initial-scale=1,maximum-scale=1 ",
  charset: "utf-8",
  meta: [
    { name: "description", content: "码云笔记记录web前端开发的个人技术博客" },
    { name: "keywords", content: "码云笔记" },
  ],
});
</script>

<style scoped></style>

如果你这时候报错，说明你按照的不是最新的Nuxt版本，可以直接安装最新的版本，我这里就在最新的版本上使用了useHead() 方法。

使用template中的标签定义Head

除了使用useHead() 方法外，你还可以直接使用<template> 中的的<head>来定义SEO相关的属性。
我们在/pages 文件夹下面，新建一个demo1.vue 的文件，然后编写下面的代码：

<template>
  <div class="">
    <Head>
      <Title>{{ title }}</Title>
      <Meta name="description" :content="title" />
    </Head>
    <div>码云笔记的前端博客</div>
  </div>
</template>

<script setup>
import { ref } from "vue";
const title = ref("码云笔记的前端博客");
</script>

<style scoped></style>

从代码中可以看到，我们直接使用了<Head>标签，然后在里边还可以使用<Title>标签和<Meta>标签，可以设置这两个标签后，关于SEO的设置就都可以操作了。

我们使用Nuxt的意义就在于可以有很好的SEO效果，所以在你开发的时候，一定要对页面进行标题、描述和关键词的设置和编写。

「点点赞赏，手留余香」

赞 0 赏

给作者打赏，鼓励TA抓紧创作！