JavaScript SEO:為什麼 Google 讀不到你的網頁?
為什麼網站改版後 Google 流量反而下滑?解析 Google 爬蟲、渲染與索引三階段
作者:褚崇名(Sliven)
本頁目錄
- 先講結論:JavaScript SEO 是什麼,一分鐘講完
- 為什麼「在我的瀏覽器看得到」是 JS SEO 最危險的一句話
- Google 處理 JavaScript 的三階段:抓取、排隊、渲染
- 第一階段:抓取原始 HTML
- 第二階段:渲染佇列
- 第三階段:執行 JavaScript、再次索引
- 渲染佇列的代價:為什麼大型 JS 網站會被「抽稅」
- JS 網站最常見的五個地雷
- 怎麼確認 Google 真的「看到」你的內容:診斷梯
- 第一階:view-source 對照法(30 秒)
- 第二階:GSC 網址檢查工具的「測試公開網址」
- 第三階:文字瀏覽器 / 純文字模式
- 第四階:網址檢查與 Rich Results Test 的渲染結果
- 渲染策略選擇題:CSR、SSR、SSG、ISR 到底怎麼挑
- 動態渲染:過渡期的合法繃帶,不是終點
- JS 網站的 SEO 三個加分題:結構化資料、延遲載入、INP
- 加分題一:結構化資料用 JS 生成,要驗證不能只驗證一半
- 加分題二:延遲載入一定要留路給爬蟲
- 加分題三:INP、Core Web Vitals 與 JS 包裹量的三角債
- 把 JS 網站的爬蟲溝通做對:robots.txt 與 sitemap 的角色
- JavaScript SEO 與 AI 搜尋:仍以可抓取、可索引為基礎
- 改版與搬家:JavaScript SEO 災難最常爆發的那一瞬
- JavaScript SEO 體檢清單與下一步
說真的,不少人都遇過這種狀況:網站改版完成,視覺漂亮、動畫流暢,用瀏覽器開每一頁內容都完整呈現,團隊開香檳慶祝。結果兩週後打開 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 抓取統計與代表頁面的實測結果。
這個差距會在三個地方咬人:
- 時效性內容。新聞、活動、促銷、限時優惠,這類內容的價值有保存期限。等渲染完排上索引,黃金期早過了。
- 大規模長尾。電商的產品頁、listing 站的分類頁,動輒上萬頁。每頁都抽一點渲染稅,總延遲會把整批頁面的索引進度往後推好幾個量級。
- 更新偵測。若重要內容依賴容易失敗的腳本或 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 Vitals與INP 取代 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 Overviews與AI 搜尋實務。
實務上的優先序沒有變:讓關鍵內容、連結與索引指令在伺服器回應中就到位,再用各平台公開工具驗證。這能提高技術上的可讀性,但仍不能保證傳統排名或 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,拆分程式碼 |
給你一個四步行動方案,今天就動得起來:
- 挑出你網站流量最高的 10 個頁面。這些是你的金雞母,先確認它們不是空殼。對每個頁面跑一次 view-source 對照法,三十秒見真章。
- 把破洞頁面排優先序。view-source 找不到正文、又同時是高流量或高商業價值的頁面,列為 P0,這週內處理。低價值頁面可以先觀察。
- 跟工程團隊對齊渲染策略。拿這份決策表去開會,把會被索引的頁面統一搬到 SSR 或 SSG,把 CSR 限縮在不需要被索引的功能頁。不要一次全站重構,按優先序分批。
- 建立一個月一次的渲染健檢。用 GSC 的收錄報表加上幾個重點頁面的網址檢查,定期確認 Google 看到的版本跟你以為的一致。改版後尤其要跑一次。
這四步走完,不一定立刻帶來流量變化。修正 JavaScript SEO 的直接成果,是讓搜尋引擎更穩定地讀到應有內容;索引與排名是否改善,還要看內容品質、需求、競爭與網站整體訊號。把修正前後的渲染結果、索引狀態與自然搜尋資料留存,才能判斷實際影響。
JavaScript SEO 不神祕,它就只是一個被多數人跳過的驗證步驟。你願意多花三十秒做 view-source 對照、願意在渲染策略上做對選擇,你就已經領先一大半還在問「為什麼我的網站收錄不上來」的人。內容寫得再好,如果搜尋引擎看不到,它就只是放在深山裡的好東西。而 SEO 這件事,從來不是把好東西做出來就夠了,還得確保它被看見。
規劃新網站或改版時,應在架構階段確認渲染、內部連結、canonical、Sitemap 與重要內容輸出方式;事後補救通常需要額外開發與驗證,但實際成本仍依專案而異。基礎觀念可延伸閱讀SEO 入門指南。
常見問題
為什麼頁面明明收錄了,排名卻還是很差?
改版後流量突然下滑,要怎麼判斷是不是 JavaScript 惹的禍?
Google 到底會不會執行 JavaScript?要等多久才會被收錄?
可以用 robots.txt 封鎖 JavaScript 與 CSS 嗎?
動態渲染(Dynamic Rendering)可以當長期方案嗎?
操作步驟
- 挑出高價值代表頁面(首頁、文章頁、分類頁、商品頁、活動頁、404 頁面),避免一開始就檢查整站。
- 對代表頁面按右鍵「檢視網頁原始碼」,用 Ctrl+F 搜尋關鍵段落,確認標題、內文、連結、canonical、robots meta、結構化資料是否一開始就寫在 HTML 裡。
- 使用 Google Search Console 的網址檢查工具,查看 Googlebot 實際抓取與渲染後的內容是否完整、有沒有資源載入失敗或被擋。
- 關掉瀏覽器的 CSS 與 JavaScript(或用純文字渲染工具)看頁面剩什麼;若正文、連結、導覽全部消失,代表 SEO 完全押在 Google 願不願意渲染。
- 以 Rich Results Test 檢查 FAQ、Article、Product 等結構化資料能否正確解析,留意商品價格、庫存等變動頻繁欄位。
- 檢查 Core Web Vitals 的 INP、LCP、CLS,確認 JavaScript 與第三方追蹤碼沒有拖垮互動體驗。