Whoops

JavaScript SEO:為什麼 Google 讀不到你的網頁?

為什麼網站改版後 Google 流量反而下滑?解析 Google 爬蟲、渲染與索引三階段

作者:褚崇名(Sliven)

本頁目錄

說真的,不少人都遇過這種狀況:網站改版完成,視覺漂亮、動畫流暢,用瀏覽器開每一頁內容都完整呈現,團隊開香檳慶祝。結果兩週後打開 Google Search Console,收錄數字死在水裡,自然流量比改版前還低。你懷疑是內容寫得不夠好、關鍵字佈局有問題,於是回頭改 Title、改 H2、加內部連結,改了一輪,數字還是不動。

這類專案的元兇,九成不是內容變差,而是搜尋引擎根本看不到你寫的東西。內容明明在瀏覽器裡活靈活現,Google 卻只讀到一個空殼。而那個把內容藏起來的兇手,通常是 JavaScript。

Ahrefs 一份涵蓋十億頁面的研究(2023 年 12 月)指出,超過 96% 的網頁從 Google 拿不到任何流量。這份資料不能證明 JavaScript 是主因,但它提醒我們:有內容不等於能取得搜尋流量。對 JS 網站來說,至少要驗證 Google 渲染後究竟看到了什麼。

先講結論:JavaScript SEO 是什麼,一分鐘講完

JavaScript SEO,白話一句話:確保你的網頁在「搜尋引擎執行完 JavaScript 之前」與「執行完之後」,關鍵內容都能被正確讀取、收錄、參與排名。它是 技術性 SEO 底下一個專門處理 JS 驅動網站的分支,管的是 Google 跟 JavaScript 之間那條「看得到 vs 看不到」的界線。

為什麼需要單獨拉出來講?因為 Google 處理一般 HTML 與處理 JavaScript,走的是兩條完全不同的管線。一條是「抓了就能讀」,另一條是「抓了還得排隊、開虛擬瀏覽器、執行腳本、才能讀」。如果你的內容只活在第二條管線裡,你等於把排名機會押在 Google 願不願意、有沒有空幫你跑完那段程式。

判斷一句話就夠:在網頁原始碼(view-source)裡用 Ctrl+F 搜尋你的正文關鍵字,找不到,你就是 JavaScript SEO 的潛在受害者。

接下來的內容適合三種人:第一種,剛做完網站改版、流量莫名下滑的站長;第二種,正在選技術架構、想把 SEO 從一開始就做對的產品或行銷負責人;第三種,手上有 React、Vue、Next.js 這類前端框架專案、卻總覺得收錄狀況不穩定的工程團隊。不管你屬於哪一種,底下的觀念、診斷方法、與渲染策略選擇,都可以直接搬回去用。這裡不會丟一堆術語給你背,而是把 Google 跟 JavaScript 之間到底發生什麼事,拆成你能在十分鐘內上手、並且今天就能開始檢查的具體動作。

為什麼「在我的瀏覽器看得到」是 JS SEO 最危險的一句話

做 JS 網站健檢時,最常聽到的一句話是:「可是我用 Chrome 開都正常啊。」這句話恰恰是問題的核心。你的瀏覽器跟 Googlebot,是兩種完全不同的讀者。

Chrome 開啟網頁時會下載 HTML、CSS 與 JavaScript,再把執行後的畫面呈現給你。Googlebot 也能執行 JavaScript,但流程不同:Google 會先抓取頁面,成功回應的頁面進入渲染佇列,渲染完成後再用產出的 HTML 進行索引。原始 HTML 仍很重要,因為它能減少對腳本、網路請求與渲染成功與否的依賴。

換個比喻你就懂了。想像 Google 是一家有兩個員工的工廠:

  • 員工 A:抓取員。先把頁面與必要資源抓回來;若伺服器回傳的 HTML 已含正文與連結,後續處理對腳本的依賴較少。
  • 員工 B:渲染員。開啟瀏覽器環境、執行 JavaScript,再把渲染後的 HTML 交給索引系統。

你的瀏覽器會直接呈現完整互動結果;Google 則把抓取、渲染與索引分階段處理。因而「我在瀏覽器看得到」不能證明 Googlebot 能順利取得所有資源、執行腳本並看見相同內容。

