Vue元数据管理：vue-meta原理与SEO优化实战-尧图网络科技

1. 为什么 Vue 项目里的`<title>`和`<meta>`总是“慢半拍”？

你有没有遇到过这样的场景：在 Vue 单页应用里，点击一个商品详情页，URL 变了，页面内容也渲染出来了，但浏览器标签页上显示的标题还是首页的“欢迎来到我的商城”，或者微信分享卡片里抓取的描述还是首页的通用文案？更尴尬的是，SEO 爬虫来爬你的页面，拿到的永远是index.html里那几行静态的<meta name="description" content="这是一个 Vue 应用">—— 完全不是当前页面的真实信息。

这根本不是 bug，而是 Vue 的运行机制决定的。Vue 是客户端渲染（CSR），整个 HTML 骨架（包括<head>）在服务端只输出一次，后续所有路由跳转、组件切换，都只是在内存里操作 DOM，不会重新生成或修改<head>标签。浏览器的<head>区域就像一块“只读内存”，Vue 默认根本不碰它。所以，你在组件里写document.title = '新标题'，虽然能改掉标签页文字，但<title>标签本身在 HTML 源码里没变；你用document.querySelector('meta[name=description]').setAttribute('content', ...)，虽然能改掉 DOM，但对 SEO 爬虫和社交平台分享预览毫无意义——它们看的是服务器返回的原始 HTML，不是你 JS 运行后动态改出来的 DOM。

这就是vue-meta存在的根本原因：它不是简单地帮你调用document.title，而是在 Vue 的响应式系统和生命周期钩子之间，架起一座通往<head>的桥梁。它让<title>、<meta>、<link>这些“静态”的 HTML 元素，变成和data()里的变量一样，可以被v-model绑定、被computed计算、被watch监听、被router.beforeEach动态注入。它解决的不是一个“怎么改”的技术问题，而是一个“如何让单页应用拥有多页应用语义”的架构问题。

我第一次在项目里引入vue-meta时，以为就是个“设置标题的插件”。结果上线后发现，用户从搜索引擎点进来，看到的还是首页的 title；分享到朋友圈，卡片描述还是空的。排查了两天，才发现vue-meta的ssr: true配置项在开发环境默认是关的，而我们的 Nginx 配置又没做服务端重定向，导致爬虫直接拿到了未经过vue-meta处理的原始 HTML。这个坑让我明白：vue-meta不是“用了就灵”的魔法，它是一套需要和整个应用架构（尤其是 SSR 或预渲染策略）深度耦合的元数据管理方案。它的核心价值，从来就不只是“改个标题”那么简单。

2. vue-meta 的工作原理：从响应式数据到真实 DOM 的完整链路

理解vue-meta的原理，是避免踩坑的第一步。它不是黑箱，而是一套精巧的、分层的响应式同步机制。我们可以把它拆解成三个关键阶段：声明、收集、注入。

2.1 声明：在组件中定义元数据的“蓝图”

vue-meta的入口，是你在 Vue 组件选项中写的metaInfo对象。这不是一个普通的 data 属性，而是一个被vue-meta特别识别的“元数据蓝图”。

// ProductDetail.vue export default { name: 'ProductDetail', props: ['productId'], data() { return { product: null } }, metaInfo() { // 注意：这里必须是函数，不是对象！ // 因为要访问 this.product，而 this.product 在 created 之前是 undefined if (!this.product) { return { title: '商品详情 - 加载中', meta: [ { vmid: 'description', name: 'description', content: '正在加载商品信息...' } ] } } return { title: `${this.product.name} - ${this.product.brand}`, meta: [ { vmid: 'description', name: 'description', content: this.product.shortDesc }, { vmid: 'keywords', name: 'keywords', content: this.product.tags.join(',') } ], link: [ { vmid: 'canonical', rel: 'canonical', href: `https://example.com/product/${this.productId}` } ] } }, async created() { // 模拟 API 调用 this.product = await fetchProduct(this.productId) } }

这里有几个关键点必须注意：

