08 官網架構與 SEO／AI SEO／GEO 做法

這份回答三個問題：官網用什麼框架、怎麼讓搜尋引擎與 AI 搜尋（ChatGPT、Perplexity、Claude、Gemini）都看得到內容、怎麼接商業分析。結論是留 Lovable 拉回來的 TanStack Start，開 prerender 出純靜態檔；部署與 SEO／GEO 配備照公司已上線的 design-home-fe 做法，檔案改寫成 TanStack 的對應寫法。

決策者在意的是「不要順著單一提問改答案」，所以把需求攤開、三個候選者用同一套標準各打一次分。◎ 強、○ 可、△ 弱。

需求清單（來自決策者原話與 02 網站地圖）：

對照：

怎麼讀這張表與最後的決定：

• 三個框架在 R1～R3（SEO、GEO、分析）都是「內文在 HTML 裡」，差別只在配備要不要自己補；對 B2B 官網的排名影響不大。
• Next 的優勢在 R4、R8（與 design-home 同一條生產線）；Astro 在 R1、R6、R9（為內容站而生）；TanStack Start 在 R5（零轉換成本）。
• 決策者最終選 TanStack Start：骨架已經在跑、文案與版型都在，轉換只是換底不加價值；R4（Payload）之後接時走 REST 即可；R6、R8 的風險（框架新、要多懂一種）接受，出事時可把 vite.config.ts 攤平、脫離 Lovable 包裝層。一次轉換曾派出（A1）並在中途停掉，工作區已還原。

資料來源（2026-10 查證）：TanStack Start 1.0 is Stable、State of JavaScript 2025: Meta-Frameworks、Astro vs Next.js for Static Sites: 2026 Corporate Website Stack Decision Guide、Astro vs Next.js (2026): Real Benchmarks、Astro 官方 Payload CMS 指南、What is TanStack Start (Cloudflare)。

估工：不用搬；開 prerender 半天，SEO 十項約三天。

// vite.config.ts（@lovable.dev/vite-tanstack-config 的 defineConfig 允許透傳 tanstackStart 設定）
export default defineConfig({
  tanstackStart: {
    server: { entry: "server" },
    prerender: { enabled: true, crawlLinks: true, autoSubfolderIndex: true },
  },
});

npm run build 後 .output/public/ 下每個網址一支 index.html；動態路由（指南 $slug）要在 prerender.pages 或路由的 loader 可列舉時由 crawlLinks 從清單頁連結爬到。Cloudflare Pages 輸出目錄填 .output/public。

Pages 上誰能 call API：

之後要轉 Workers 怎麼辦：nitro 本來就以 cloudflare 為預設目標，.output/server/ 已是 Workers 可跑的格式，關掉 prerender 改部署 server 即可，頁面程式碼不動。Pages Functions 等同把 Workers 塞回來，不用。

會需要轉 Workers 的只有兩種情況，目前都沒有：登入後才看得到或每個訪客不同的頁（官網不做登入、不做試用）；編輯在 Payload 存檔前要即時預覽（design-home 也沒做，等重 build 就夠；真要做是另開一條預覽路由給編輯，官網本體不動）。

設定步驟照 design-home-fe/docs/runbooks/production-deploy.md Part B／C3（Pages）、C2（R2）、C1（Tunnel）。

AI 搜尋引擎抓網站的方式跟 Google 不同：不跑 JS、偏好一段就能摘出答案的文字、很依賴結構化資料與站外的一致訊號。四件事：

1. 放行 AI 爬蟲（public/robots.txt）

照 design-home 已查證過的清單，User-agent: * 已放行時另外明列是「明確表態」，部分爬蟲會先找針對自己的規則：

User-agent: GPTBot
User-agent: OAI-SearchBot
User-agent: ChatGPT-User
User-agent: ClaudeBot
User-agent: Claude-User
User-agent: Claude-SearchBot
User-agent: PerplexityBot
User-agent: Google-Extended
User-agent: Amazonbot
User-agent: CCBot
User-agent: meta-externalagent
Allow: /

