從SEO的角度看分頁、無限滾動和”閱讀更多”哪個好？

在一年多前，HubSpot One在《SEO的未來，寫給從事或者即將從事SEO的從業者》一文中曾經斷言SEO是會消失的職業，也是最應該被消滅的職業。之所以這樣說是因為SEO的各個職能被分解了，一個優秀的SEO，應該是一個前端工程師，一個網站構架師，一個產品經理，一個好編輯，一個業務開發，一個內容行銷者。這個崗位很難在市場中找到優秀的人才的原因也在這裡。 SEO需要大量的知識和與企業內部各個職能進行溝通的能力，當然還需要與其他外部資源溝通的能力。所以說SEO之所以消失，並不是SEO本身消失，而是SEO職能被消化。它應該被溶解到整個系統中去。

本篇我們舉一個小例子來看看從SEO的角度來看，解決列表和長內容應該如何選擇最優的解決方案。這顯然是一個產品經理的問題，那麼SEO會怎麼看待呢？

傳統分頁方式（Pagination）

大部分列表依然在傳統分頁模式上。 Google桌面版就是最好的例子。在許多電子商務網站上我們可以看到結果以頁的單位呈現。有許多內容性質的網站也會把長文章分割成若干個小段，而用若干個頁面來呈現文章。

傳統分頁方式有它的優點：

避免一次性載入大量數據，增加客戶端和服務器端負擔。
增加頁面瀏覽量，從而增加廣告位以增加廣告收入。
易於SEO。搜索引擎大都對分頁展現有良好的理解能力。

但是傳統分頁的缺點也比較明顯：

由於每次都要載入頁頭頁尾邊欄等元素，總的數據量增大。
許多媒體即便很短的文章也要強行分頁，破壞了用戶體驗。
處理不當會造成重複內容，反而不利於SEO。
研究表明相對於其他兩種方式，分頁的用戶閱讀量最少

在我們處理分頁的SEO時，需要做好兩點：

首先要應用rel=”prev”和rel=”next”標籤。舉個例子：

https://hubspot.one/page/2/ 這個頁面中我們會添加

和

表示前一頁和後一頁分別是什麼。這樣的寫法是谷歌所支持和推薦的，Google的支持未知。這樣做的好處是搜索引擎可以理解你這“一系列”頁面之間的關係，它們可能有著相同的頁面標題和描述，但是搜索引擎可以理解你的意圖。

其次，直白地說出“上一頁”，“下一頁”，“第n頁”總會對還不支持上述標籤的搜索引擎提供幫助。在錨點文字和頁面標題中使用這些詞可以幫助搜索引擎理解這組頁面之間的關係，免得丟棄重複內容。

無限滾動（Infinite Scroll）

無限滾動的誕生得益於Ajax技術的應用。如今我們隨處可以看到無限滾動的頁面。在手機上必應圖片搜索就是無限滾動的。國外著名的各大社交網絡都應用了無限滾動技術。

無限滾動技術依賴的是一種叫Lazy Loading的設計理念，也就是說當用戶還沒要往下探索之前先不要提前加載大量內容，由此來節約資源。與之相反的叫做eager loading。微信朋友圈文章就用了Lazy Loading技術，僅當你閱讀到該處，該處圖片才會讀取。

無限滾動的優點非常明顯：

無限滾動節約了資源，只有用戶需要往下看時才載入。
無限滾動僅僅載入內容部分，進一步節省了資源。
翻頁變得更加便利。只需滾動或者手指往上滑即可看“下一頁”
相較於翻頁，用戶瀏覽量變得更多。

可是無限滾動也有一些缺點：

瀏覽者對內容的專注度不夠，他們往往只是很快地瀏覽。
多次滾動後會對客戶端資源造成影響，此時可能會需要釋放一些資源。
無限滾動通常會有一些SEO問題。如果是社交網絡那大可不必擔心，因為每個人的內容可能都是客戶化的，而且社交網絡對搜索引擎的依賴度低。但是如果是電子商務網站的話那會影響搜索引擎發現內容的能力，因為搜索引擎不會“向下滾動”。許多內容可能缺少了列表頁幫助它們把內容“推到表面”。
用戶很難看到頁腳上的內容，這造成很大麻煩。因為聯繫方式等重要訊息都會在這裡。

對SEO來說要解決的是上面第三點。我們其實可以通過現代瀏覽器History API的pushState()和replaceState()來完成。當用戶向下滾動時，我們會載入新頁面接到現有頁面，同時更新瀏覽器地址欄內地址。這樣做對SEO沒有影響，只是用戶可以很好地複制地址欄內的網址。對搜索引擎來說讀取的是第一頁，然後通過該頁面內的rel=”next”標籤可以找到下一頁。每一頁都是不一樣的內容。通過這個方法自然人和機器人的需求都可以被滿足。這裡有個谷歌推薦的簡化的例子（需翻牆）http://scrollsample.appspot.com/items。下圖說明了原理：

“閱讀更多”，“載入更多”（Read More，Load More）

這種方法提供了一個按鈕，讓訪客自己決定是否要載入更多的內容在該頁面尾部。我們打開騰訊新聞的手機網頁版就會發現這種功能，其實它是非常普遍的。

“閱讀更多”，“載入更多”更多像前兩種模式的擇中選擇，說下優缺點。

“閱讀更多”，“載入更多”的優點：

節省資源，這點與無限滾動一樣。
用戶仍然輕鬆與頁腳交互，如果這也算優點的話。
用戶瀏覽的內容仍然比分頁模式多。
移動設備上應用時可以防止初始頁面過長。

“閱讀更多”，“載入更多”的缺點同樣存在：

用戶瀏覽的內容比無限滾動要少。
多次載入後會對客戶端資源造成影響，此時可能會需要釋放一些資源。
處理不當會造成SEO問題。

這裡的SEO問題有兩種。一種是文章應用“載入剩餘X%”時，如果默認載入頁面時未載入剩餘部分內容，對搜索引擎來說可能看到許多很短的文章，判定為垃圾網頁。如果只是隱藏內容，那麼是否被搜索引擎判定為作弊又是一個問題。另一種是我們之前說的入口問題，這是和無限滾動一樣的問題。

在處理列表時，最優做法是結合無限滾動和載入更多按鈕。 SEO方面建議文章載入全部內容，列表的話應用瀏覽器的API和分頁來載入實現。請參考桌面版的必應圖片搜索（這個例子裡並沒有分頁）。

總結一下

我們在上面討論了三種處理長內容的方式，沒有一種是完美的。我們可以揚長避短，結合各種方式來進行設計和部署。對SEO來說，內容相對於搜索引擎的發現是關鍵，避免相同內容的頁面是原則。

感謝閱讀，感謝關注HubSpot One。