JavaScript 網站的索引問題：五種渲染方式的實測差異
一個用前端框架做的網站，在瀏覽器上看起來完全正常：內容齊全、速度不慢、動畫流暢。但它在搜尋結果裡只有首頁。
原因是內容是在瀏覽器執行腳本之後才出現的。搜尋引擎需要額外的資源與時間才能看到這些內容，而語言模型與多數 AI 代理程式通常根本不執行腳本。
這篇比較五種渲染方式在收錄表現上的實際差異，以及怎麼檢測自己的網站屬於哪一種。
一、先理解問題的本質
搜尋引擎抓取網頁分成兩個階段：先取得原始碼，之後再排隊執行腳本並取得渲染後的內容。
第一階段幾乎立即發生，第二階段則可能延後數小時到數週，而且不保證一定會執行。
所以關鍵問題是：你的主要內容出現在第一階段還是第二階段。出現在第一階段的內容，收錄快且穩定；只在第二階段出現的，收錄慢且可能被遺漏。
- 第一階段：取得原始碼，立即發生
- 第二階段：執行腳本，可能延後或省略
- 主要內容應該在第一階段就存在
二、方式一：純客戶端渲染
原始碼幾乎是空的，所有內容由瀏覽器執行腳本後產生。這是收錄表現最差的一種。
實測上這類網站的常見症狀是：首頁被收錄但內容摘要空白、內頁大量未被收錄、以及標題描述全部相同。
另外一個關鍵問題是 AI 能見度。多數語言模型的抓取工具不執行腳本，這代表你的內容對它們而言完全不存在。
三、方式二：伺服器端渲染
內容在伺服器產生完整的原始碼後才送到瀏覽器。收錄表現與傳統網站相同。
這是我們對內容型網站的首選建議。它同時解決了搜尋收錄與 AI 可讀性兩個問題。
代價是伺服器負載較高，需要適當的快取策略。這在流量大的網站需要事先規劃。
四、方式三：靜態產生
在建置階段就把所有頁面產生成靜態檔案。收錄表現最好，速度也最快。
限制在於內容更新需要重新建置。對於更新頻率高或頁面數量極多的網站，建置時間可能成為瓶頸。
適合的情境是內容相對穩定的網站：服務頁、部落格、產品型錄。
五、方式四：動態渲染
對一般使用者送出腳本版本，偵測到爬蟲時送出預先渲染好的版本。
這是一種過渡方案。它可以解決收錄問題，但維護成本高，而且需要確保兩個版本的內容一致，否則會產生風險。
實務上我們只在既有系統無法改成伺服器端渲染時才建議使用，並且會設定定期比對兩個版本內容的檢查。
六、方式五：混合式
首屏與主要內容使用伺服器端渲染，互動性強的區塊在瀏覽器補上。這是目前多數框架的預設方向。
收錄表現接近伺服器端渲染，同時保留了互動體驗。缺點是實作複雜度較高，容易在某些頁面類型上意外退回純客戶端渲染。
使用這種方式時，最重要的是逐一確認每一種頁面類型的實際輸出，而不是只檢查首頁。
- 首屏與主要內容由伺服器產生
- 互動區塊在瀏覽器補上
- 必須逐一確認每種頁面類型
七、怎麼檢測自己的網站
最簡單的方法有三個，都不需要工具。
第一，在瀏覽器上檢視網頁原始碼，用搜尋功能找一段頁面上的正文文字。找不到，代表這段內容不在第一階段。
第二，關閉瀏覽器的腳本執行後重新載入頁面。看得到的內容就是爬蟲第一階段能取得的內容。
第三，使用搜尋主控台的網址檢查工具，比對「已檢索的網頁」與實際畫面的差異。
- 檢視原始碼並搜尋正文文字
- 關閉腳本後重新載入頁面
- 用主控台的網址檢查比對差異
八、除了主要內容之外要檢查的四個項目
- 標題與描述標籤是否在原始碼中就存在且各頁不同
- 內部連結是否為標準連結而非由腳本產生的點擊事件
- 分頁與篩選的網址是否可直接存取
- 結構化資料是否在第一階段就輸出
九、第二項為什麼特別重要
如果內部連結是由腳本產生的點擊事件而不是標準的連結標籤，爬蟲無法從中發現其他頁面。
這會造成一種特殊的狀況：首頁被收錄，但內頁完全不被發現，即使它們本身的渲染沒有問題。
解決方式是確保所有導覽與內容連結都使用標準的連結標籤，並且有可直接存取的網址。
十、給正在規劃新網站的建議
如果網站的主要價值來自內容與被搜尋到，優先選擇靜態產生或伺服器端渲染。
如果是應用型的網站，主要價值在登入後的功能，那麼公開的行銷頁面與應用本體可以分開處理，行銷頁用靜態產生，應用本體用客戶端渲染。
最不建議的是為了技術一致性而讓整個網站包含行銷頁都採用純客戶端渲染。這個決定的代價通常在上線半年後才會被看見。
常見問題
搜尋引擎現在不是可以執行腳本了嗎？
可以，但是在第二階段且不保證執行。同時多數 AI 抓取工具不執行腳本，因此主要內容仍應在原始碼中就存在。
已經是純客戶端渲染的網站怎麼補救？
短期可用動態渲染或預先渲染處理，長期建議將主要內容頁改為伺服器端渲染或靜態產生。
怎麼快速判斷有沒有問題？
關閉瀏覽器的腳本執行後重新載入頁面，看得到的內容就是爬蟲第一階段能取得的內容。
延伸閱讀
關於作者與審稿
冠誠數位行銷（GuanCheng Martech）的顧問團隊撰寫這篇文章。團隊累積 295 個專案，服務 308 家客戶，操作範圍包含 SEO 自然排名、AEO 答案引擎、GEO 與 LLMO 佈局、Google 與 Meta 廣告投放、電商維運與數據歸因分析。
文章裡的數字來自冠誠數位行銷實際經手的客戶帳戶與後台報表，客戶名稱與可識別資訊都已經移除。內容由負責該領域的冠誠顧問審稿後發佈，最後更新日期為 2026 年 9 月 8 日。讀完有問題，可以到冠誠數位行銷官方網站的預約諮詢頁面留下聯絡方式，我們會用你提供的時段回電。