Vue 3 带来的组合式 API 和响应式系统让前端开发更灵活，但也给 SEO 留下了一个常见难题：浏览器端渲染的单页应用，初始 HTML 往往只有一个挂载节点和一堆脚本，真正的内容需要执行 JavaScript 后才能出现。搜索引擎爬虫虽然已经能执行部分脚本，但渲染深度、等待时间和资源预算都有限，依赖客户端渲染的页面很容易被漏掉或降权。

一、SEO 问题的根源：客户端渲染的空壳页面

Vue 3 默认使用客户端渲染模式。当用户访问一个地址时，服务器返回的 HTML 大致是这样的：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Vue App</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
</body>
</html>

这段 HTML 里没有任何业务内容，所有文章正文、商品信息、用户数据都要等 Vue 运行时加载并执行后才能插入到 <div id="app"> 中。爬虫在抓取阶段如果只读取服务器返回的原始 HTML，就会认为这个页面是空的。即使部分爬虫支持执行 JavaScript，也会受到超时、资源队列、动态加载接口速度等因素影响，很难保证像普通静态页一样被稳定收录。

此外，客户端路由还会带来第二个问题：不同 URL 返回的 HTML 完全一样。例如 /article/1 和 /article/2 的初始文档标题、描述都是同一个默认值，爬虫无法区分页面主题，更不会针对不同关键词建立索引。因此，想要提升 Vue 3 项目的搜索可见度，核心工作就是让服务器端或构建阶段输出包含实际内容的 HTML，并让 head 信息随路由同步变化。

二、SSR 方案：在服务端生成完整 HTML

SSR（Server Side Rendering）的思路是在服务器上运行 Vue 组件，提前把组件渲染成 HTML 字符串，再把字符串注入模板返回给浏览器。Vue 3 官方提供了 @vue/server-renderer 包，可以配合 Node.js 服务使用。下面是一个最小化的渲染函数：

import { createSSRApp } from 'vue'
import { renderToString } from '@vue/server-renderer'
export async function renderPage() {
  const app = createSSRApp({
    data() {
      return {
        title: 'Vue 3 SSR 优化指南',
        content: '这是一段在服务端渲染出来的正文内容。'
      }
    },
    template: `<div>
      <h1>{{ title }}</h1>
      <p>{{ content }}</p>
    </div>`
  })
  const html = await renderToString(app)
  return html
}

这段代码会输出包含 <h1> 和 <p> 标签的 HTML 片段，不再依赖浏览器执行 JS。把它拼接进完整页面的 body 后，爬虫就能直接读取到核心内容。对于多路由应用，服务器需要根据请求 URL 调用对应的路由组件，并在渲染前完成数据请求，例如用 await fetchData(route) 获取文章内容，再返回完整 HTML。

但原生 SSR 的实现成本不低。你需要处理路由匹配、状态同步、客户端激活（hydrate）、错误处理、缓存策略等问题。因此实际项目中更推荐使用 Nuxt 3 这类上层框架。Nuxt 3 基于 Vue 3 和 Nitro 服务端引擎，把 SSR、文件路由、数据获取、SEO 管理都封装好了。启用 SSR 后，每次请求都会返回包含真实内容的 HTML，同时浏览器端继续接管交互，保持单页应用体验。

SSR 方案的优势明显：首屏速度快，社交分享抓取友好，对动态内容支持最好。代价是服务器资源消耗上升，每次请求都要执行渲染逻辑；开发复杂度也会增加，需要关注服务端与客户端环境差异，例如 window、document 对象只能出现在客户端生命周期中。

三、预渲染方案：让静态路由提前产出 HTML

如果你的网站内容更新不频繁，比如官网、产品介绍、帮助文档、博客文章等，预渲染（Prerendering）是比 SSR 更轻量的选择。它在构建阶段启动一个无头浏览器，依次访问指定路由，把每个页面的最终 HTML 保存为静态文件。部署时直接把生成的目录放到 CDN 或静态服务器上即可，不需要运行 Node 服务。

Vue 3 项目中可以使用 vite-plugin-prerender 插件完成这项工作。配置里列出需要预渲染的路由，插件会在 Vite 构建结束后逐个生成静态页：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import prerender from 'vite-plugin-prerender'
export default defineConfig({
  plugins: [
    vue(),
    prerender({
      routes: ['/', '/pricing', '/blog/vue-3-seo'],
      renderer: './renderer.ts'
    })
  ]
})

