Vue3 SPA 支持 SEO 终极总结极简 4 步直接照做我给你最精简、最不绕弯、可直接存档的版本包含渲染服务 meta 标签 sitemap你照着做就能 100% 支持 SEOGoogle / 百度都收录。一、你必须做的 4 件事复制就能用1加页面 Meta 标题、描述代码里必须加用最轻量的vueuse/head每个页面独立设置 SEO 信息。安装npmi vueuse/headmain.js 引入import{createHead}fromvueuse/headapp.use(createHead())每个页面.vue 里写import{useHead}fromvueuse/headuseHead({title:页面标题,meta:[{name:description,content:页面描述80-160字},{name:keywords,content:关键词1,关键词2}]})2启动 Puppeteer 渲染服务让爬虫看到完整 HTML不改 Vue 代码只需要跑一个渲染服务。render-service.js直接复制constexpressrequire(express);constpuppeteerrequire(puppeteer);constappexpress();letbrowser;(async(){browserawaitpuppeteer.launch({headless:new,args:[--no-sandbox]});})();app.get(/render,async(req,res){try{consturlreq.query.url;constpageawaitbrowser.newPage();awaitpage.goto(url,{waitUntil:networkidle2});consthtmlawaitpage.content();awaitpage.close();res.send(html);}catch(e){res.send();}});app.listen(26666);运行noderender-service.js3Nginx 转发爬虫到渲染服务核心爬虫访问 → 自动返回完整 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.xmlSEO 必交搜索引擎直接用我给你的接口生成访问http://localhost:26666/sitemap?urlhttps://你的网站.com生成后上传到网站根目录去Google Search Console / 百度搜索资源平台提交即可。二、最终效果你最关心的爬虫能抓到完整 HTML每个页面有独立标题、描述、关键词有 sitemap 引导收录Vue 项目一行代码不改结构用户访问速度不受影响Google / 百度 正常收录、排名三、超级精简总结直接存档Vue3 SPA 做 SEO 只需要 4 步每个页面加 title / description / keywords代码里跑 Puppeteer 渲染服务Nginx 转发爬虫生成 sitemap.xml 并提交做完这 4 步你的 Vue3 网站SEO 完全正常和传统网站无区别。需要我把这 4 步做成一份一页纸 PDF 存档版吗干净、可打印、随时看。
Vue3 SPA 支持 SEO 终极总结
Vue3 SPA 支持 SEO 终极总结极简 4 步直接照做我给你最精简、最不绕弯、可直接存档的版本包含渲染服务 meta 标签 sitemap你照着做就能 100% 支持 SEOGoogle / 百度都收录。一、你必须做的 4 件事复制就能用1加页面 Meta 标题、描述代码里必须加用最轻量的vueuse/head每个页面独立设置 SEO 信息。安装npmi vueuse/headmain.js 引入import{createHead}fromvueuse/headapp.use(createHead())每个页面.vue 里写import{useHead}fromvueuse/headuseHead({title:页面标题,meta:[{name:description,content:页面描述80-160字},{name:keywords,content:关键词1,关键词2}]})2启动 Puppeteer 渲染服务让爬虫看到完整 HTML不改 Vue 代码只需要跑一个渲染服务。render-service.js直接复制constexpressrequire(express);constpuppeteerrequire(puppeteer);constappexpress();letbrowser;(async(){browserawaitpuppeteer.launch({headless:new,args:[--no-sandbox]});})();app.get(/render,async(req,res){try{consturlreq.query.url;constpageawaitbrowser.newPage();awaitpage.goto(url,{waitUntil:networkidle2});consthtmlawaitpage.content();awaitpage.close();res.send(html);}catch(e){res.send();}});app.listen(26666);运行noderender-service.js3Nginx 转发爬虫到渲染服务核心爬虫访问 → 自动返回完整 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.xmlSEO 必交搜索引擎直接用我给你的接口生成访问http://localhost:26666/sitemap?urlhttps://你的网站.com生成后上传到网站根目录去Google Search Console / 百度搜索资源平台提交即可。二、最终效果你最关心的爬虫能抓到完整 HTML每个页面有独立标题、描述、关键词有 sitemap 引导收录Vue 项目一行代码不改结构用户访问速度不受影响Google / 百度 正常收录、排名三、超级精简总结直接存档Vue3 SPA 做 SEO 只需要 4 步每个页面加 title / description / keywords代码里跑 Puppeteer 渲染服务Nginx 转发爬虫生成 sitemap.xml 并提交做完这 4 步你的 Vue3 网站SEO 完全正常和传统网站无区别。需要我把这 4 步做成一份一页纸 PDF 存档版吗干净、可打印、随时看。
