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

Live&&learn2025-08-09 15:26

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

1.Nuxt 3+版本

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

javascript 复制代码

<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 获取）

javascript 复制代码

<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/ 目录下的组件中使用

javascript 复制代码

//这里的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使用路由信息