12. Nuxt3 中SEO相关的配置

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

title 和 meta 标签的作用

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

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

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

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抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:
本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
码云笔记 » 12. Nuxt3 中SEO相关的配置

发表回复

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们