所以請把一個觀念釘進腦袋:「在我的瀏覽器看得到」是測試使用體驗的標準,不是測試搜尋引擎可見性的標準。測搜尋可見性,你得模擬員工 A 的視角,那才是 Google 第一時間看到的世界。如果你想知道這整套流程怎麼跑,可以回頭看這篇Google 搜尋運作原理,這裡我們把焦點縮到 JavaScript 這一段。

Google 處理 JavaScript 的三階段:抓取、排隊、渲染

Google 官方對 JavaScript 網頁的處理流程,講白了就是三個動作:抓取(crawl)、排隊等渲染(queue for rendering)、執行渲染後再索引(render & index),流程整理自 Google Search Central 的 JavaScript SEO 基礎說明。理解這三個階段的差異,你才會知道自己的內容卡在哪。

第一階段:抓取原始 HTML

Googlebot 下載你的網頁,拿到的就是伺服器回傳的那份 HTML。如果你的網站是 SSR(Server-Side Rendering,伺服器端渲染)或預先產生好的靜態 HTML,這份 HTML 裡就會包含完整的標題、正文、連結。員工 A 抓到,當場讀得到。

但如果你的網站是純 CSR(Client-Side Rendering,前端渲染),伺服器回傳的 HTML 可能只有一個空的 <div id="root"></div> 加一包 <script>。員工 A 抓到這份 HTML,正文一個字都看不到。他把頁面丟進渲染佇列,等員工 B 處理。

把這個落差具體化,你會更清楚問題在哪。同一篇產品介紹頁,SSR 版本回傳的原始 HTML 長這樣:

<h1>不鏽鋼保溫瓶 500ml</h1>
<p>雙層真空結構,保冷 24 小時、保溫 12 小時……</p>
<a href="/產品/保溫瓶-500ml/">立即選購</a>

CSR 版本的原始 HTML 則長這樣:

<div id="root"></div>
<script src="/assets/app.a3f9.js"></script>

同樣一個頁面,SSR 版本的標題、文案與連結已在伺服器回應中;CSR 版本若只剩空 div 與腳本,就必須依賴資源下載與渲染成功後才有完整內容。這不代表 CSR 必然無法索引,但出錯點與診斷成本較多。用 view-source 對照伺服器回應,是辨識依賴程度的第一步。

第二階段:渲染佇列

需要渲染的頁面會進入佇列。Google 使用以 Chromium 為基礎的 Web Rendering Service(WRS),官方說明渲染可能在幾秒內完成,也可能更久,但沒有提供適用所有網站的固定時程。因此,不應用特定小時或天數承諾收錄速度。

第三階段:執行 JavaScript、再次索引

輪到你的頁面時,WRS 會開一個虛擬瀏覽器、載入頁面、執行 JavaScript、等待它產出 DOM,再把產出的內容拿去索引。這時候,原本空殼裡的那些標題、正文、連結才會被 Google 讀到。聽起來圓滿,問題是:渲染過程會消耗資源,Google 會限制它能跑多久、能跑多少。如果你的腳本太肥、太多網路請求、太多 lazy load 又沒設計好,WRS 可能跑不完就放棄,或只讀到部分內容。

這裡有兩個限制要知道。第一是執行錯誤與資源負擔:腳本例外、過多請求或長時間佔用主執行緒,都可能讓渲染結果不完整。第二是網路請求依賴:若正文要在載入後呼叫 API 才出現,只要回應過慢、需要登入狀態或遭封鎖,渲染版本就可能缺內容。讓關鍵內容在伺服器回應中到位,能減少這些失敗點。

Google 自己也承認,某些寫法會讓搜尋引擎讀不到內容,這類問題有官方整理的排查清單可以對照。我們待會兒的地雷清單,就是從這些官方已知問題加上實務經驗整理出來的。

渲染佇列的代價:為什麼大型 JS 網站會被「抽稅」

對頁數少的網站,渲染延遲未必形成可觀測問題;對大型內容站、電商或 listing 網站,腳本依賴會放大抓取、除錯與更新成本。業界常把這種額外負擔稱為渲染稅

爬取預算主要是超大型或快速變動網站才需要特別管理的議題。重度 JavaScript 會增加資源抓取與渲染環節,但不能直接推導出固定的索引延遲。真正要比較的是伺服器紀錄、GSC 抓取統計與代表頁面的實測結果。

