JavaScript 頁面『看得到但收不到』：Rendered HTML 診斷

症狀確認：你的 JavaScript 頁面真的被 Google 收錄了嗎？

先別急著比較原始碼。打開 Google Search Console，搜尋網址檢查工具，輸入你懷疑有問題的 URL。看「已索引的版本」下方的「檢視已索引的頁面」，如果顯示「已檢索 - 目前尚未建立索引」或「已發現 - 目前尚未建立索引」，且 HTML 摘要區缺乏關鍵內容，這就是典型的 JavaScript 索引缺失症狀。這表明 Googlebot 已發現你的頁面，但在其爬取或渲染過程中，未能成功抓取到預期中的完整內容，導致索引暫時擱置。

三表面比對：Source HTML vs. Rendered DOM vs. Indexed View

核心診斷邏輯在於比對三個「表面」。1. Source HTML：伺服器回傳的原始 HTML 檔案，通常內容最少，尤其在客戶端渲染（CSR）應用中可能只有一個空的根元素和腳本標籤。2. Rendered DOM：瀏覽器（或 Googlebot）執行 JavaScript 後，動態生成的完整頁面結構，這是使用者實際看到的畫面。3. Indexed View：Google 實際儲存並用於搜尋結果的版本，這是決定你頁面能否出現在搜尋結果中的關鍵。這三者的差異，就是問題的根源所在。

操作步驟一：取得你的三個表面樣本

使用瀏覽器的 DevTools 來收集診斷數據。1. Source HTML：在頁面上按右鍵 →「檢視原始碼」，複製全部內容到文字編輯器。2. Rendered DOM：在同一頁面，按 F12 打開 DevTools，切換到 Elements 面板，在 <html> 標籤上按右鍵選擇「Copy」→「Copy outerHTML」，這將複製出包含所有動態內容的完整節點樹。3. Indexed View：使用 GSC 的網址檢查工具，點擊「檢視已索引的頁面」，然後使用「檢索 as Google」功能（選擇「手機版」或「電腦版」），在「已檢索的頁面」標籤下，你可以看到 Googlebot 渲染後的 HTML 與螢幕截圖。將這三份樣本並列，是進行比對的第一步。

操作步驟二：使用「三表面比對工作表」找出缺失層

打開一個空白試算表，建立四個欄位：1. 內容區塊名稱（如：產品描述、評論摘要、導覽選單）。2. Source HTML 狀態（存在/缺失）。3. Rendered DOM 狀態（存在/缺失）。4. Indexed View 狀態（存在/缺失）。逐個區塊比對。如果在 Rendered DOM 中存在，但在 Indexed View 中缺失，問題很可能出在 Googlebot 的 JavaScript 執行或索引延遲。如果連 Rendered DOM 都缺失，問題就在於你的 JavaScript 邏輯本身未能正確生成該內容。這個工作表能幫你系統化地定位問題發生在渲染鏈的哪個環節。

常見缺失模式與修復方向

根據三表面比對的結果，常見問題模式有幾種。模式一：關鍵內容由 AJAX/fetch 動態載入。如果 Googlebot 未能觸發此請求（例如，請求依賴於滾動或點擊事件），內容將永遠不會出現在 Rendered DOM。修復方向是確保重要內容在初始 HTML 中就有標籤或基本文字，或使用預渲染（Prerendering）服務為爬蟲提供靜態快照。模式二：渲染後的 DOM 結構過於複雜或延遲過長。Googlebot 有 JavaScript 渲染的時間與資源預算。修復需要優化 JavaScript bundle 大小，減少不必要的第三方腳本，並使用 Code Splitting 加快核心內容的載入速度。

渲染類型驗證：SSR、CSR 與混合渲染的索引影響

最後，確認你的頁面屬於哪種渲染類型，因為這直接決定了三個表面的初始樣貌與索引風險。伺服器端渲染 (SSR)：Source HTML 就包含完整內容，三個表面內容應高度一致，索引最穩定。客戶端渲染 (CSR)：Source HTML 幾乎為空，完全依賴 JavaScript 執行，索引風險最高，因為 Googlebot 必須成功執行 JS 才能獲取內容。混合渲染：部分內容由伺服器提供（SSR），部分由客戶端 JavaScript 補充。你需要分別診斷 SSR 注入部分與 CSR 動態載入部分的索引狀態。使用「三表面比對工作表」能有效區分這些情況，並針對性地優化。