metaInfo必须是函数，不能是对象。因为组件实例this在data()初始化时还不可用，而metaInfo需要在created钩子之后才能获取到this.product的值。如果写成对象，this.product就是undefined，vue-meta会拿到一个空的metaInfo。
vmid是唯一标识符。这是vue-meta的核心设计。当你在多个组件中都定义了name="description"的<meta>标签时，vue-meta无法判断哪个该保留、哪个该移除。vmid就是给每个<meta>标签打上的“身份证号”。vue-meta会根据vmid来精确地更新、替换或删除 DOM 中对应的<meta>元素，而不是粗暴地清空整个<head>再重写。这保证了性能，也避免了与其他库（比如 Google Analytics 的<script>）的冲突。
title是特例。它不需要vmid，因为<title>标签在 HTML 中是唯一的。vue-meta会直接操作document.title和<title>标签的内容。

2.2 收集：Vue 生命周期钩子中的“元数据快照”

vue-meta并不是在每次this.product变化时就立刻去操作 DOM。它利用了 Vue 的响应式系统和生命周期钩子，在最合适的时机进行“快照”和“比对”。

当一个组件被创建（created）、挂载（mounted）或更新（updated）时，vue-meta会触发一个内部的refresh方法。这个方法会：

遍历当前活跃的组件树：从根组件开始，递归查找所有定义了metaInfo的子组件。
执行metaInfo()函数：拿到每个组件返回的元数据对象。
合并与降序：将所有组件的元数据按组件树的层级关系进行合并。父组件的元数据会被子组件的覆盖（例如，父组件设了title: '首页'，子组件设了title: '详情页'，最终生效的是子组件的）。vue-meta会按照组件在 DOM 树中的深度（depth）进行排序，确保最深层的组件（即当前路由匹配的页面组件）拥有最高优先级。
生成“目标状态”：得到一个最终的、扁平化的元数据数组，这就是接下来要注入到<head>的“目标状态”。

这个过程是异步的，并且被Vue.nextTick()包裹，确保它发生在 DOM 更新之后，从而能准确地对比出哪些<meta>标签需要新增、修改或删除。

2.3 注入：DOM 操作的原子性与幂等性

最后一步，vue-meta执行真正的 DOM 操作。它不会简单地document.head.innerHTML = newMetaHTML，而是采用一种极其精细的、基于vmid的原子操作：

新增：对于targetState中有、但当前<head>中没有的vmid，创建新的<meta>或<title>标签并appendChild。
更新：对于targetState和当前<head>中都存在的vmid，只更新其content、href等属性值，不重新创建节点。
删除：对于当前<head>中有、但targetState中没有的vmid，调用removeChild移除该节点。

这种基于vmid的精确控制，带来了两个巨大好处：

性能：避免了频繁的 DOM 重排（reflow）。只修改必要的属性，而不是重建整个<head>。
安全：vue-meta只管理它自己创建的、带有vmid的标签。你手动添加的<script>、<link rel="stylesheet">或其他第三方库注入的<meta>，完全不受影响。这解决了我在一个老项目里遇到的致命问题：vue-meta曾经把百度统计的<script>标签当成“无主”元素给删掉了，导致数据上报中断。

提示：vue-meta的refresh方法是幂等的。你可以放心地在watch中多次调用它，它只会根据最新的metaInfo状态去同步 DOM，不会产生副作用。

3. 从零开始集成：Vue 2 与 Vue 3 的配置差异与避坑指南

vue-meta的安装和初始化，看似简单，但 Vue 2 和 Vue 3 的生态差异，让它成了一个“配置陷阱区”。我见过太多人卡在这一步，反复刷新页面，<title>就是不更新，最后怀疑是vue-meta的 bug，其实是版本和初始化方式没配对。

3.1 Vue 2 项目：`vue-meta@2.x`的经典集成

Vue 2 项目（使用 Options API）的标准流程如下：

# 安装 npm install vue-meta@2 # 或 yarn add vue-meta@2

// main.js import Vue from 'vue' import VueMeta from 'vue-meta' import App from './App.vue' // 关键：必须在 new Vue() 之前调用 Vue.use() Vue.use(VueMeta, { // 这个配置至关重要！它告诉 vue-meta 如何处理 title keyName: 'metaInfo', // 默认就是 'metaInfo'，可省略 // 这个是重点！它决定了 title 的更新方式 // 'data' 表示使用 document.title + <title> 标签双保险 // 'ssr' 表示只在服务端渲染时生效（如果你没做 SSR，就别选这个） title: 'data', // 这个选项决定是否在服务端渲染时也生效 // 如果你用的是 Nuxt.js，这个必须为 true // 如果你用的是纯客户端 Vue，可以设为 false 以节省一点性能 ssr: false, // 这个是高级配置，用于处理多语言站点 // 如果你的 title 是 'Hello | {{ siteName }}'，它会自动替换 {{ siteName }} // 一般项目用不到，保持默认即可 // refreshOnceOnNavigation: true }) new Vue({ render: h => h(App), }).$mount('#app')