這個差距會在三個地方咬人:

  1. 時效性內容。新聞、活動、促銷、限時優惠,這類內容的價值有保存期限。等渲染完排上索引,黃金期早過了。
  2. 大規模長尾。電商的產品頁、listing 站的分類頁,動輒上萬頁。每頁都抽一點渲染稅,總延遲會把整批頁面的索引進度往後推好幾個量級。
  3. 更新偵測。若重要內容依賴容易失敗的腳本或 API,搜尋引擎看到的版本可能落後於使用者看到的版本。

想深入了解哪些網站需要管理這套預算,可以看爬取預算的完整拆解。對大站來說,JavaScript 的重點不是假設一定慢幾天,而是降低關鍵內容對渲染的依賴,並用紀錄確認 Googlebot 實際抓取與索引狀況。

JS 網站最常見的五個地雷

會讓 Google 看不到內容的 JavaScript 寫法,最常見的就這幾種,而且每一種都會在你以為沒事的時候默默吃掉流量。以下把它們整理成一張對照表,方便拿去跟工程師對答案。

地雷 發生在哪 症狀 修正方向
1. 關鍵內容只靠 JS 注入 標題、正文、連結全由前端框架在 client 端生成,原始 HTML 是空殼 view-source 找不到正文,GSC 收錄的是空白或 fallback 文案 改 SSR / SSG,或至少把 SEO 關鍵內容 server 端輸出
2. 把連結塞進 JS 事件而非 href onclick 或 framework router 跳頁,<a> 沒有真實 href Google 抓不到內部連結,等於斷掉爬蟲的通路 用真實 <a href="/你的實際網址/">,讓它不靠 JS 也能點
3. Lazy load 沒有給爬蟲路標 圖片、列表、分頁內容捲動才載入,沒有 fallback 或 noscript 第二頁以後的內容 Google 永遠讀不到 用分頁或 sitemap 提供獨立網址,搭配正確的延遲載入實作
4. Meta、canonical、結構化資料全靠 JS 動態生成 title、description、canonical、Schema 由 JS 在執行期寫入 第一次抓取讀到錯的或空的 meta,渲染後才修正,索引可能用錯版本 把 SEO 風險高的標籤 server 端輸出,別全丟給 client
5. 爬蟲被 JS 錯誤直接擋掉 程式碼有未捕捉的例外、或 cookie / consent 牆擋住渲染 WRS 執行失敗,頁面停在錯誤狀態被索引 監控 client 端錯誤,對 bot 友善處理 cookie consent

這五個裡面,第二個特別值得拿出來講。不少網站都有這種情況:導覽列看起來有連結,點了也能跳頁,但原始碼裡那個 <a> 的 href 是 # 或根本沒有 href,跳頁全靠 framework 的 router 監聽點擊。對使用者沒問題,對 Googlebot 就是斷橋。內部連結是爬蟲在網站裡移動的唯一道路,這條觀念在內部連結那篇講得很細,在 JS 網站它又更致命,因為連連結本身都可能不存在於 HTML。

第四個也是隱形殺手。canonical 這東西一旦在第一次抓取與渲染後給出不一致的值,輕則索引用錯網址,重則整批頁面被判定為重複內容而折疊。這類標籤的處理原則很簡單:會影響索引決策的東西,盡量在 server 端就確定,不要賭渲染後才修正

怎麼確認 Google 真的「看到」你的內容:診斷梯

知道地雷在哪,還要知道怎麼驗。實務上常用一套「診斷梯」,由淺到深四階,每一階都能在一分鐘內做完,而且用的都是免費工具。你照著爬一遍,大概就能定位問題出在哪一段。

第一階:view-source 對照法(30 秒)

在目標頁面按右鍵檢視原始碼,Ctrl+F 搜尋你的正文關鍵字。找得到,代表員工 A 抓得到;找不到,代表這段內容要等渲染。這是最便宜也最常被跳過的一步。如果你連 F12 開發者工具都不熟,建議先補一下網頁開發者工具的基本操作,整個診斷流程會順很多。

第二階:GSC 網址檢查工具的「測試公開網址」

把網址丟進Google Search Console 的網址檢查工具,點「測試公開網址」,查看渲染後的畫面與 HTML 是否有正文和連結。即時測試與 Google 已建立索引的版本可能不同,因此還要對照索引狀態、上次抓取時間與頁面報表。完整步驟可看Google 收錄查詢

第三階:文字瀏覽器 / 純文字模式

