如何將 Vite SPA 加上 Prerender：讓 AI 爬蟲讀得到內容

Vite SPA 加 Prerender 共 7 步：安裝 @prerenderer/rollup-plugin 與 puppeteer、列出路由、修改 vite.config.ts、確保 react-helmet-async 已啟用、build 驗證輸出 HTML、curl 確認爬蟲可讀、部署。整體 1-2 個工作日完成。

純 CSR 的 Vite SPA 對 GPTBot、ClaudeBot、PerplexityBot 等 AI 爬蟲是隱形的，因為它們多半不執行 JavaScript。生成式搜尋引擎優化（GEO）的第一步就是讓內容靜態化，本教學以 puppeteer 方案示範完整流程。

步驟

  1. 安裝 prerender 相關依賴：執行 npm install --save-dev @prerenderer/rollup-plugin @prerenderer/renderer-puppeteer puppeteer。若 puppeteer 安裝失敗（缺 Chromium），改用 @prerenderer/renderer-jsdom。
  2. 建立路由清單檔案：新增 scripts/get-all-routes.ts 匯出所有需要預渲染的路徑（含 /、/blog、/feat/* 等動態頁），讓 build 階段能取得完整路由清單。（動態路由（/blog/:slug）需從資料來源遍歷產生具體 URL。）
  3. 修改 vite.config.ts 加入 PrerenderPlugin：import PrerenderPlugin from '@prerenderer/rollup-plugin'，在 plugins 陣列加入 PrerenderPlugin({ routes, renderer, rendererOptions: { renderAfterTime: 2000 } })，僅在 production 模式啟用。
  4. 確認 react-helmet-async 正確設置：App 根層用 HelmetProvider 包裹，每個頁面用 <Helmet> 設定 title、meta、JSON-LD，prerender 才能正確提取並寫入靜態 HTML。
  5. 執行 npm run build 並檢查 dist：build 完成後 dist 目錄下每個路由都會產生對應 index.html。打開檔案確認 <head> 含正確 meta，<body> 含完整內容。
  6. curl 驗證 AI 爬蟲可讀內容：本地啟 vite preview 或部署後，執行 curl -A 'GPTBot' https://yoursite.com/feat/faq | grep '生成式搜尋引擎優化'，確認 AI 爬蟲視角能讀到關鍵字。
  7. 部署並到 GSC 提交 sitemap：推上 Vercel/Netlify 等靜態託管，到 Google Search Console 提交 sitemap.xml 並請求重新檢索，1-2 週後可見 AI 引用顯著上升。

相關內容