小洛的前端技术博客Appearance
nuxt配置SEO
nuxt配置SEO可以在nuxt.config.js文件中进行配置、也可以在页面组件中配置。 有不懂的看https://nuxt.com/docs/getting-started/seo-meta
nuxt.config.js配置
ts
export default defineNuxtConfig({
app: {
head: {
charset: 'utf-8',
title: '我的网站',
meta: [
{ name: 'description', content: '这是一个 SEO 友好的 Nuxt 3 项目' },
{ name: 'keywords', content: 'nuxt3, seo, vue3' },
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
}
}
})export default defineNuxtConfig({
app: {
head: {
charset: 'utf-8',
title: '我的网站',
meta: [
{ name: 'description', content: '这是一个 SEO 友好的 Nuxt 3 项目' },
{ name: 'keywords', content: 'nuxt3, seo, vue3' },
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
}
}
})页面组件配置(useHead)
ts
<script setup>
useHead({
title: '我的页面',
meta: [
{ name: 'description', content: '这是一个 SEO 友好的页面' },
{ name: 'keywords', content: 'Nuxt.js,Vue.js,JavaScript' }
]
})
</script><script setup>
useHead({
title: '我的页面',
meta: [
{ name: 'description', content: '这是一个 SEO 友好的页面' },
{ name: 'keywords', content: 'Nuxt.js,Vue.js,JavaScript' }
]
})
</script>页面组件配置(definePageMeta)
ts
<script setup>
definePageMeta({
title: '我的页面',
meta: [
{ name: 'description', content: '这是一个 SEO 友好的页面' },
{ name: 'keywords', content: 'Nuxt.js,Vue.js,JavaScript' }
]
})
</script><script setup>
definePageMeta({
title: '我的页面',
meta: [
{ name: 'description', content: '这是一个 SEO 友好的页面' },
{ name: 'keywords', content: 'Nuxt.js,Vue.js,JavaScript' }
]
})
</script>@nuxtjs/seo插件实现
bash
yarn add @nuxtjs/seoyarn add @nuxtjs/seots
export default defineNuxtConfig({
modules: ['@nuxtjs/seo'],
seo: {
//没测试过，大概不会用这个插件的
}
})export default defineNuxtConfig({
modules: ['@nuxtjs/seo'],
seo: {
//没测试过，大概不会用这个插件的
}
})