站点运营

站点运营:頁面渲染方式自查,別让蜘蛛只抓到一張空白頁

頁面在浏览器里顯示正常,不代表搜尋引擎能讀到内容。本文整理了判断站点渲染方式的三步自查、服務端渲染與客戶端渲染的取舍、核心頁面改造清單,以及改造後的复查方法,帮助你確認正文、内鏈和标题是否出現在原始 HTML 里。

站点运营

站点运营:頁面渲染方式自查,別让蜘蛛只抓到一張空白頁

很多站点在浏览器里看起来一切正常,标题、正文、图片都在,但搜尋引擎拿到的原始 HTML 里可能只有一個空壳容器和几段脚本。這種情况在纯前端渲染的單頁應用、以及把正文交给 JS 异步加载的頁面上尤其常见。抓不到内容,後面的索引和排名自然無從谈起。

先用三個動作確認自己属于哪種情况

不用急着改代碼,先做基础判断:

  • 查看源代碼:在浏览器里右键“查看網頁源代碼”,看正文是否直接出現在返回的 HTML 中,而不是等到 JS 执行後才出現。
  • 關閉 JavaScript:禁用 JS 後刷新頁面,如果只剩導航骨架和一片空白,說明主要内容依赖客戶端渲染。
  • 用命令行請求:用 curl 或類似工具請求一次目标 URL,观察返回内容里有没有關鍵詞、正文、内鏈。

三個结果如果都不理想,就不要再纠结,直接進入改造清單。

不同渲染方式的取舍

服務端渲染與静態生成

這两種方式返回的 HTML 里已经带有完整内容,對蜘蛛最友好,也最适合内容型頁面。静態生成适合更新频率不高的栏目頁、詳情頁;服務端渲染适合内容實时變化、需要按請求组装的頁面。

客戶端渲染

並非不能用,但正文、标题、關键内鏈最好別完全依赖它。後台管理、登入後可见的功能頁用客戶端渲染没什么問题,因為它們本来也不指望被收錄。

预渲染與動態渲染

没法马上改架构时,可以先用预渲染把重要頁面在构建时生成静態 HTML;動態渲染的成本更高,且要谨慎使用,避免出現给蜘蛛和訪客两套不同内容的做法。

骨架屏與懒加载的邊界

骨架屏對体驗有帮助,但它只是占位,不能替代真實内容。懒加载图片、按需加载的模块,如果连首屏正文都被延迟,蜘蛛很可能只看到占位符。把關键内容放在懒加载范围之外,是更稳妥的選擇。

自查清單

  1. 核心栏目頁、文章詳情頁返回的 HTML 中能否找到正文首段和主要标题。
  2. 标题、描述、canonical 是否在原始 HTML 里就存在,而不是由脚本後插。
  3. 列表頁的文章連結是否為可点击的 a 标簽,而不是 onclick 事件或 div。
  4. 分頁、翻頁入口是否在初始 HTML 中。
  5. 面包屑和主導航是否直接輸出,而不是等接口返回後再渲染。
  6. 首屏图片是否有正常的 img 或合适的替代方案,尺寸是否声明。
  7. 路由是否為真實路径,能否直接訪問並返回 200,而不是全部落在同一個外壳上。

首屏關键内容優先

如果一时無法全站改造,至少把最有價值的栏目頁和詳情頁做成服務端輸出。判断标准很简單:這些頁面是你希望被搜尋到的頁面,它們的内容就應该在第一次响應里出現。

给蜘蛛准备一套内容、给用戶准备另一套内容,属于典型的作弊手法,短期也许有效,長期風險很高。合理的做法是把同一份内容用更可靠的方式送到两邊手里。

改造後的复查

改造完成後,重新用 curl 和禁用 JS 的方式各查一遍,確認正文、内鏈、标题都出現在原始响應里。再观察一段時間服務器日誌中蜘蛛對重要頁面的抓取情况,對比改造前後有没有變化。如果日誌里出現大量只抓 HTML 外壳、不深入内容的记錄,通常說明渲染問题還没解决干净。

渲染方式不是一次性的技術選型,而是會随着前端框架升級、组件重构而變化。建议把它列進站点例行自查項目,每次大改版後都拿出来過一遍。