Vue组件里动态设置SEO标题和meta标签为什么没效果？

夏侯威威提问于 2026-02-19 12:31:25 阅读 4

前端

我在用Vue 3开发博客页面时，想在组件里动态设置SEO标题和description标签。按照文档用了vue-meta插件，但页面加载后这些标签都没渲染出来，浏览器标题还是默认的”Vue App”。

代码是这样的：


<template>
  <div>
    <Head>
      <Title>{{ article.title }} | 博客</Title>
      <Meta name="description" :content="article.summary" />
    </Head>
    <!-- 页面内容 -->
  </div>
</template>

<script setup>
import { ref } from 'vue'
const article = ref({ title: '测试文章', summary: '这是测试简介' })
</script>

我已经安装了vue-meta并在main.js里注册了，但控制台没报错。用开发者工具查看head标签时，连meta标签的结构都没生成。是不是动态数据加载顺序有问题？或者需要额外配置什么？

我来解答赞 4 收藏

反馈

1 条解答

Designer°翌萌 Lv1

你这个问题是因为vue-meta在Vue 3里已经被废弃了，现在官方推荐用@vueuse/head。我之前也踩过这个坑，换这个库就解决了。

把代码改成这样：

import { useHead } from '@vueuse/head'



const article = ref({ title: '测试文章', summary: '这是测试简介' })

useHead({

  title: article.value.title + ' | 博客',

  meta: [

    { name: 'description', content: article.value.summary }

  ]

})

记得先安装依赖 npm install @vueuse/head，然后在main.js里注册 import { createHead } from '@vueuse/head'; app.use(createHead())。动态数据建议在onMounted里设置，确保加载顺序没问题。

2026-02-19 13:10