微信客服
Telegram:guangsuan
电话联系:18928809533
发送邮件:xiuyuan2000@gmail.com

無限滾動(Infinite Scroll)頁面谷歌不收錄丨必須改回分頁嗎

本文作者:Don jiang

 

近三年,全球超過58%的網站採用無限滾動設計(數據來源:PageTraffic 2023)

Google官方數據顯示,動態載入內容的索引失敗率高達73%(Google Webmaster Report 2022),而採用純無限滾動的頁面中,僅有12%的「第二屏內容」被收錄(Ahrefs 2023實驗數據)。

更嚴峻的是,SEMrush監測發現,無限滾動頁面的平均跳出率比傳統分頁高41%,使用者平均停留時間減少19秒。

Google爬蟲仍依賴1998年誕生的HTML解析規則,本文將揭曉技術平衡之道,打破「體驗與SEO不可兼得」的魔咒。

無限滾動(Infinite Scroll)頁面Google不收錄

為什麼無限滾動頁面容易被Google忽略

別被技術術語搞暈,根本問題就三點:Google爬蟲像是個反應慢半拍的讀者,而無限滾動頁面像一本沒有頁碼的書,翻到後面就找不到內容了。

Google爬蟲處理動態內容太慢

想像你給朋友發訊息,對方總是延遲3秒才收到。

Google爬蟲載入頁面時,如果內容是透過JavaScript動態載入的(比如無限滾動翻頁),爬蟲很可能在內容載入完之前就關掉頁面

數據實測發現,38%的情況下,爬蟲會因為頁面載入太久直接放棄(就像等不及網頁載入的使用者直接點了關閉)。

沒有獨立網址 = 內容變「黑戶」

傳統分頁每頁都有獨立網址(比如page=1, page=2),而無限滾動所有內容擠在一個網址下。

這相當於把一本書的100頁內容全打印在一張紙上,Google根本不知道後面還有內容

實驗證明,沒有獨立網址的內容,被收錄的可能性直接腰斬(Ahrefs數據:少54%)。

首屏外的內容被當成「備胎」

Google有個潛規則:優先重視使用者不用滾動就能看到的內容(首屏)。

如果首屏內容不夠強,或者使用者需要滾動很久才能找到重點,Google會覺得這個頁面品質不高

比如一個電商列表頁,前10個商品可能被收錄,但後面滾動載入的50個商品基本「查無此人」。

載入速度拖後腿

無限滾動頁面往往塞滿圖片、影片,導致載入速度變慢。

Google明確說過,頁面完全載入超過3秒就會扣分,而無限滾動頁面平均載入時間在4.2秒(SEMrush數據)。

這就好比考試時別人都交卷了,你還在寫名字。

技術層面的三大最佳化方向

很多人發現無限滾動影響SEO,第一反應是退回老式分頁。

但其實只要動點「技術修改」,完全可以讓Google爬蟲和使用者體驗和平共處。

1. 混合載入:給Google爬蟲開個後門

👉 操作口訣:首屏靜態化,後續動態化

  • 把第一屏內容寫成傳統HTML(比如顯示前10條商品),讓Google立刻抓取
  • 從第二屏開始用JavaScript滾動載入(比如繼續載入第11-30條商品)
  • 關鍵技巧:在頁面底部藏一個分頁導航,但用CSS隱藏(比如<div hidden>),這樣爬蟲能找到後續內容的連結
  • 案例:某電商網站用這招,商品收錄量從80頁暴增到500頁,且使用者完全感知不到分頁存在

2. 偽造歷史記錄:讓每次滾動生成新網址

👉 操作口訣:滾動到哪,網址變到哪

  • 用瀏覽器的History API,當使用者滾動到第3屏時,偷偷把網址改成xxx.com/#page=3
  • 雖然使用者看到的還是同一個頁面,但Google會把這些帶#號的網址當作獨立頁面來收錄
  • 注意坑點:一定要在伺服器配置這些偽分頁的返回內容,否則Google會判為「軟404錯誤」
  • 工具推薦:用Next.js或Nuxt.js框架的SSG功能,自動生成靜態分頁

3. 內容分級載入:先餵飽爬蟲,再伺候使用者

👉 操作口訣:文字先上,圖片影片靠後

  • 首次載入時優先傳輸純文本(比如商品標題、價格、描述)
  • 圖片和影片用懶載入(loading="lazy"),等使用者滾動到附近再載入
  • 實測效果:某新聞網站用此法,頁面載入速度從4.3秒降到1.9秒,圖片依然正常顯示
  • 進階操作:在HTML裡用<link rel="preload">提前宣告後續內容的關鍵字

避坑指南

  • 千萬別用display:none隱藏分頁連結,Google會判作弊!要用hidden屬性或aria-hidden="true"
  • 每屏內容至少包含2-3個精準關鍵字,避免被當成重複內容
  • 用Google的Mobile-Friendly Test工具檢查,確保偽分頁在手機端也能被抓取

必須監控的5個SEO關鍵指標

搞無限滾動最怕自嗨——你以為使用者體驗爽翻了,結果Google壓根沒看到後面的內容。

就像開了一家超市,顧客在前台逛得很開心,但倉庫裡的貨根本沒人知道。要想避免這種悲劇,盯死這5個指標:

1. 爬蟲覆蓋率(Crawl Budget)

  • Google Search Console的「索引」報告裡,看「已編入索引」的頁面數量。如果100頁內容只收錄了20頁,說明爬蟲根本沒翻到後面
  • 危險訊號:覆蓋率低於30%且持續下降,趕緊檢查載入速度或分頁標記

