站点运营

站点运营:JavaScript 渲染自查,別让蜘蛛只拿到一個空壳頁面

如果頁面正文、連結和分頁都靠 JavaScript 在浏览器里生成,蜘蛛抓到的可能只是几行骨架代碼。本文從原始 HTML 检查、接口可訪問性、懒加载和分頁入口几個角度,整理一份 JavaScript 渲染自查清單,帮助运营和開發確認蜘蛛能看到什么。

站点运营

站点运营:JavaScript 渲染自查,別让蜘蛛只拿到一個空壳頁面

現在不少站点用前端框架搭建,頁面打開後由 JavaScript 填充資料、生成連結,用戶看着正常,但搜尋引擎蜘蛛拿到的 HTML 可能只有标题和几個空容器。對站点运营来说,這不只是技術细节,而是關系到新内容能不能被發現、内鏈能不能被走到。

先看蜘蛛實际拿到了什么

不要只凭浏览器里的效果判断。可以把頁面的原始 HTML 抓下来,重点看几件事:

  • 正文标题、摘要和核心内容是否直接出現在 HTML 里;
  • 導航、列表頁和文章内鏈是不是可点击的 a 标簽;
  • 分頁入口是否存在于原始代碼,而不是靠点击加载;
  • canonical、面包屑等基础标簽是否已经輸出。

如果原始 HTML 里只有 div 容器和一段脚本,後面的内容全靠接口返回,那蜘蛛就需要先执行 JavaScript 才能看到頁面。不同搜尋引擎對渲染的處理方式不一致,缓存和等待時間也不一样,所以不能把發現内容的希望全押在渲染上。

常见空壳来源

資料接口被拦截

有些站点的 API 被 robots.txt 屏蔽,或者要求登入、校驗来源、限制频率。蜘蛛不执行完整用戶环境,接口拿不到資料,頁面自然就是空的。自查时可以看看接口是否允许匿名訪問,是否返回了结构化内容。

路由没有服務端回退

前端路由用 history 模式时,如果服務器對不存在的路径没有回退到入口文件,蜘蛛訪問深层 URL 會直接拿到 404。反過来,如果所有路径都回退到同一個空壳,又容易造成重复頁面。需要確認回退規則和狀態碼是否合理。

懒加载和交互依赖

图片、正文模块、選項卡、彈窗、無限滚動经常等到用戶操作或滚動才加载。蜘蛛不一定會滚動、点击、等待。把關键内容放在預設视口之外,或者藏在标簽頁里,都可能影响抓取。

自查清單

  1. 用抓取工具或者命令行拉取原始 HTML,搜尋頁面核心關鍵詞,確認正文是否出現。
  2. 检查首屏内鏈和分頁連結是否為真實 href,不要只绑定 click 事件。
  3. 確認内容接口没有被 robots.txt 阻止,不依赖登入和临时 token。
  4. 检查 JavaScript 报错时頁面是否白屏,是否有基本的降級内容。
  5. 對比浏览器渲染後的 DOM 和原始 HTML,差异過大的部分要做取舍。
  6. 观察蜘蛛日誌里對深层頁面的抓取量,是否長期停留在入口頁。
  7. 新增内容後,看看蜘蛛能否在一段時間内發現對應 URL,而不是只抓首頁。

可以調整的方向

優先让關键内容在服務端輸出,交互增强再交给 JavaScript。對于已经上线的單頁應用,可以考虑服務端渲染、静態生成或者预渲染,把正文、标题、分頁和内鏈先落到 HTML 里。無限滚動要配可抓取的分頁地址,選項卡内容尽量預設展開或提供獨立 URL。

如果暂时無法改造,至少保留一個稳定的降級入口:比如站点地图里列出主要栏目和文章,分頁使用普通連結,重要内容不要只放在彈窗里。這样即使蜘蛛没有完整执行脚本,也能顺着連結走到下一层。

观察變化,但不要急着下结论

調整後不要只看一两天。抓取和索引都有延迟,可以结合訪問日誌、抓取統計和索引狀態一起看。重点观察蜘蛛是否開始訪問之前抓不到的 URL,以及新内容被發現的時間有没有變化。如果日誌里仍然只有几個入口頁,就回到原始 HTML 繼續排查。

把内容放在 HTML 里,把交互留给浏览器。蜘蛛能看到的,才是站点真正拿得出手的内容。