🔥 Vue3 SPA 支持 SEO 终极总结（极简 4 步，直接照做）

我给你最精简、最不绕弯、可直接存档的版本，包含：渲染服务 + meta 标签 + sitemap，你照着做就能 100% 支持 SEO（Google / 百度都收录）。

---

一、你必须做的 4 件事（复制就能用）

1）加页面 Meta 标题、描述（代码里必须加）

用最轻量的 @vueuse/head，每个页面独立设置 SEO 信息。

安装：

npm i @vueuse/head

main.js 引入：

import { createHead } from '@vueuse/head'
app.use(createHead())

每个页面.vue 里写：

import { useHead } from '@vueuse/head'

useHead({
  title: "页面标题",
  meta: [
    { name: "description", content: "页面描述，80-160字" },
    { name: "keywords", content: "关键词1,关键词2" }
  ]
})

---

2）启动 Puppeteer 渲染服务（让爬虫看到完整 HTML）

不改 Vue 代码，只需要跑一个渲染服务。

render-service.js（直接复制）：

const express = require('express');
const puppeteer = require('puppeteer');
const app = express();

let browser;
(async () => {
  browser = await puppeteer.launch({ headless: 'new', args: ['--no-sandbox'] });
})();

app.get('/render', async (req, res) => {
  try {
    const url = req.query.url;
    const page = await browser.newPage();
    await page.goto(url, { waitUntil: 'networkidle2' });
    const html = await page.content();
    await page.close();
    res.send(html);
  } catch (e) { res.send(''); }
});

app.listen(26666);

运行：

node render-service.js

---

3）Nginx 转发爬虫到渲染服务（核心！）

爬虫访问 → 自动返回完整 HTML
用户访问 → 正常走 Vue 前端
零侵入、零修改项目

Nginx 配置：

location / {
  if ($http_user_agent ~* "bot|spider|baidu|google|bing") {
    proxy_pass http://127.0.0.1:26666/render?url=$scheme://$host$request_uri;
    break;
  }
  root /dist;
  try_files $uri $uri/ /index.html;
}

---

4）生成 sitemap.xml（SEO 必交搜索引擎）

直接用我给你的接口生成：

访问：

http://localhost:26666/sitemap?url=https://你的网站.com

生成后上传到网站根目录，去 Google Search Console / 百度搜索资源平台 提交即可。

---

二、最终效果（你最关心的）

1. 爬虫能抓到完整 HTML
2. 每个页面有独立标题、描述、关键词
3. 有 sitemap 引导收录
4. Vue 项目一行代码不改结构
5. 用户访问速度不受影响
6. Google / 百度 正常收录、排名

---

三、超级精简总结（直接存档）

Vue3 SPA 做 SEO 只需要 4 步

1. 每个页面加 title / description / keywords（代码里）
2. 跑 Puppeteer 渲染服务
3. Nginx 转发爬虫
4. 生成 sitemap.xml 并提交

做完这 4 步，你的 Vue3 网站 SEO 完全正常，和传统网站无区别。

---

查看是否支持seo

(1) # 模拟百度蜘蛛请求首页，直接打印原始服务端返回html
curl -A “Mozilla/5.0 (compatible; Baiduspider/2.0; +http://www.baidu.com/search/spider.html)” https://www.gbcom.com.cn/

(2)