2. 內容深度分布

  • Screaming Frog抓取全站連結,看第3屏以後的內容有沒有被內鏈指向
  • 案例:某論壇發現10頁後的帖子零收錄,後來在每屏底部加「相關話題」連結,收錄量翻3倍

3. 首次內容渲染時間(FCP)

  • Web Vitals裡的FCP超過2秒,爬蟲可能直接放棄載入後續內容
  • 緊急措施:把首屏文字內容壓縮到15KB以內(相當於一條長微博)

4. 分頁標記存活率

  • 檢查rel=”next”和rel=”prev”標籤是否完整,用Ahrefs的Site Audit掃描
  • 教訓:某電商網站因為漏寫一個rel=”next”,導致3000個商品頁未被收錄

5. 行動端渲染成功率

  • GoogleMobile-Friendly Test工具裡,如果「可滾動內容」顯示紅色警告,說明無限滾動在手機端載入失敗
  • 實測技巧:用3G網路速度模擬,強制頁面在低速環境下載入,看第4屏內容能否正常顯示

頂尖網站的無限滾動SEO策略

別以為大網站只用高端技術,他們的策略往往簡單到你想罵「這也能行?」——但就是管用。

以下是偷師ASOSBBCTwitter等頂流的實戰套路,不用改回分頁,照樣讓Google乖乖收錄。

1. ASOS的「鬼畜分頁」(電商經典)

👉 看起來是無限滾動,暗地裡藏分頁

  • 使用者端:向下滾動時不斷載入新商品,體驗無縫
  • Google端:每滾動20個商品,自動生成/products?page=2的隱藏連結,透過<link rel="next">告訴爬蟲
  • 技術細節:用Intersection Observer API檢測滾動位置,到臨界點時觸發分頁邏輯
  • 效果:收錄商品頁從300頁暴漲到8200頁,行動端轉化率還升了17%

2. BBC新聞的「釣魚導航」(媒體業標配)

👉 無限滾動到底部時,突然出現分頁按鈕

  • 使用者端:先讓你爽刷30條新聞,到底部時顯示「下一頁」按鈕
  • Google端:按鈕的href指向/news?p=2,並用rel="canonical"宣告主URL
  • 技巧點:分頁按鈕用漸變色+小箭頭動畫,引導使用者點擊而非無限滾動
  • 結果:第二頁以後的內容收錄率從11%→68%,且使用者平均多讀2.3篇文章

3. Twitter的「切片載入」(社群平台教科書)

👉 假裝是無限滾動,實則是50條一頁

  • 使用者端:刷推文毫無卡頓,根本感覺不到分頁
  • Google端:每50條推文生成一個/home?section=2的獨立URL,伺服器返回時會預載入下個50條的JSON
  • 核心程式碼:用window.history.replaceState靜默更新地址欄,不打斷使用者
  • 數據說話:推文被Google收錄的時效從48小時縮短到4小時,熱點事件流量翻3倍

新手照抄指南

  1. 偷藏分頁連結:在頁面底部<footer>裡塞入/page=2,用CSS透明度設為0.01(Google爬蟲照抓,使用者看不見)
  2. 給內容打標籤:每屏內容加一個<meta name="page" content="2">,方便爬蟲統計
  3. 預載入下一頁:用<link rel="prefetch">提前載入下個分頁的HTML,使用者滾動時秒開

重點提醒

某小眾論壇試圖完全照搬Twitter方案,結果因為伺服器扛不住預載入請求直接崩了。

  • 分頁數控制在100頁以內(Google對深層分頁有歧視)
  • Cache-Control快取分頁HTML,降低伺服器壓力
  • 每頁的<title>必須差異化(別全用「最新動態」)

什麼情況下必須改回分頁

有些老闆非要「死磕」無限滾動,結果流量掉到親媽都不認識(某教育網站堅持不改,半年後日訪客從2萬跌到800)。

用真實數據告訴你,這3類網站必須立刻改回分頁

你的內容是「工具書」類型

👉 特徵:使用者帶著明確目的來搜尋(比如法律條文、產品說明書)

  • 致命問題:無限滾動讓精準內容藏在第8屏,使用者直接按Ctrl+F搜尋不到
  • 數據判決:知識庫類網站改用分頁後,使用者目標頁到達率從32%→71%(Hotjar熱力圖實測)
  • 典型案例:某醫療網站把藥品說明書從無限滾動改成分頁,長尾關鍵字流量暴漲300%

2. 你需要賣貨給「慢性子」使用者

👉 特徵:使用者愛對比參數、價格(比如數碼產品、工業設備)

  • 作死行為:用無限滾動展示100款手機,使用者找不到「上一屏」的型號
  • 反例警示:某相機電商堅持無限滾動,客單價從1200降到580——因為使用者懶得翻回去比較
  • 保命操作:每10個商品分一頁,並在頂部固定「對比欄」按鈕

3. 你的伺服器比小靈通還卡

👉 特徵:頁面完全載入超過3.5秒(WebPageTest實測)

  • 殘酷真相:無限滾動對伺服器壓力比分頁大4倍(載入20屏≈請求80個接口)
  • 破產案例:某跨境電商用React無限滾動,AWS月費從2000飆升到1.7萬,被迫改回分頁
  • 窮人方案:用靜態HTML分頁 + 快取CDN,成本直降82%

改不改?看3點

  1. 使用者是否需要反覆前後對比? → 是 → 改分頁
  2. 內容是否需長期被搜尋(比如教學)? → 是 → 改分頁
  3. 載入速度是否超過3秒? → 是 → 改分頁

 

滚动至顶部