如何对Nuxt3进行搜索引擎优化（SEO）的实用指南
最编程
2024-02-08 10:51:01
...
我们之所以使用`Nuxt3`,就是为了解决的主要问题就是要对搜索引擎友好,比如`Mate`标签和`title` 标签等等。
在技术层面的seo优化，也无外乎 tittle 、 Mate 、 description 、 keywords 以及网站中的链接、图片、重要文字等等。所以我们在开发需要SEO的网站时，需要对这些标签一定要进行设置。因为内容部分数据解析 Nuxt3 在数据渲染的时候就已经帮我们处理了。
一、 Nuxt3中 useHead 、useMeta 的使用
1、如何使用 useHead。如下：
<!--- _oo0oo_
o8888888o
88" . "88
(| -_- |)
0\ = /0
___/`---'\___
.' \\| |// '.
/ \\||| : |||// \
/ _||||| -:- |||||- \
| | \\\ - /// | |
| \_| ''\---/'' |_/ |
\ .-\__ '-' ___/-. /
___'. .' /-.-\ `. .'___
."" '< `.___\_<|>_/___.' >' "".
| | : `- \`.;`\ _ /`;.`/ - ` : | |
\ \ `_. \_ __\ /__ _/ .-` / /
=====`-.____`.___ \_____/___.-`___.-'=====
`=---='
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
佛祖保佑 永不宕机 永无BUG
@Description: useHead的使用
@version:1.2.0
@Date: 2022-09-13 20:45:24
@Author: wenBin
--->
<template>
<div class="">useHead的使用</div>
</template>
<script setup lang='ts'>
useHead({
title: "服务端渲染 useHead",
viewport: "width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover",
charset: "utf-8",
meta: [
{ name: "description", content: "服务端渲染，useHead的使用，Nuxt3,Nuxt3服务端渲染" },
{ name: "keywords", content: "服务端渲染，useHead的使用，Nuxt3,Nuxt3服务端渲染" },
]
});
</script>
<style scoped>
</style>
2、如何使用 useMeta。在项目中的 nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/content'],
meta: {
title: '全局服务端渲染标题',
meta: [
{ name: 'viewport', content: 'width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover' },
{ hid: 'keywords', name: 'keywords', content: "服务端渲染，useHead的使用，Nuxt3,Nuxt3服务端渲染" },
{ hid: 'description', name: 'keywords', content: "服务端渲染，useHead的使用，Nuxt3,Nuxt3服务端渲染" },
],
}
})
同时我们要明白，我们还可以在 template 内来定义SEO相关的属性。例如：
<template>
<div>
<Head>
<Title>{{ title }}</Title>
<Meta name="description" :content="服务端渲染，useHead的使用，Nuxt3,Nuxt3服务端渲染" />
<Meta name="keywords" :content="服务端渲染，useHead的使用，Nuxt3,Nuxt3服务端渲染" />
</Head>
<div>服务端渲染</div>
</div>
</template>
<script setup>
import { ref } from "vue"
const title = ref("服务端渲染")
</script>
<style scoped>
</style>
注意：在数据渲染过程中，我们尽量使用页面跳转，这样更有利于
SEO的优化