官網『分頁導覽』(Pagination) 設計完整攻略：中小企業如何用一排小小的數字讓長列表訪客不會翻兩頁就跑光

寫在最前面：中小企業老闆最常忽略的一個小區塊

如果你把自家官網的部落格、產品列表、案例分頁往下滑到底，看看那一排「1 2 3 4 5 ... 下一頁」的按鈕，大部分老闆的反應會是：「這種東西不都長一樣嗎？裝一下就好了吧？」。

問題是——它不是一樣的。分頁導覽（Pagination）長什麼樣、放在哪、要放幾顆、要不要顯示總數、按下去會不會捲回頂端，這些細節加在一起會直接影響：訪客到底會不會翻到第二頁、Google 到底會不會把你第二頁後的文章當一回事、手機用戶會不會因為誤觸而跳走。

這篇文章就把「分頁導覽」這一個常被當成裝飾品的小區塊拆開講清楚，讓中小企業老闆不用讀完設計書也能給網站的分頁下決定。

Photo by Pankaj Patel on Unsplash

一、分頁到底是幫誰做的？

先講結論：分頁不是做給訪客翻的，是做給訪客「知道還有多少東西可以翻」的。

大多數人以為分頁的功能是「讓內容分段」，但真正拉高停留時間的關鍵在於「感知資訊量」。當訪客滑到第一頁底，看到「共 12 頁」或「1 2 3 ... 12」時，他腦中會出現一個概念：「這家公司有累積東西」。這個心理暗示，比任何一句「我們經驗豐富」的文案都有力。

反過來說，如果你只放一顆孤伶伶的「下一頁」按鈕，訪客根本不知道後面還有沒有東西，八成就直接關掉了。這是為什麼中小企業官網明明有 60 篇文章、40 個案例，卻常常看不到訪客翻第二頁——不是內容不好，是分頁沒有把「量」秀出來。

二、分頁 vs 無限滾動 vs 載入更多，中小企業到底要用哪一個？

這三種模式常常被誤用。給老闆一個快速判斷表：

1. 傳統分頁（Numbered Pagination）

就是最經典的「1 2 3 4 5」。適合：部落格文章列表、案例列表、產品目錄、常見問答。這種內容訪客會想「跳去看某一頁」，也會想「知道總共多少」。SEO 表現也最穩定，因為每一頁都有明確的網址（/blog/page/2、/blog/page/3），Google 可以逐頁爬取。

2. 無限滾動（Infinite Scroll）

滑到底就自動載入下一批。適合：社群動態、圖片牆、短影音、日用品電商。但要注意兩個代價：一是使用者滑到某個地方之後，Footer（頁尾）永遠碰不到，「聯絡我們」的資訊等於白做；二是每次重新開頁面，訪客要重新滑很久才能回到剛才看的位置。中小企業官網不太建議用純無限滾動當主要瀏覽方式。

3. 載入更多按鈕（Load More Button）

介於兩者之間，訪客要主動點才會載更多。適合：作品集、產品副類別。訪客有控制感、Footer 也還碰得到，但缺點是「總量」還是不透明。如果搭配「已載入 12 / 60 篇」的計數器就會好很多。

給中小企業老闆的建議：官網的「部落格」、「案例」、「產品列表」用傳統分頁；商品櫥窗、作品集用「載入更多 + 計數器」；官網主體不要用純無限滾動。

Photo by Kelly Sikkema on Unsplash

三、一個合格的分頁導覽必須有的 6 個元素

看過不少中小企業官網的分頁區塊，做得順手的通常都有這 6 樣東西：

1. 目前所在頁（Current Page）視覺清楚

用實心背景色標出來，訪客一眼看得出「我在第幾頁」。很多網站把當前頁做得跟其他數字一模一樣，訪客就會一直重複點同一頁。

2. 首頁與末頁（First / Last）按鈕

當你有 20 頁以上的內容時，「跳到最後一頁」是必要的。有時候老客戶會想看「最早的文章」，沒有末頁按鈕他就得手動點 20 次。

3. 省略號（Ellipsis）處理超過 5 頁的情況

正確做法是：1 2 [3] 4 5 ... 12。永遠顯示「第一頁、當前頁前後 2 頁、最後一頁」，中間用「…」省略。這是網路上最通用的規範，不要自創格式。

