客戶端路由與歷史狀態
SPA 的每個狀態都要有實體 URL
SPA 的狀態像捷運車廂內的廣播——只有車上的人聽得到；沒有站名（實體網址）的內容，地圖上永遠標不出來。
03為什麼是現在學
單頁應用（SPA）用 JS 切換內容，若狀態沒有對應的實體 URL，那些內容就無法被連結、無法被收錄、無法被分享。
04白話理解（對客戶簡報可直接引用）
原則：每個值得被找到的內容狀態都要有自己的網址（History API 的 pushState 路由，而不是 # 錨點或純狀態切換），而且直接開那個網址要能還原畫面（deep link 可用）。tab 切換、篩選結果、詳情彈窗——問一句「這個畫面值得被 Google 收錄嗎？」值得就給網址。
05工具箱
- ▸手動 deep link 測試 — 複製網址開無痕視窗，畫面有沒有還原
- ▸框架路由（Next.js/React Router） — 用正規路由，不要自己土砲狀態
06怎麼做 · SOP 2 步（每步標產出物）
- 1盤點所有內容狀態，標「該有網址／不必」→ 狀態×網址對照
- 2該有的補路由；驗證 deep link 直開可還原→ 驗證紀錄
07場景應用（實戰經驗）
- ◆產品詳情做成彈窗（modal）沒有網址——使用者想分享某個產品，貼出去的永遠是列表頁。詳情該是 /products/x，彈窗只是它的一種呈現。
08⚠️ 常見誤區
- ✕用 #!/ 或純 # 路由——把狀態藏在錨點裡，伺服器與爬蟲都看不到。
口訣
「值得被找到的畫面，就給它一個網址。」
10里程碑 · 完成標準（可驗證）
- ☐內容狀態盤點完成
- ☐deep link 全部可還原
學習者勾自己的進度；顧問勾客戶專案的交付——同一份標準，兩種用法。
12檢核方式與依據出處
程式自動判定：輸入網址，掃描引擎自己爬、自己打 API、自己判定。
依據等級決定計分權重（🟢×3／🔵×2／⚠️×1）——權重量的是「依據有多硬」， 不是「我們覺得多重要」。查無權威文件的判準，誠實標「業界慣例」。