用瀏覽器把 CSS 與 JS 關掉,或丟進純文字渲染工具,看頁面剩什麼。這模擬的是「沒有 JavaScript」的世界。如果關掉 JS 之後,正文、連結、導覽全部消失,只剩一個空框架,那就是你的風險等級:你的 SEO 完全押在 Google 願不願意幫你渲染。

第四階:網址檢查與 Rich Results Test 的渲染結果

Mobile-Friendly Test 已於 2023 年停止提供。現在可用 Search Console 網址檢查查看 Googlebot 渲染結果,結構化資料則用 Rich Results Test 驗證。把渲染後 HTML 與 view-source 對比,差異越大,代表頁面越依賴 JavaScript。

這套診斷梯的價值在於:它把「感覺有問題」變成「問題在第幾階」。第一階就破,問題是 SSR 沒做;第二階破,問題是渲染執行失敗;第三階破,問題是連結結構;第四階破,問題是結構化資料或特定元素。定位清楚了,才知道該找誰修、修哪裡。

渲染策略選擇題:CSR、SSR、SSG、ISR 到底怎麼挑

講完問題,講解法。JavaScript 網站的渲染策略,本質上就是在「對使用者快」與「對搜尋引擎友善」之間找平衡。web.dev 把當代網頁的渲染模式整理得很完整,值得交叉參考。以下把四種主流策略,配上它們各自的 SEO 性格,整理成一張決策表。

策略 HTML 從哪來 SEO 風險 適合誰
CSR(前端渲染) 瀏覽器跑 JS 生成 高,內容全押在渲染佇列 登入後台、工具型應用,內容不需被索引
SSR(伺服器渲染) 每次請求伺服器即時組 HTML 低,原始 HTML 就有內容 個人化內容、即時資料電商、動態 listing
SSG(靜態產生) 建置時預先產好 HTML 最低,效能與 SEO 雙贏 部落格、文件站、行銷頁、內容不常變
ISR / 混合 靜態為主、背景更新 低,兼顧新鮮度與效能 大型內容站、電商目錄、頻繁但不即時的更新

核心原則是:需要索引的頁面,最好在伺服器回應中就有關鍵內容與可追蹤連結。這並非要消滅 CSR,而是依頁面用途選擇策略。行銷首頁、文章與產品頁可優先考慮 SSR、SSG 或混合渲染;登入後儀表板與互動工具則可保留 CSR。

渲染策略也會影響網站速度,但 SSR 或 SSG 不會自動讓 client 端 JavaScript 變少,仍取決於 hydration、程式碼拆分與資源設計。選型時要同時量測伺服器回應、可見內容與互動效能,可搭配網站速度優化檢查。

動態渲染:過渡期的合法繃帶,不是終點

如果你的網站短期內無法全面改 SSR,又不能等,Google 官方提供了一個過渡解法叫動態渲染(Dynamic Rendering)。它的原理很直白:伺服器偵測來訪者是爬蟲還是真人,爬蟲來就給預先渲染好的靜態 HTML,真人來就給原本的 CSR 版本。

聽起來很美好,但它有清楚的但書。第一,Google 官方把它定位為「workaround」,也就是權宜之計,不是長期方案;他們鼓勵網站朝真正的 SSR 或混合渲染發展。第二,它會增加架構複雜度,你要維護一套「給爬蟲的版本」與「給使用者的版本」的同步,兩邊不一致就會踩到內容不一致的風險。第三,它解決的是「Google 看得到」這一關,沒解決「速度太慢」這一關,因為真人拿到的還是那個肥 CSR。

實務上的建議是:把動態渲染當成繃帶,拿來止住正在大量失血的網站,但不要把它當成體質改造。止完血,還是得排進路線圖,分階段把關鍵頁面搬到 SSR 或 SSG。把它當永久方案,一年後你會發現自己在維護一個越來越難動的雙版本架構。

JS 網站的 SEO 三個加分題:結構化資料、延遲載入、INP

地雷躲掉、策略選對,剩下的就是把能加的分補上。在 JavaScript 網站上,有三個項目特別容易做錯,也特別容易補出價值。

加分題一:結構化資料用 JS 生成,要驗證不能只驗證一半

JavaScript 完全可以拿來產出 Schema.org 結構化資料,Google 官方也支援這種做法,見 Generate structured data with JavaScript 說明。但陷阱在於:JS 產出的 Schema 要等到渲染後才存在,所以你必須用 Rich Results Test 的渲染版本來驗證,別只看 view-source。很多人用一般 validator 驗了就放心,其實驗到的是空的。結構化資料的完整佈局邏輯,可以參考結構化資料 Schema 標記那篇,這裡只強調 JS 版本的特殊性:它有效,但它的有效是建立在 Google 願意幫你渲染的前提上

