如何让Vue3+Vite项目SEO友好？解决Meta标签页面源码不显示问题

一、修复vite-plugin-ssg下@unhead/vue Meta预渲染失效的问题 #

以下是具体的排查和解决步骤：

• 校验依赖兼容性：确保vite-plugin-ssg和@unhead/vue使用最新稳定版，避免版本冲突导致预渲染逻辑不兼容。
• 正确集成Unhead到SSG流程：在Vite配置文件中，将Unhead实例注入SSG的应用初始化流程，并在HTML转换阶段手动渲染head内容。示例配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { ssg } from 'vite-plugin-ssg'
import { createHead } from '@unhead/vue'

export default defineConfig({
  plugins: [
    vue(),
    ssg({
      // 初始化时挂载Unhead
      setup({ app }) {
        const head = createHead()
        app.use(head)
      },
      // 预渲染时将head内容注入HTML
      transformHtml: async (html, route, context) => {
        const head = context.app._instance.appContext.config.globalProperties.$head
        if (head) {
          const { html: headHtml } = await head.renderToString()
          return html.replace('</head>', `${headHtml}</head>`)
        }
        return html
      }
    })
  ]
})

• 避免在客户端钩子中设置Meta：页面组件中的Meta标签需通过useHead或useMeta直接声明，不能放在onMounted等仅客户端执行的钩子中——预渲染阶段不会执行这类钩子，相关设置会被忽略。示例组件代码：

<template>
  <div class="home-page">首页内容</div>
</template>

<script setup>
import { useHead } from '@unhead/vue'

// 直接在setup中设置Meta，预渲染时会被收集
useHead({
  title: '首页 - 我的网站',
  meta: [
    { name: 'description', content: '这是我的网站首页' },
    { property: 'og:title', content: '首页 - 我的网站' }
  ]
})
</script>

• 重新构建验证：执行npm run generate（或项目对应的预渲染构建命令），打开dist目录下的静态HTML文件，检查<head>标签内是否包含预期的Meta内容。

二、Vue.js的SEO能力说明 #

Vue.js核心是客户端渲染（CSR）框架，默认构建的页面只有空根容器，爬虫无法读取动态渲染的内容和Meta标签，原生状态下SEO表现不佳。但通过以下方式可完全解决SEO问题：

• 预渲染（SSG）：构建阶段为每个路由生成包含完整内容和Meta标签的静态HTML，适合内容相对静态的网站（如官网、博客）。
• 服务端渲染（SSR）：每次请求时在服务端渲染完整HTML并返回，适合内容动态更新的网站（如电商后台、资讯平台）。
  社区提供了vite-plugin-ssg、vue-server-renderer等工具支持这两种方案，无需依赖Nuxt也能实现SEO友好的Vue项目。

三、是否需要切换到Nuxt.js？ #

是否切换取决于项目需求和开发成本：

• 无需强制切换的场景：
  • 当前项目规模较大，重构成本高
  • 仅需基础预渲染能力，且vite-plugin-ssg的问题已解决
  • 团队更熟悉原生Vue+Vite的开发流程
• 建议切换的场景：
  • 需要开箱即用的SSR/SSG、路由、状态管理等全栈能力，不想手动配置复杂构建流程
  • 项目需要频繁SEO优化、动态内容渲染，或需部署服务端逻辑
  • 团队熟悉Nuxt生态，能快速上手开发

内容的提问来源于stack exchange，提问作者aseel