当前位置：首页 > news >正文

seo-使用nuxt定义页面标题和meta等信息

news 2025/8/9 15:24:39

nuxt-seo-定义单页面的标题和meta元信息

1.Nuxt 3+版本

全局配置：nuxt.config.ts 中配置即可
页面级配置： useHead 组合式 API（推荐）

<script setup>
import { useHead } from '@unhead/vue'
// 静态配置
useHead({title: '默认标题',meta: [{ name: 'description', content: '默认描述' }],link:[{rel: "icon",type: "image/png",href: "/favicon.png"}]
})
// 动态配置（结合 ref），可以从路由信息中获取，也可从从接口获取title内容
const dynamicTitle = ref('初始标题')
useHead({title: dynamicTitle.value // 自动响应更新// title.useRoute().meta.title //从路由信息中获取
})
// 修改动态标题
setTimeout(() => {dynamicTitle.value = '新标题'
}, 3000)
</script>

动态设置示例（如从 API 获取）

<script setup>
import { useAsyncData } from 'nuxt/app'
const { data: seoData } = await useAsyncData('seo', () => {return $fetch('/api/seo-data') // 从 API 获取 SEO 数据
})
useHead({title: seoData.value.title,meta: [{ name: 'description', content: seoData.value.description }]
})
</script>

2.区分definePageMeta（定义路由信息）

用途： 配置页面级路由行为和 Nuxt 框架相关设置
作用域： 只能在 pages/ 目录下的组件中使用

//这里的title是路由的标题，不是页面的title
definePageMeta({// 路由相关配置name: 'custom-route-name',     // 自定义路由名称path: '/custom/:id',           // 覆盖文件系统路由alias: ['/alt-path'],           // 路由别名// 布局控制layout: 'admin-layout',         // 指定使用的布局// 路由行为middleware: ['auth'],           // 应用的中间件pageTransition: { name: 'fade' }, // 页面过渡效果// 验证路由参数validate: (route) => /^\d+$/.test(route.params.id),// SEO 相关（需配合 useHead 使用）title: '默认标题',              // 不会直接设置 HTML title
});
//下面可以useHead使用路由信息