加分題二:延遲載入一定要留路給爬蟲

Lazy loading 是現代網站的基本配,它能大幅改善首次載入與捲動體驗。但延遲載入的 SEO 陷阱很明確:如果第二頁、第三頁的內容永遠只靠捲動觸發,Google 沒有捲動這個動作,那些內容就等於不存在。Google 官方對延遲載入有明確的修正建議,核心觀念是給每一段內容一個獨立可被抓取的網址,或提供分頁結構,讓爬蟲不靠捲動也能讀到。完整的延遲載入實作與效能考量,可參考Lazy Loading 延遲載入那篇,這裡只點出 SEO 那一面:載入體驗做再好,爬蟲讀不到就是白做。

加分題三:INP、Core Web Vitals 與 JS 包裹量的三角債

這條最容易被低估。Google 在 2024 年正式把 INP(Interaction to Next Paint)取代 FID,成為 Core Web Vitals 的一員,web.dev 的公告有完整說明。INP 量測的是頁面對使用者互動的回應速度,而它最大的敵人,就是過重的 JavaScript 主執行緒阻塞。換句話說,重度 JS 網站往往同時是 INP 不及格的網站。

Google 的排名系統會使用 Core Web Vitals,但良好分數不保證排名提升,影響通常小於內容相關性等核心因素;web.dev 則強調速度對使用者體驗的影響。肥大的 client bundle 可能增加渲染失敗點、拖慢 INP 與載入體驗,但不能把跳出行為直接當成 Google 的排名扣分。相關指標可看Core Web VitalsINP 取代 FID

正因如此,JavaScript SEO 跟網站速度優化從來不是兩件事,它們是同一件事的兩個切面。你把 client bundle 瘦下來,同時救了渲染稅、INP 與使用者體驗。一個動作,三個收益。

把 JS 網站的爬蟲溝通做對:robots.txt 與 sitemap 的角色

JavaScript 網站也要正確管理爬蟲存取。robots.txt 控制抓取,sitemap 協助搜尋引擎發現網址;兩者都不能保證索引,也不能取代存取控制。

不要在 robots.txt 封鎖 Google 渲染頁面所需的 JavaScript 與 CSS。若把 /assets//static/ 整包 disallow,Googlebot 可能無法取得關鍵資源。robots.txt 適合管理不必抓取的路徑,卻不是登入保護、機密資料防護或移除索引的工具;敏感內容要用驗證與權限控管,不想索引的可公開頁面則使用可被爬蟲讀到的 noindex。完整原則見robots.txt

若內部連結依賴 JavaScript,XML sitemap 能提供另一條網址發現路徑,但不保證所有網址都會被抓取或建立索引。清單應只放 canonical、可索引且希望出現在搜尋中的網址,同時修好真實的 <a href> 內部連結。產生與提交方法可看Sitemap 產生與提交教學,概念則見XML Sitemap 是什麼

兩者的分工是:robots.txt 管抓取範圍,sitemap 提供希望搜尋引擎發現的網址清單。若網站規模大到爬取預算吃緊,可再看爬取預算優化。使用 noindex 時要讓爬蟲能抓到該指令;若同時用 robots.txt 擋住頁面,搜尋引擎可能看不到它。完整比較見robots.txt 與 noindex

JavaScript SEO 與 AI 搜尋:仍以可抓取、可索引為基礎

JavaScript 不只是傳統搜尋的議題。各服務的抓取與渲染能力不同,讓關鍵內容可直接從伺服器回應讀取,能降低對單一爬蟲能力的依賴。怎麼針對 AI Agent 的讀取行為把網站準備好,可以延伸看AI Agent 渲染網站的完整準備

Google AI Overviews 與 AI Mode 仍以 Google Search 的抓取、索引與搜尋資格為基礎,不需要特殊 Schema。Google-Extended 也不是搜尋爬蟲;它是網站管理者控制部分 Gemini 訓練與 grounding 使用的產品權杖,不影響 Google Search 的收錄或排名。其他服務有各自的爬蟲與政策,不能假設都會或都不會執行 JavaScript。相關名詞可看AI SEO 的別稱總覽

