vue3+Nuxt3的SEO设置，即动态设置title、关键字等信息

原创已于 2025-03-19 17:29:48 修改 · 1.2k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2025-03-19 17:24:12 首次发布

本文中实现了，在nuxt3开发过程中先请求接口再对title、关键字、icon图标等文件进行设置并实现伪静态渲染。

一、先看一下静态的设置方法

方法一、可以直接在根目录的nuxt.config.js文件中进行书写
方法二、在每个页面中进行单独的配置

方法一、在nuxt.config.js文件中进行书写

export default defineNuxtConfig({
  app: {
    head:{
        title: '静态title',
        htmlAttrs: {
          lang: 'en'
        },
        meta: [
          { charset: 'utf-8' },
          { name: 'viewport', content: 'width=device-width, initial-scale=1' },
          { name: 'keywords', content: '静态keywords' },
          { name: 'description', content: '静态description' },
          { name: 'format-detection', content: 'telephone=no' }
          
        ],
        link: [
          { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
        ]
 
    }
  },
})

方法二、在每个页面中进行单独的head配置，在官网中提到了两个API分别是useHead、useSeoMeta，本人感觉useHead更友好一些

useHead

<script setup>
useHead({
     title: `静态title`,
    meta: [
        { name: 'description', content: `静态description` },
         { name: 'keywords', content: `静态keywords` },
    ],
})
</script>

useSeoMeta

<script setup>
useSeoMeta({
  title: '静态title',
  description: '静态description',
  keywords: '静态keywords',
})
</script>

经过测试，以上两种方法都是可以实现，当然也可以只在nuxt.config.js文件中进行一些基础的配置，具体每个页面的标题关键字使用方法二中提到的两个API到页面中进行具体配置。

二、再来看一下如何使用接口返回的数据，对标题、关键字等信息动态的写入


<script setup>
//1、异步调用接口获取数据，不懂的可以去看一下官网文档；注意一定要异步await和useAsyncData不要去掉，否则接口没有
//返回数据useHead就执行了
const { data } = await useAsyncData(() => $fetch('/verify/getDynamicImgCode', {
    // 配置选项
}))
console.log(data.value, "data")
//2、将获取到的数据使用useHead进行设置（使用.value）
useHead({
    title: `${data.value.msg}`,
    meta: [
        { name: 'description', content: `${data.value.msg}` },
        { name: 'keywords', content: `${data.value.msg}` },
    ],
})
</script>