使用 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 >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 >
<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 效果，所以在你开发的时候，一定要对页面进行标题、描述和关键词的设置和编写。