4. 每一頁都有獨立網址（Unique URL）

這一點對 SEO 極度重要。錯誤示範是那種用 JavaScript 動態載入卻不改網址的分頁，Google 看到的永遠只有第一頁，後面的文章形同不存在。正確做法要有 /blog/page/2、/blog/page/3 這種可以被書籤、被分享、被搜尋引擎爬到的網址。

5. rel="prev" 與 rel="next" 標籤

雖然 Google 官方在 2019 年說不再把這個當強訊號，但實務上加上這兩個 <link> 標籤仍能幫助其他搜尋引擎、瀏覽器預先載入、以及輔助工具理解頁面關係，成本極低，加就對了。

6. 上一頁／下一頁的鍵盤與觸控友善

按鈕的可點擊區域至少要 44 x 44 px（Apple 人機介面規範），才不會在手機上誤觸。桌機版最好還能用左右方向鍵翻頁，這一點雖然沒人會主動注意到，但用習慣的重度讀者會愛死你。

四、5 個中小企業官網最常見的分頁地雷

地雷 1：只放「上一頁 / 下一頁」，沒有數字

訪客看不出總共幾頁、也不能跳頁，體感就是「深不見底」，翻兩頁就走。這是所有分頁錯誤裡最致命的一個。

地雷 2：每頁塞太多內容（一頁 50 篇以上）

為了「看起來很多」把每頁塞爆，結果初始載入時間拉長、行動裝置一開就當、跳出率暴衝。部落格建議每頁 9–12 篇，產品列表 12–24 個，案例列表 6–9 個。

地雷 3：分頁按下去頁面沒有捲回頂端

訪客點了「第 3 頁」，結果新內容從第 3 頁載進來但視窗還停在原地，他就得再手動滑到頂端才看得到第一筆。行為上要在切頁時自動 scrollTo(0, 0)，這是最基本的體貼。

地雷 4：分頁只在頁尾出現，沒有麵包屑或頁碼提示

使用者滑到底部才知道「原來還有下一頁」，這時已經來不及了。建議在列表上方也加一行「顯示第 1–12 篇，共 148 篇」，一開場就把量秀出來。

地雷 5：手機版把桌機版分頁直接縮小

桌機的「1 2 3 4 5 ... 20」到手機上會變成擠成一團的小方塊。手機版應該簡化成「上一頁 [第 3 / 12 頁] 下一頁」的三段式，或使用滑動式分頁選單。

Photo by Igor Miske on Unsplash

五、SEO 觀點：分頁的三個關鍵細節

從搜尋引擎的角度來看，分頁是「一份被切成多份的內容」。要讓 Google 正確理解，有三個必做動作：

1. canonical 標籤要指向自己那一頁，不要通通指到第一頁。這是很多 WordPress 主題預設的錯誤，會導致第 2 頁之後的內容被視為重複而不被收錄。
2. 頁面標題可以加上「- 第 2 頁」。例如「部落格 - 第 2 頁 | 你的公司」，Google 才能區分不同分頁。
3. 網址結構保持乾淨，不要用參數式如 ?paged=2。優先使用 /blog/page/2/ 這種「路徑式」網址，SEO 友善度較高。

六、給老闆的最後行動建議

下次登入你自家官網後台，做這三件事：

1. 打開部落格列表拉到底，看你的分頁是「上一頁 / 下一頁」還是「1 2 3 ...」。如果只有前者，這週就把它換掉。
2. 手機打開同一個列表，看分頁按鈕是不是擠成一團或超出邊界。誤觸率高就要簡化成三段式。
3. 用 Google Search Console 檢查 /page/2/、/page/3/ 是否有被索引。如果沒有，代表 canonical 或 JS 動態載入有問題，這是流量正在流失的訊號。

一個小小的分頁區塊，做對了可以把訪客的「翻頁率」從個位數推到兩成以上；做錯了就是把辛苦寫的第 15 篇、第 20 篇文章通通鎖在訪客看不到的地方。中小企業老闆的官網不缺內容，缺的往往是這種「讓內容被看見」的最後一哩路。

如果你不確定自家分頁做得對不對，歡迎跟我們聊聊，看要不要在下一次改版時一併調整。有時候調一個分頁區塊，帶來的成效比再寫十篇文章都還明顯。