码云 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 效果，所以在你开发的时候，一定要对页面进行标题、描述和关键词的设置和编写。
以上关于12. Nuxt3 中SEO相关的配置的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。
微信
支付宝如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 12. Nuxt3 中SEO相关的配置