常见坑点与解决方案：

坑1：Vue.use()放错了位置。必须在new Vue()之前。如果放在new Vue()之后，vue-meta的全局 mixin 就不会被注册，组件里的metaInfo就完全不会被识别。
坑2：ssr: true导致开发环境异常。很多教程直接抄ssr: true，但在纯客户端项目里，这会让vue-meta尝试去读取一个不存在的window.__INITIAL_META__全局变量，控制台报错，<title>也不更新。解决方案：开发环境设为false，生产环境如果做了 SSR 再设为true。
坑3：title配置错误。title: 'data'是最稳妥的选择。title: 'default'会只更新<title>标签，不更新document.title，导致某些浏览器（如旧版 Safari）标签页文字不更新。

3.2 Vue 3 项目：`vue-meta@3.x`的 Composition API 支持

Vue 3 的世界里，vue-meta的集成方式发生了根本性变化。它不再是一个Vue.use()插件，而是一个需要在createApp时显式安装的app.use()插件，并且原生支持 Composition API。

# Vue 3 项目必须安装 @3.x 版本 npm install vue-meta@3 # 或 yarn add vue-meta@3

// main.js import { createApp } from 'vue' import { createMetaManager } from 'vue-meta' import App from './App.vue' const app = createApp(App) // 关键：createMetaManager 返回一个插件函数 // 必须在 app.use() 之前调用，且只能调用一次 const metaManager = createMetaManager({ // Vue 3 版本的 keyName 默认是 'meta'，不再是 'metaInfo' // 所以你的组件里要写 meta() {}，而不是 metaInfo() {} keyName: 'meta', // title 配置同 Vue 2 title: 'data', // ssr 配置同 Vue 2 ssr: false }) // 必须在 app.mount() 之前调用 app.use(metaManager) app.mount('#app')

<!-- ProductDetail.vue (Vue 3 Composition API) --> <script setup> import { ref, onMounted } from 'vue' const product = ref(null) // Vue 3 的 metaInfo 变成了 meta，且必须是函数 const meta = () => { if (!product.value) { return { title: '商品详情 - 加载中', meta: [ { vmid: 'description', name: 'description', content: '正在加载商品信息...' } ] } } return { title: `${product.value.name} - ${product.value.brand}`, meta: [ { vmid: 'description', name: 'description', content: product.value.shortDesc } ] } } onMounted(async () => { product.value = await fetchProduct(props.productId) }) </script>

Vue 3 特有的坑点：

版本错配：vue-meta@2.x和vue-meta@3.x是完全不兼容的。如果你的项目是 Vue 3，却安装了@2.x，app.use()会直接报错TypeError: plugin is not a function。
keyName默认值变更：Vue 3 版本默认keyName是'meta'，而 Vue 2 是'metaInfo'。如果你不显式配置keyName: 'metaInfo'，那么你的组件里就必须把metaInfo()改成meta()，否则vue-meta根本找不到你的元数据。
createMetaManager的调用时机：它必须在app.use()之前调用，且只能调用一次。如果在setup()里调用，会导致重复初始化，引发各种奇怪的 DOM 同步问题。

注意：如果你的 Vue 3 项目混合使用了 Options API 和 Composition API，vue-meta@3.x依然能完美支持。你只需要确保keyName配置正确，Options API 的组件写metaInfo()，Composition API 的组件写meta()即可。

4. 实战进阶：动态路由、SSR 与 SEO 优化的终极配置

vue-meta的真正威力，体现在它与 Vue Router 和服务端渲染（SSR）的深度整合上。一个电商网站，商品 ID 是动态路由参数/product/:id，用户直接访问/product/123，此时vue-meta必须在服务端就生成正确的<title>和<meta>，否则 SEO 就彻底失败。这要求我们超越简单的客户端配置，进入一个更复杂的工程领域。

4.1 动态路由元数据：`router.beforeEach`的精准注入

对于/product/:id这样的动态路由，metaInfo函数里的this.$route.params.id在created钩子时可能还没准备好（尤其是在router.push()后立即访问）。更可靠的方式，是在路由守卫中提前获取数据，并将其注入到metaInfo中。

