码云 Nuxt3教程 2022-09-20

12. Nuxt3 中SEO相关的配置

文章目录隐藏

title 和 meta 标签的作用
Nuxt3 中的 useHead 和 useMeta
使用 template 中的标签定义 Head

使用 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抓紧创作！