JS 渲染內容驗證
用「已渲染 HTML」比對原始碼
JS 渲染驗證像對帳——廚房說菜都出了(程式碼有寫),要對過客人桌上真的有菜(渲染後 HTML 真的有內容)才算數。
03為什麼是現在學
CSR/混合站的內容「理論上會出現」與「Google 實際看到」之間有落差:渲染失敗、逾時、被擋的資源都會讓內容無聲消失。
04白話理解(對客戶簡報可直接引用)
拿「已轉譯 HTML」(GSC URL 檢查工具給的)跟你期望的內容比對:主要文字在嗎?內鏈在嗎?schema 在嗎?逐頁型抽驗。同時確認 robots.txt 沒擋 JS/CSS 檔——擋了,Google 就渲染不出你的頁面。
05工具箱
- ▸GSC URL 檢查→檢視已檢索的網頁 — Google 視角的最終畫面
- ▸Rich Results Test — 順手驗渲染後的結構化資料
06怎麼做 · SOP 3 步(每步標產出物)
- 1每頁型抽 2 頁比對渲染後內容完整性→ 渲染驗證表
- 2檢查 JS/CSS 未被 robots 擋→ 資源存取驗證
- 3發現缺漏→回頭修渲染策略(t09)→ 修復追蹤
07場景應用(實戰經驗)
- ◆評論區塊由第三方 JS 載入且被 robots 擋——頁面「看起來」有幾百則評論,Google 眼裡一則都沒有。
08⚠️ 常見誤區
- ✕只驗首頁——渲染問題常是「特定頁型」的模板 bug。
口訣
「寫了不算,渲染出來才算。」
10里程碑 · 完成標準(可驗證)
- ☐各頁型渲染驗證通過
- ☐JS/CSS 可存取
學習者勾自己的進度;顧問勾客戶專案的交付——同一份標準,兩種用法。
12檢核方式與依據出處
程式自動判定:輸入網址,掃描引擎自己爬、自己打 API、自己判定。
依據等級決定計分權重(🟢×3/🔵×2/⚠️×1)——權重量的是「依據有多硬」, 不是「我們覺得多重要」。查無權威文件的判準,誠實標「業界慣例」。