無限滾動（Infinite Scrolling）對網站SEO的影響
最近遇到一個要讓 blog 文章無限滾動的要求，也就是說使用者在滾動到網頁下緣的時候，JavaScript 會自動戴入一篇相關的新文章在網頁中，目的是讓使用者繼續觀看相關的內容，增加在網頁的互動時間。
我使用的語法是 Intersection Observer API 和 replaceState，與後端互動的語法則是 jQuery 的 ajax。
Googlebot 會抓取無限滾動的內容嗎？
答案是：會。
至於會抓到多深？根據我自己的觀察，可以抓到至少兩篇無限滾動後出現的文章，Google 還蠻厲害的。
SEO 出現問題
就在我把程式碼寫上去之後一、兩天，網站的所有文章都開始出現一些 SEO 的問題，甚至到了不得不處理的地步，因為各網頁的排名有很明顯地下降（至少我這種寫法確實會影響 SEO，或許存在著對 SEO 更安全的寫法）。
CLS
無限滾動後出現的內容很明顯會造成網頁的區塊位移，我想這大家應該都可以理解，但業主認為這是小問題。而對於業主的「目標」，我也不否認這是可以忽略的問題。
載入時間
若無限滾動後出現的文章容量大小不大，這不會是什麼問題，但就是有容量很大的文章。
我不知道無限滾動後才出現的內容算不算在 Google 的載入時間中，所以我只能說無限滾動可能會讓載入時間受到影響。
結構化資訊錯誤
因為有許多文章使用例如 FAQ 的結構化資訊（FAQ 規定一個網頁只能出現一次），所以理所當然地，Google Search Console 馬上就發出了錯誤訊息通知。
這個問題對我來說是無法無視的，因為這會讓被認定為有語法錯誤的文章的 FAQ 結構不會出現在 SERP 之中。
解決方法
目前是在外面包一層用來偵測 search bot 的程式碼來規避。短期看起來是有效的，因為網頁又回到原本的排名。
var botPattern = "(/bot|google|baidu|crawler|spider|duckduck|crawling|bing)";
var regexp = new RegExp(botPattern, 'i');
var userAgent = navigator.userAgent;
if (!regexp.test(userAgent)){
// infinite Scrolling
}
這裡要注意一件事，Google Search Console 的「網頁體驗」根據官方說法是使用真實使用者數據，所以這種規避的方式無法阻止該數值下降。
實際的數字（桌面）是從 100% 掉到 4%。
 |
| CLS 問題無法規避 |
當然，如果你可以解決多個h1和結構化資訊的問題，的確可以安全地提升「網站停留時間」，間接影響SEO。
又或者，你可以直接捨棄無限滾動技術。
無限滾動是不道德的技術
無限滾動的確會讓使用者多看一篇文章（不管他是否真的有看），但永無止盡的未知可能會讓某些人焦慮症發作。而大部分的人也都認為，這項技術若用在社群網站上的話，會害部分使用者上癮，出現成癮性。
我也認為，與其靠這種方式增加使用者在網站的停留時間，不如提供使用者真正感興趣的內容。
所以，若你是網頁設計師，請記得「道德設計」的重要性，不要讓 UX 變成 User Exploitation，雖然我知道這很困難……
結論
我個人還是非常反對使用無限滾動的，除非是 list 性質的網頁才可以用，2014 年 Google 官方也是使用 list 性質的範例來說明他們對該技術產生之內容的抓取能力。
最後，以這件 case 來說，文章最下面產生「相關文章列表」或「閱讀更多」，才是對使用者比較友善的網頁優化方式。
留言
張貼留言