不少站点在前端改版之後,頁面在浏览器里看起来一切正常,但用工具請求一次,返回的 HTML 里只有一行 script 和几個空的 div。對蜘蛛来说,它拿到的就是一副空骨架。渲染方式的問题不會报错,也不影响普通訪客,很容易被忽略,直到發現某些栏目迟迟没有動静、快照里的内容停留在很久以前。
先弄清自己属于哪種渲染方式
- 服務端渲染(SSR):服務器返回的 HTML 里就带有完整正文,一次請求即可拿到内容。
- 静態生成(SSG):构建时生成 HTML 文件,效果與 SSR 接近,适合更新频率不高的栏目。
- 客戶端渲染(CSR):HTML 只是壳,正文靠浏览器执行 JavaScript 後填充,需要額外渲染步骤。
- 混合渲染:首屏用 SSR,部分模块由 JS 异步拉取,容易出現“看得见但不一定讀得到”的邊界情况。
自查清單
1. 直接看源碼
用命令行工具或浏览器的“查看網頁源代碼”(不是開發者工具里的 Elements 面板)請求几個代表性地址:首頁、栏目頁、詳情頁、分頁第二頁。挑一句正文里獨有的文字在源碼中搜尋,如果找不到,說明這段内容依赖 JS 渲染。
2. 對比渲染前後的结构
在開發者工具里看渲染後的 DOM,再和源碼逐块對照。两者差异越大,越需要评估對方是否能执行到同样的结果,尤其是那些改動之後才出現的差异。
3. 检查關键元素是否在初始 HTML 中
- 标题、正文、面包屑、主要内鏈是否出現在源碼里;
- meta robots、canonical、结构化資料是否依赖 JS 才生成;
- 分頁與翻頁是否是可点击的 a 标簽,而不是只有点击事件;
- 图片的 src 是否為占位图,真實地址要等脚本執行後才替換。
4. 看資料接口是否被挡
如果正文来自异步接口,確認该接口没有被 robots.txt 拦截,也不需要特殊头部或登入態才能返回資料。接口被挡时,頁面在浏览器里正常,抓取侧却只能看到空白。
常见的三類坑
- 骨架屏寫進 HTML:用戶端体驗不错,但骨架文字可能被当成正文,導致多個頁面内容高度相似。
- 异步注入關键标簽:canonical 與标题由脚本寫入,执行时机不稳定时容易缺失或寫错地址。
- 無限滚動:内容只在滚動後加载,缺少可直接訪問的分頁入口,靠後的内容很难被發現。
處理顺序建议
- 先给内容型頁面做服務端渲染或预渲染,把正文、标题、内鏈放進初始 HTML;
- 再處理交互型模块,允许它們繼續用 JS,但不要承载主要文字内容;
- 無限滚動頁面补一套带連結的分頁路径,滚動只作為体驗增强;
- 改完後用同一批地址复测源碼,確認渲染前後一致,再观察一段時間。
提醒:渲染方式只解决“内容能不能被讀到”這一环,是否收錄、以什么位置展示,還取决于内容质量、站点整体结构與搜尋需求,不必把日誌里的每一次訪問都当成结果指标。
小结
渲染自查不需要一次性大改,關键是把它變成例行動作:每次前端發版後,抽几個代表地址看一眼源碼,確認正文、标题、分頁連結還在初始 HTML 里。發現問题时,優先修内容頁,再修交互模块,改動记錄留档,方便下次對比。