JavaScript SEO 是讓依賴 JavaScript 的網站內容、連結與頁面狀態，仍能被搜尋引擎正確檢索、轉譯與索引的技術做法。Google 能執行 JavaScript，但抓到 HTML、排隊轉譯、執行程式與建立索引是不同階段；任何一段出錯，都可能讓使用者看得到、Google 卻讀不到。
重點速覽
- Google 處理 JavaScript 網站會經過 crawling、rendering、indexing；不是只看瀏覽器最後畫面。
- 重要內容與連結應出現在轉譯後 HTML，連結要使用帶 href 的 a 元素。
- SSR 不是排名加分標籤，CSR 也不是一定不能收錄；關鍵是輸出、狀態、速度、可發現性與錯誤處理。
Google 怎麼處理 JavaScript 頁面？
第一階段是檢索：Googlebot 取得網址回傳的 HTML 與可用資源。第二階段是轉譯：Web Rendering Service 執行必要的 JavaScript，產生接近使用者看到的 DOM。第三階段才是索引：Google 分析轉譯後內容與連結，決定如何儲存與提供結果。
如果初始 HTML 只有空殼、必要 JavaScript 被 robots.txt 或 CDN 擋住、程式執行失敗，或內容需要使用者點按才載入，轉譯後可能仍沒有關鍵文字。Google 官方的判斷很直接：轉譯後 HTML 看不到的內容，就無法被索引。
CSR、SSR 與靜態產生差在哪？
選擇架構應同時考慮更新頻率、互動需求、開發能力、伺服器成本與穩定性。搜尋引擎不會因為頁面掛著 SSR 名稱就自動加分，最終仍看能否正常取得與理解。
| 方式 | 內容何時產生 | SEO 注意點 |
|---|---|---|
| CSR 用戶端轉譯 | 瀏覽器下載程式後組出主要內容 | 必須確認 Google 能載入資源、執行程式並看見內容 |
| SSR 伺服器端轉譯 | 伺服器先回傳可讀 HTML | 仍要處理狀態碼、Canonical、水合錯誤與後續導覽 |
| SSG 靜態產生 | 建置時先產生 HTML 檔 | 適合變動較低頁面，但要正確更新與重新部署 |
| 動態轉譯 | 依 user agent 回傳不同版本 | Google 僅建議作為權宜方案，需避免內容不一致 |
JavaScript SEO 必查項目
- 每個重要畫面都有可分享、可回傳 200 的獨立網址。
- 導覽使用帶 href 的 a 元素，不只綁 onclick，也不要用 # 片段假裝不同頁。
- 標題、Meta、Canonical、robots 與結構化資料在最終 HTML 正確且不互相矛盾。
- 不存在的內容回傳真正 404，而不是先回 200 再用畫面顯示找不到。
- 重要文字不依賴滑鼠、登入、同意視窗或無限捲動後才出現。
- JavaScript、CSS 與 API 資源沒有被 robots.txt、防火牆或 CDN 誤擋。
- 用 Rich Results Test 或網址審查查看 Google 實際取得的 HTML 與畫面。
如何測試一個 JavaScript 網站？
先在關閉 JavaScript 或查看原始 HTML 的情況下確認基礎內容，再用瀏覽器開發者工具檢查轉譯後 DOM、網路請求與錯誤。接著用 Google 的網址審查即時測試查看轉譯畫面與 HTML，並對照索引版本。
不要只測首頁。抽查分類、商品、文章、分頁、搜尋結果、404、登入前後與不同裝置；模板性的錯誤常會一次影響大量網址。
關於這個名詞的常見迷思
迷思一：Google 現在能跑 JavaScript，所以不用特別管
Google 能轉譯不代表所有資源與互動都能成功執行。阻擋、錯誤、超時與使用者操作仍可能讓內容消失。
迷思二：改成 SSR 就一定排名變好
SSR 能改善初始 HTML 與穩定性，但不會自動修好內容品質、內鏈、狀態碼、重複網址與頁面體驗。
迷思三：Googlebot 會像真人一樣點按所有按鈕
Google 主要從 href 連結發現網址，不應依賴點擊按鈕、捲動或自訂事件才揭露唯一內容。
一句話總結
JavaScript SEO 的核心是驗證搜尋引擎最後拿到什麼，而不是相信前端畫面；把網址、連結、內容、狀態與轉譯逐層測清楚。
延伸名詞
JavaScript 網站最常一起檢查：