// router/index.js import { createRouter, createWebHistory } from 'vue-router' const routes = [ { path: '/product/:id', name: 'ProductDetail', component: () => import('../views/ProductDetail.vue'), // 在路由配置中直接定义 metaInfo 的一部分 meta: { // 这个 meta 是路由级别的，会被 vue-meta 自动合并 title: '商品详情', description: '查看最新商品信息' } } ] const router = createRouter({ history: createWebHistory(), routes }) // 全局前置守卫 router.beforeEach(async (to, from, next) => { // 如果是商品详情页，提前拉取商品数据 if (to.name === 'ProductDetail') { try { const product = await fetchProduct(to.params.id) // 将数据存入 to.meta，供组件内的 metaInfo 使用 to.meta.product = product next() } catch (error) { next('/404') } } else { next() } }) export default router

<!-- ProductDetail.vue --> <script setup> import { useRoute } from 'vue-router' const route = useRoute() // 现在可以在 meta() 中安全地访问 route.meta.product const meta = () => { const product = route.meta.product if (!product) { return { title: '商品详情 - 加载中' } } return { title: `${product.name} - ${product.brand}`, meta: [ { vmid: 'description', name: 'description', content: product.shortDesc } ] } } </script>

这种方式的优势在于：数据获取和元数据声明完全解耦。路由守卫负责“数据准备”，组件负责“数据展示和元数据映射”。这让你可以轻松地为同一个组件复用不同的数据源（比如从 Vuex Store 读取，或从 Pinia Store 读取），而meta()函数的逻辑完全不变。

4.2 SSR 集成：Nuxt.js 与 Vite + Vue SSR 的配置要点

如果你的项目已经采用了 Nuxt.js，恭喜你，vue-meta的 SSR 支持是开箱即用的。Nuxt 2 内置了vue-meta@2，Nuxt 3 则内置了vue-meta@3。你只需要在页面组件中写好head()或useHead()，Nuxt 会自动在服务端渲染时执行它。

<!-- Nuxt 3 页面 --> <script setup> useHead({ title: '我的 Nuxt 3 网站', meta: [ { name: 'description', content: '这是一个由 Nuxt 3 驱动的网站' } ], link: [ { rel: 'canonical', href: 'https://example.com/' } ] }) </script>

但对于自建的 Vite + Vue SSR 项目，vue-meta的 SSR 配置就复杂得多。你需要手动在服务端入口文件中，调用metaManager.render()方法。

// server-entry.js import { createSSRApp } from 'vue' import { createMetaManager } from 'vue-meta' import App from './App.vue' // 创建 SSR App const app = createSSRApp(App) // 创建 metaManager const metaManager = createMetaManager({ ssr: true }) app.use(metaManager) // 渲染应用 const { app: ssrApp, render } = await renderToString(app) // 关键：获取渲染后的 meta 数据 const meta = metaManager.render() // 将 meta 数据注入到 HTML 模板中 const html = ` <!DOCTYPE html> <html ${meta.htmlAttrs}> <head> ${meta.head} <title>${meta.title}</title> </head> <body> <div id="app">${ssrApp}</div> <script>window.__INITIAL_META__ = ${JSON.stringify(meta)}</script> </body> </html> `

SSR 配置的核心难点在于htmlAttrs和bodyAttrs。vue-meta允许你通过htmlAttrs设置<html lang="zh-CN">，通过bodyAttrs设置<body class="dark-mode">。这些属性必须在服务端就注入，否则客户端 Hydration 时会出现不一致（Mismatch），导致 Vue 报错并强制重新渲染，用户体验极差。

4.3 SEO 优化实战：结构化数据（Schema.org）与 Open Graph 的注入

vue-meta的能力远不止于<title>和<meta name="description">。它同样可以注入<script type="application/ld+json">结构化数据和<meta property="og:title">Open Graph 标签，这对提升搜索结果的丰富摘要（Rich Snippet）和社交媒体分享效果至关重要。

// ProductDetail.vue const meta = () => { const product = route.meta.product if (!product) return {} // 结构化数据：Google 搜索结果会显示价格、评分等 const schema = { "@context": "https://schema.org/", "@type": "Product", "name": product.name, "image": product.image, "description": product.shortDesc, "offers": { "@type": "Offer", "price": product.price, "priceCurrency": "CNY" } } // Open Graph：微信、微博、Facebook 分享时的卡片 const og = [ { vmid: 'og:title', property: 'og:title', content: product.name }, { vmid: 'og:description', property: 'og:description', content: product.shortDesc }, { vmid: 'og:image', property: 'og:image', content: product.image }, { vmid: 'og:url', property: 'og:url', content: `https://example.com/product/${product.id}` } ] return { title: `${product.name} - ${product.brand}`, meta: [ { vmid: 'description', name: 'description', content: product.shortDesc }, ...og ], script: [ { vmid: 'schema', type: 'application/ld+json', innerHTML: JSON.stringify(schema) } ] } }

