站点运营

站点运营:JavaScript 渲染與首屏内容自查,別把正文鎖在脚本里

很多站点把正文和連結交给前端脚本生成,蜘蛛拿到的初始 HTML 可能是空壳。本文整理一套渲染自查流程:分別查看初始 HTML 與渲染後 HTML,核對正文、内鏈與分頁入口是否依赖脚本,並给出服務端渲染、预渲染和降級兜底几種可選路径。

站点运营

站点运营:JavaScript 渲染與首屏内容自查,別把正文鎖在脚本里

不少站点在浏览器里看起来完整,但服務器返回的第一份 HTML 里几乎什么都没有:正文、列表、分頁連結都靠前端脚本在浏览器加载後拼出来。搜尋蜘蛛抓取时看到的,往往就是這份初始 HTML。如果内容不在里面,蜘蛛就可能拿不到你想让它看到的東西。

這里说的不是「脚本一定不能被蜘蛛执行」。主流搜尋引擎具备一定的渲染能力,但渲染需要額外排队和资源,存在延迟,也可能因為脚本报错、接口超时、權限配置而失敗。把内容完全押在渲染结果上,等于把可控的事交给不确定的环节。

自查第一步:把两份 HTML 摆在一起看

  1. 取初始 HTML:用命令行工具或「查看網頁源代碼」,儲存服務器直接返回的内容。不要用開發者工具里的 Elements 面板,那里已经被脚本改寫過。
  2. 取渲染後 HTML:在浏览器里等頁面完全加载,再把 DOM 结构導出,或者用支持渲染的抓取工具做對比。
  3. 逐項比對:正文主体、主要内鏈、導航、分頁入口、面包屑、结构化信息,是否出現在初始 HTML 中。
  4. 记錄差异清單:把「只在渲染後出現」的部分列出来,按重要性排序,優先處理正文和連結。

這些位置最容易漏

  • 列表頁的後續條目和「下一頁」按钮,常由脚本在滚動或点击後追加。
  • 标簽切換、折叠面板里的内容,初始狀態下並未插入 DOM。
  • 無限滚動加载的内容,初始 HTML 只有第一屏。
  • 评论区、相關推荐、參數表格等次要但仍有搜尋價值的区块。
  • 站内連結寫在脚本數组里,初始 HTML 里一個連結标簽都看不到。

几種可選的處理路径

服務端渲染

让服務器直接輸出带内容的 HTML,前端框架大多有對應方案。改造成本不小,但對内容型頁面回报比較直接。

预渲染

在构建或發布阶段把頁面渲染成静態 HTML,适合更新频率不高的栏目頁和詳情頁。注意内容更新後要重新生成,否則會出現新舊不一致。

降級與兜底

至少在初始 HTML 里保留正文摘要、主要連結和分頁入口,让蜘蛛和關閉脚本的用戶都能顺着讀下去。這通常是成本最低的一步。

排查时的几個注意点

  • 不要只看首頁和几篇文章,列表頁、分頁、篩選頁往往是問题重灾区。
  • 接口返回的資料如果對未登入用戶也可见,尽量让它在服務端先注入。
  • 懒加载的图片和内容,確認有可訪問的地址或明确的入口,而不是一片空白。
  • 渲染耗时過長會拖慢抓取节奏,必要时评估首屏渲染時間和接口响應時間。
渲染方式只是把内容交付出去的手段,不是排名手段。内容本身有價值、地址稳定、入口清晰,才谈得上後續的抓取和索引。

建议把這項检查放進改版和上线的流程里:新模板、新组件、新接口上线前,先看一眼初始 HTML 里到底有什么。這個動作只要几分钟,却能避免内容長期躺在脚本里没人看见。