各家服務是否渲染、如何建立檢索索引,公開資訊與能力都不一致。可以確定的是,正文若依賴失敗的腳本或受限 API,任何抓取系統都可能取得不完整內容。RAG(檢索增強生成)的基本概念可參考RAG 的白話原理;但頁面能被抓取,不等於必然進入資料庫或獲得引用。

因此,伺服器回應中提供完整正文,是降低技術風險的穩健做法,不是未來排名或 AI 引用的保證。Google 對 AI 搜尋的公開指引仍是遵循既有 SEO 基礎,確保頁面可抓取、可索引並符合摘要顯示資格。延伸可看AI OverviewsAI 搜尋實務

實務上的優先序沒有變:讓關鍵內容、連結與索引指令在伺服器回應中就到位,再用各平台公開工具驗證。這能提高技術上的可讀性,但仍不能保證傳統排名或 AI 引用。

改版與搬家:JavaScript SEO 災難最常爆發的那一瞬

JavaScript SEO 的問題最常在哪個時間點集中爆發?答案很明確:不是日常營運,而是網站改版與搬家的那一刻

原因不複雜。改版時,團隊關注的通常是視覺、互動、轉換流程,鮮少有人把「新站用的渲染策略,跟舊站一不一樣」列入檢查表。一個原本是 SSR 的舊站,改版後被工程師改成熟門熟路的 CSR 框架,原始 HTML 從有內容變成空殼,沒有人發現。於是改版上線的當下,流量不會立刻崩,因為舊的索引還撐著,但接下來幾週 Google 重新爬取、發現內容讀不到、收錄停滯,數字才開始無聲下滑。等團隊驚覺不對勁,往往已經是幾個月後。

渲染問題可能不會在一般瀏覽器畫面中顯示錯誤,因此改版前後都應比較原始 HTML、渲染後 DOM、重要資源與 URL Inspection 結果。完整風險控管可參考網站搬家與改版指南;JavaScript 部分則應抽查代表性頁面,確認舊站可讀取的重要內容在新站仍能被搜尋引擎取得。

JavaScript SEO 體檢清單與下一步

講了一整輪,落地才是重點。這裡把整篇文章可執行的東西,濃縮成一張清單與一個行動方案,你照著走就能把風險往下壓一個檔次。

檢查項目 通過標準 不通過該做什麼
view-source 是否含正文關鍵字 Ctrl+F 找得到主要關鍵字 該頁面搬 SSR / SSG
內部連結是否為真實 href 停用 JS 後仍能點擊導航 把 onclick 跳頁改成真實 <a href>
延遲載入內容是否可被爬取 第二頁有獨立網址或分頁結構 加分頁,並提交進 sitemap
title / canonical / Schema 來源 SEO 標籤 server 端輸出 把高風險標籤從 client 搬到 server
GSC 收錄狀態 網址檢查顯示已建立索引且內容完整 對照診斷梯逐階排查
INP / CWV 數值 實測值落在「良好」區間 瘦身 client bundle,拆分程式碼

給你一個四步行動方案,今天就動得起來:

  1. 挑出你網站流量最高的 10 個頁面。這些是你的金雞母,先確認它們不是空殼。對每個頁面跑一次 view-source 對照法,三十秒見真章。
  2. 把破洞頁面排優先序。view-source 找不到正文、又同時是高流量或高商業價值的頁面,列為 P0,這週內處理。低價值頁面可以先觀察。
  3. 跟工程團隊對齊渲染策略。拿這份決策表去開會,把會被索引的頁面統一搬到 SSR 或 SSG,把 CSR 限縮在不需要被索引的功能頁。不要一次全站重構,按優先序分批。
  4. 建立一個月一次的渲染健檢。用 GSC 的收錄報表加上幾個重點頁面的網址檢查,定期確認 Google 看到的版本跟你以為的一致。改版後尤其要跑一次。

這四步走完,不一定立刻帶來流量變化。修正 JavaScript SEO 的直接成果,是讓搜尋引擎更穩定地讀到應有內容;索引與排名是否改善,還要看內容品質、需求、競爭與網站整體訊號。把修正前後的渲染結果、索引狀態與自然搜尋資料留存,才能判斷實際影響。