这里 routes 数组就是需要生成 HTML 的路径。插件会使用 Puppeteer 等工具模拟浏览器访问这些路由，等待页面异步数据加载完成后再保存快照。对于带有固定参数的动态路由，比如某几篇文章的 ID，可以在构建脚本里生成路由列表传入，而不是手动维护几十条。

预渲染的瓶颈也很明显：它不适合内容海量或频繁变化的项目。每新增一篇文章，都需要重新构建并生成对应页面。如果路由数量达到几千条，构建时间会显著增加。另一个常见问题是构建环境需要能访问真实接口，否则异步数据请求失败，预渲染出的页面仍然缺内容。解决方式是在构建阶段准备一份 mock 数据或连接预发环境，确保无头浏览器能拿到数据。

四、meta 标签管理：让每个页面拥有独立 head 信息

不管是 SSR 还是预渲染，如果所有页面使用同一套 <title> 和 <meta name="description">，SEO 收益仍然有限。Vue 3 项目中推荐使用 @vueuse/head 或 Nuxt 3 内置的 useHead 组合式函数来管理 head 内容。它们的原理是声明式地把标题、描述、Open Graph 信息写入响应式状态，当路由变化时自动同步到 document.head。

以下示例展示了在普通 Vue 3 项目中接入 @vueuse/head 的方式。首先在入口文件注册插件：

import { createApp } from 'vue'
import { createHead } from '@vueuse/head'
import App from './App.vue'
const app = createApp(App)
const head = createHead()
app.use(head)
app.mount('#app')

然后在组件中使用 useHead 声明当前页面需要的 head 内容：

import { useHead } from '@vueuse/head'
export default {
  setup() {
    useHead({
      title: '关于我们 - 品牌名称',
      meta: [
        { name: 'description', content: '了解团队背景、发展历程和服务理念。' },
        { property: 'og:title', content: '关于我们 - 品牌名称' },
        { property: 'og:description', content: '了解团队背景、发展历程和服务理念。' }
      ]
    })
  }
}

当用户从首页切换到关于页时，useHead 会自动替换 <title> 标签内容，并更新对应的 meta 标签。如果不同页面存在相互覆盖的标签，它也会根据优先级进行合并或清除，避免多个页面残留错误的描述信息。需要特别注意的是，JSON-LD 结构化数据也可以放进 head 管理，例如在 <script> 标签中注入 application/ld+json，帮助搜索引擎识别文章、产品、面包屑等实体类型。

在 Nuxt 3 中配置全局默认 head 非常方便，可以在 nuxt.config.ts 中统一设置标题模板和默认 meta，再通过页面级 useHead 覆盖。对于动态标题，可以写成 titleTemplate: '%s - 站点名'，各页面只传自己的标题部分即可。

五、方案对比与选型建议

SSR 和预渲染解决的是内容可见性问题，meta 管理解决的是页面描述准确性问题。两者并不互斥，实际项目中经常组合使用。以内容更新频率、路由数量、服务器资源和团队维护成本作为判断依据，可以分成几种情况：

• 内容频繁更新、用户个性化强：优先选择 Nuxt 3 SSR，配合缓存策略降低服务器压力。
• 静态内容为主、路由数量有限：使用预渲染插件生成静态 HTML，部署简单，SEO 效果稳定。
• 混合场景：将营销页、文档页预渲染，将用户后台、动态数据页保持客户端渲染或走 SSR。
• 已有大型 SPA 不想重构：可以先从 meta 标签管理入手，再逐步引入预渲染覆盖重点页面。

选型时还要考虑团队对 Node.js 服务端部署的熟悉程度。SSR 需要维护服务器进程、处理内存和并发，如果团队缺少运维经验，预渲染是更稳妥的起点。同时，不要忽略性能监控。SSR 页面虽然首屏快，但如果服务端渲染耗时过长，会拖慢 TTFB；预渲染页面虽然只是静态文件，但路由数量过多会增加部署体积和缓存失效成本。

最后，SEO 优化不只是技术实现。规范使用标题层级、给图片添加 alt 文本、生成站点地图、配置 robots.txt、保持 URL 稳定同样是基础工作。把 SSR 或预渲染与这些细节结合起来，Vue 3 项目完全可以获得与传统多页应用相当的搜索表现。