注意：script标签的注入需要vue-meta@3.2.0+或vue-meta@2.4.0+版本才支持。低版本不支持innerHTML，你需要手动在index.html中预留一个<script id="schema"></script>，然后在mounted钩子里用document.getElementById('schema').textContent = JSON.stringify(schema)来填充。

5. 故障排查：那些让你抓狂的“元数据不更新”问题全解析

vue-meta的故障，往往不是代码写错了，而是对它的运行机制和 Vue 的生命周期理解有偏差。下面是我在线上项目中遇到的、最让人抓狂的五个问题，以及完整的排查链路。

5.1 问题：页面跳转后`<title>`不变，但控制台没有任何报错

排查链路：

第一步：确认metaInfo/meta是否被调用。在metaInfo()函数第一行加console.log('metaInfo called')。如果没打印，说明vue-meta的 mixin 根本没注册成功，回到第 3 节检查Vue.use()或app.use()的调用顺序和位置。
第二步：确认metaInfo返回值是否为空或undefined。在return语句前加console.log('metaInfo result:', result)。如果result是{}或null，说明你的this.product或route.meta.product是undefined，数据没加载完成。解决方案：在metaInfo中加入加载态的 fallback，如上面的'加载中'示例。
第三步：确认vmid是否冲突。打开浏览器开发者工具，切换到 Elements 面板，展开<head>，找到<title>标签。如果它上面有>meta: [ // 全局 Header 组件 { vmid: 'header-description', name: 'description', content: '这是网站的全局描述' }, // 商品详情页组件 { vmid: 'product-description', name: 'description', content: product.shortDesc } ]
5.4 问题：在router.push()后，metaInfo没有被重新计算
根因分析：vue-meta的refresh是在组件的updated钩子中触发的。如果router.push()后，目标组件是复用的（<keep-alive>缓存），那么updated钩子不会被触发，metaInfo就不会重新执行。
解决方案：强制监听$route变化。在组件中添加一个watch：
```
// Vue 2 watch: { '$route' (to, from) { // 当路由变化时，强制刷新 meta this.$meta().refresh() } }
```
```
// Vue 3 Composition API import { watch } from 'vue' import { useRoute } from 'vue-router' const route = useRoute() watch(() => route.path, () => { // 强制刷新 meta metaManager.refresh() })
```
5.5 问题：vue-meta和vue-router的scrollBehavior冲突，页面滚动到顶部时<title>闪烁
现象描述：用户从列表页点击进入详情页，页面滚动到顶部，但<title>会先闪一下旧的标题，再变成新的标题。
根因分析：scrollBehavior的next()回调执行时机，早于vue-meta的refresh。scrollBehavior把页面滚上去后，vue-meta才开始更新<title>，造成了视觉上的“闪烁”。
解决方案：在scrollBehavior中，等待vue-meta刷新完成后再滚动。这需要vue-meta提供一个refresh的 Promise。
```
// router/index.js router.beforeEach((to, from, next) => { // 等待 vue-meta 刷新完成 next(vm => { // vm 是 Vue 实例 if (vm.$meta) { vm.$meta().refresh().then(() => { // 刷新完成后，再执行滚动 window.scrollTo(0, 0) }) } else { window.scrollTo(0, 0) } }) })
```
对于 Vue 3，可以使用metaManager.refresh().then(...)。
这些问题的排查，本质上都是在梳理一条数据流：路由变化 -> 组件激活 -> 数据获取 -> metaInfo 计算 -> DOM 同步 -> 浏览器渲染。任何一个环节断掉，元数据就会失效。掌握这条链路，你就拥有了诊断所有vue-meta问题的“X光机”。
6. 替代方案与未来演进：useHead、unhead与vue-meta的终局
vue-meta是 Vue 生态中元数据管理的奠基者，但它并非一成不变。随着 Vue 3 Composition API 的普及和现代构建工具的发展，一批更轻量、更现代化的替代方案正在崛起。了解它们，不是为了立刻抛弃vue-meta，而是为了在技术选型时，做出更面向未来的决策。
6.1@vueuse/core的useHead：轻量级的 Composition API 解决方案
如果你的项目已经重度依赖@vueuse/core（一个提供大量 Vue 3 Composition API 工具函数的库），那么useHead是一个非常优雅的选择。它没有vue-meta那么庞大的功能集，但足够解决 90% 的日常需求，且体积小、API 简洁。
```
npm install @vueuse/core
```
```
<script setup> import { useHead } from '@vueuse/core' const product = ref(null) // useHead 接收一个响应式对象 useHead(computed(() => ({ title: product.value ? `${product.value.name} - ${product.value.brand}` : '加载中', meta: [ { name: 'description', content: product.value ? product.value.shortDesc : '正在加载...' } ] })) onMounted(async () => { product.value = await fetchProduct(props.productId) }) </script>
```
优势：
- 极致轻量：@vueuse/core的useHead只有几百行代码，打包体积几乎可以忽略。
- Composition API 原生：与ref、computed、watch完美融合，无需学习额外的metaInfo语法。
- 无侵入式：它不修改 Vue 的全局行为，只是一个独立的组合式函数。
局限：
- 不支持 SSR：useHead是纯客户端的，无法在服务端渲染时生成<head>。
- 不支持vmid：它采用的是“覆盖式”更新，每次调用useHead()都会用新值完全替换<head>中对应类型的标签。如果你有多个组件都需要设置<meta name="description">，它无法像vue-meta那样智能地合并，只能以最后一个useHead()的调用为准。
6.2unhead：下一代、跨框架的元数据管理器
unhead是vue-meta的精神继承者，由同一作者开发，但目标是成为一个跨框架、零依赖、SSR-first的元数据解决方案。它不仅支持 Vue，还支持 Nuxt、SolidJS、甚至 React（通过@unhead/react）。它的设计理念是“Head as a Service”。
```
npm install unhead
```
```
<script setup> import { useHead } from 'unhead' const product = ref(null) useHead(() => ({ title: product.value ? `${product.value.name} - ${product.value.brand}` : '加载中', meta: [ { name: 'description', content: product.value ? product.value.shortDesc : '正在加载...' } ], // unhead 的强大之处：它原生支持 SSR，并且可以定义“服务端优先”的 head // 例如，你可以为不同设备定义不同的 viewport htmlAttrs: { lang: 'zh-CN' } })) </script>
```
unhead的核心创新：
- resolveHeadAPI：它允许你定义一个“头信息解析器”，这个解析器可以是同步的，也可以是异步的（async），并且可以接收context参数（包含route、event等），让你能写出比vue-meta更灵活的元数据逻辑。
- unhead的auto-inject模式：它可以在构建时自动扫描你的组件，找到所有useHead调用，并在服务端渲染时自动执行它们，无需手动配置。
- unhead的devtools支持：它提供了专门的浏览器开发者工具扩展，可以实时查看和调试当前页面的所有<head>标签，以及它们是由哪个组件注入的。
6.3vue-meta的终局：一个稳定、成熟的“企业级”选择
vue-meta不会消失，它会继续存在，就像 jQuery 不会因为 React 的出现而消亡一样。它的定位非常清晰：一个为大型、复杂、需要强 SSR 支持的 Vue 2/3 企业级应用而生的、功能完备的元数据管理库。
如果你的项目：
- 已经是 Vue 2，并且短期内没有升级计划；
- 是一个大型的、多团队协作的 Vue 3 项目，对稳定性、向后兼容性和详细的文档有极高要求；
- 需要与 Nuxt 2 深度集成，并且依赖其丰富的 SSR 配置选项；
那么vue-meta依然是最稳妥、最省心的选择。它的 API 虽然不如useHead那么“酷”，但它的健壮性、社区支持和文档完善度，是新兴库短期内难以企及的。
我个人的经验是：新项目，尤其是 Vue 3 项目，我会毫不犹豫地选择unhead。它代表了未来，API 设计更先进，SSR 支持更原生。而对于维护中的老项目，vue-meta依然是那个值得信赖的“老伙计”，只要配置得当，它能稳稳地跑上五年。
最后再分享一个小技巧：无论你用vue-meta、useHead还是unhead，在开发时，一定要养成一个习惯——在index.html的<head>中，为每一个你打算动态修改的标签，都