User-agent: *
Allow: /

Sitemap: https://<官網網域>/sitemap.xml

參考：design-home-fe/apps/web/src/app/robots.ts（內含各家 UA 的查證註解，Claude-Web 是舊名已棄用）。

2. JSON-LD 結構化資料

每頁 <head> 放一段 <script type="application/ld+json">。Guidant AI 是 B2B 軟體，型別與 design-home（室內設計、LocalBusiness）不同：

參考：design-home-fe/apps/web/src/lib/jsonld.ts，注意它把 < 轉義成 < 的作法要照抄，避免文案含 </script> 把標籤提早關掉。

3. llms.txt

站根放一份純文字 /llms.txt，給 AI 助理的網站導覽：一段公司與產品介紹、主要頁面清單（每行「標題、網址、一句說明」）、指南文章清單。prerender 後放 public/llms.txt 即可，內容改動時手動更新。

參考：design-home-fe/apps/web/src/app/llms.txt/route.ts（它從 CMS 動態產，本站先寫死）。

4. 內容寫法與站外佈局

• 問答式內容：每個解決方案頁與指南開頭放「什麼是 X、誰需要、怎麼過」三段直接回答；FAQ 每題 150 字內、第一句就是答案。AI 引用時摘的就是前兩句。
• 實體一致：公司名、地址、電話、產品名在官網、LinkedIn 公司頁、billows.tech、G2／Capterra 等平台一字不差。AI 靠這個確認是同一家。
• 站外訊號（B2B 版，對應 design-home 的 Google 商家與評論）：LinkedIn 公司頁與產品頁、G2 或 Capterra 建產品檔案、產業媒體或合作夥伴（CMMC C3PAO、顧問公司）的報導與連結、GitHub 若有開源元件。這些是「別人怎麼說你」，官網做得再好、站外空白的公司 AI 不敢推薦。

參考：design-home-fe/docs/ai-seo/faq-draft.md（FAQ 寫法原則）、local-presence-checklist.md（站外清單的結構，內容要換成 B2B 平台）。

開 prerender、部署後，用爬蟲身分抓原始 HTML，不是用瀏覽器看：

# 數字是 0 代表 AI 爬蟲看到的是空殼
curl -s -A "GPTBot" https://<官網網域>/ | grep -c "Guidant"
curl -s -A "ClaudeBot" https://<官網網域>/solutions/cmmc | grep -c "CMMC"

# 每一支路由都要有靜態檔（本機 build 後）
find out -name index.html | wc -l                # 應等於 17 頁 × 2 語言 = 34（加指南 6 篇 × 2）

# 結構化資料驗證
# https://validator.schema.org/ 貼網址
# https://search.google.com/test/rich-results

另外 robots.txt、sitemap.xml、llms.txt 三支用瀏覽器直接開要能看到內容。

網址先用 VITE_SITE_URL 環境變數佔位（Vite 的公開變數要 VITE_ 前綴）。

公司內部（抄內容，寫法改 TanStack）：~/Projects/Design-Home/design-home-fe/

外部：

• TanStack Start 靜態 prerender：https://tanstack.com/start/latest/docs/framework/react/guide/static-prerendering
• TanStack Router head()（meta／links／scripts）：https://tanstack.com/router/latest/docs/framework/react/guide/document-head-management
• Cloudflare Pages 部署靜態站：https://developers.cloudflare.com/pages/
• schema.org SoftwareApplication：https://schema.org/SoftwareApplication 、FAQPage：https://schema.org/FAQPage
• Google 結構化資料測試：https://search.google.com/test/rich-results
• llms.txt 規範：https://llmstxt.org/
• 各家 AI 爬蟲 UA 官方頁：OpenAI https://platform.openai.com/docs/bots 、Anthropic https://support.anthropic.com/en/articles/8896518 、Perplexity https://docs.perplexity.ai/guides/bots