JavaScript SEO 不神祕,它就只是一個被多數人跳過的驗證步驟。你願意多花三十秒做 view-source 對照、願意在渲染策略上做對選擇,你就已經領先一大半還在問「為什麼我的網站收錄不上來」的人。內容寫得再好,如果搜尋引擎看不到,它就只是放在深山裡的好東西。而 SEO 這件事,從來不是把好東西做出來就夠了,還得確保它被看見。

規劃新網站或改版時,應在架構階段確認渲染、內部連結、canonical、Sitemap 與重要內容輸出方式;事後補救通常需要額外開發與驗證,但實際成本仍依專案而異。基礎觀念可延伸閱讀SEO 入門指南

常見問題

為什麼頁面明明收錄了,排名卻還是很差?
收錄只代表 Google 拿得到、能索引這個網址,不等於它認為這個頁面值得排名。排名取決於內容品質、搜尋意圖吻合度、網站權威、使用者體驗、外部連結等多重因素。JavaScript SEO 解決的是「能不能參賽」,至於「能不能得名」要回到內容與權威經營。
改版後流量突然下滑,要怎麼判斷是不是 JavaScript 惹的禍?
先到 Search Console 的「網頁索引」報表看「已檢索但未建立索引」「已探索但尚未建立索引」這兩個分類有沒有異常增加。再挑幾個流量下滑最多的網址,用網址檢查看渲染後內容是否完整、有沒有資源載入失敗。如果改版把原本伺服器產生的 HTML 改成純前端渲染,這通常就是元兇。
Google 到底會不會執行 JavaScript?要等多久才會被收錄?
會。Google 會先抓取原始 HTML,再把需要渲染的頁面排進佇列,交給以 Chromium 為基礎的 Web Rendering Service 執行 JavaScript 後才索引。官方僅表示渲染可能在幾秒內完成、也可能更久,沒有適用所有網站的固定時程,不應用特定小時或天數承諾收錄速度。
可以用 robots.txt 封鎖 JavaScript 與 CSS 嗎?
不建議。Google 渲染頁面時需要載入 JavaScript 與 CSS,若把 /assets/、/static/ 整包 disallow,Googlebot 可能拿不到關鍵資源、看不清頁面實際內容。robots.txt 適合管理不必抓取的路徑;不想被索引的可公開頁面應改用爬蟲讀得到的 noindex,敏感內容則靠驗證與權限控管。
動態渲染(Dynamic Rendering)可以當長期方案嗎?
不適合。Google 官方把它定位為 workaround(權宜之計),鼓勵網站朝真正的 SSR 或混合渲染發展。它也會增加架構複雜度:給爬蟲的版本與給使用者的版本要同步,兩邊不一致就有內容不一致風險,而且真人拿到的仍是原本偏重的 CSR 頁面。務實用法是拿它止住大量失血,同時排路線圖分階段把關鍵頁面搬到 SSR 或 SSG。

操作步驟

  1. 挑出高價值代表頁面(首頁、文章頁、分類頁、商品頁、活動頁、404 頁面),避免一開始就檢查整站。
  2. 對代表頁面按右鍵「檢視網頁原始碼」,用 Ctrl+F 搜尋關鍵段落,確認標題、內文、連結、canonical、robots meta、結構化資料是否一開始就寫在 HTML 裡。
  3. 使用 Google Search Console 的網址檢查工具,查看 Googlebot 實際抓取與渲染後的內容是否完整、有沒有資源載入失敗或被擋。
  4. 關掉瀏覽器的 CSS 與 JavaScript(或用純文字渲染工具)看頁面剩什麼;若正文、連結、導覽全部消失,代表 SEO 完全押在 Google 願不願意渲染。
  5. 以 Rich Results Test 檢查 FAQ、Article、Product 等結構化資料能否正確解析,留意商品價格、庫存等變動頻繁欄位。
  6. 檢查 Core Web Vitals 的 INP、LCP、CLS,確認 JavaScript 與第三方追蹤碼沒有拖垮互動體驗。

主題聚落|技術 SEO 與網站架構 看「SEO 搜尋引擎優化」中樞 →

相關文章

褚崇名(Sliven) 創辦人・巫普斯科技有限公司

長期投入技術 SEO、GEO/AEO 與 AI 搜尋實務。本站文章以可驗證資料、公開來源與實作觀察整理而成。

完整作者介紹LinkedInGitHubX

想把這篇的方法用在自己的站上?

SEO 健檢、GEO/AEO 引用優化、網頁設計諮詢——把文章裡的方法落地到你的網站。