官網『相關文章推薦區塊』(Related Posts) 設計完整攻略：中小企業如何用一塊小小推薦讓訪客看完一篇還想看下一篇

「訪客好不容易滑到文章底部，接下來呢？就這樣讓他關掉分頁嗎？」很多中小企業的官網部落格花了大把力氣寫內容，卻在「文章看完之後」這個關鍵時刻放生訪客。訪客一走，SEO 加分機會沒了、詢問單也沒進來，等於花錢請他來看一篇就走。

其實只要在文章底部放一塊「相關文章推薦」(Related Posts)區塊，就能把「看完一篇」變成「繼續看下一篇」——訪客停留時間變長、頁面瀏覽數上升、Google 也會覺得你的網站「內容之間有關聯」，順勢把排名往上推。這篇就把中小企業官網要怎麼設計、擺放、串接「相關文章推薦區塊」的實戰做法整理清楚，看完就能立刻檢查自己的網站有沒有做好這件事。

一、為什麼「相關文章推薦」是官網最被低估的一塊版位？

先講三個實際的效益，讓你判斷這個區塊值不值得花時間做：

1. 直接把「單頁跳出」變成「多頁瀏覽」：訪客只看一頁就離開，Google Analytics 上會顯示高跳出率、低平均停留時間，這對 SEO 是負面訊號。相關文章區塊會多給訪客一個「下一步」的選擇，很多網站導入之後，每次工作階段瀏覽的頁面數會從 1.2 拉到 1.8 甚至 2.5。

2. 幫 Google 建立「內容主題群集」(Topic Cluster)：相關文章區塊本質上就是一組「站內連結」，Google 會透過這些連結理解你的網站是圍繞哪些主題在寫。同主題的文章互相連結越多，Google 越容易判斷你是這個領域的專家，主題相關關鍵字排名會一起被拉起來。

3. 讓好文章不會「寫完就沉底」：新文章發佈後熱度會慢慢下滑，但如果你在新文章底部推薦一篇兩年前寫的長青文章，就等於讓老文章不斷被曝光。長期下來，過去的內容資產會持續替你帶流量、帶詢問。

Photo by Dan Counsell on Unsplash

二、相關文章推薦區塊，可以怎麼「挑」文章？

很多網站的相關文章區塊做起來很雷，就是因為「推薦邏輯」隨便寫。以下四種常見的挑選方式，各有適合的情境，可以混搭使用：

1. 同分類 / 同標籤（Same Category / Tag）：最容易做，也最直觀。訪客看的是「網站製作」分類，就推薦同分類的其他文章。適合分類設計清楚、每個分類都有 5 篇以上文章的網站。缺點是如果分類太粗（例如整個網站只有 3 大分類），推薦出來的關聯性會有點勉強。

2. 手動指定（Manual Pick）：由編輯自己在後台選 3 篇要放的推薦文章。控制力最強，可以順著讀者的心理動線去鋪陳——例如講完「SEO 是什麼」就推薦「關鍵字研究」跟「內部連結」，形成一個學習路徑。缺點是很費工，文章一多就更新不完。

3. 內容相似度（Content-based）：用 TF-IDF、Embedding 或標籤重疊度自動判斷文章內容有多接近。準確度最高，但需要一點技術門檻。WordPress 有現成外掛（YARPP、Contextual Related Posts）可以用，其他 CMS 大多要自己寫。

4. 熱門文章／最新文章（Popular / Latest）：不是真的「相關」，但可以當備援。當某篇文章找不到夠相關的其他文章時，改推熱門或最新文章，總比留白好。

老闆最實用的組合：中小企業如果沒特別開發預算，建議用「同分類 + 手動指定」的混合策略——大部分文章走同分類自動推薦，重點文章由編輯手動指定 3 篇一定要一起看的。這樣既省力，又能在轉換率高的頁面做精準引導。

三、擺放位置：不是塞在最下面就結束了

相關文章區塊擺哪裡，對點擊率影響非常大。以下三個位置各有適合的情境：

1. 文章正文結束後、頁尾之前（最經典）：這是最主流的做法。讀者剛看完主文，注意力還在，這時給他 3 篇下一步選擇，點擊率最高。建議放 3-4 篇，超過 6 篇反而會讓人選擇障礙。

2. 文章內文中段插入（In-content Recommendation）：把 1-2 篇高度相關的文章插在文章中間，用「延伸閱讀」的方式呈現。這個位置適合有「相關概念」需要補充的段落——例如講到「網站速度」時，中間插一篇「Core Web Vitals 完整攻略」。這種做法點擊率比底部高，但要小心不要打斷閱讀流暢度。

3. 桌機版側邊欄（Sidebar）：長文章訪客滑到中段時，側邊欄的推薦區塊會一直在視線裡，適合放「熱門文章 Top 5」。但手機版通常會被隱藏或改成折疊區塊，不是主要曝光位置。

Photo by rawkkim on Unsplash

四、視覺設計：5 個細節決定點擊率

同樣是相關文章區塊，設計得好跟設計得糟差距很大。以下幾個細節建議一起做：

1. 一定要有縮圖：純文字連結的點擊率會比有縮圖的低 60% 以上。縮圖不用複雜，同一張特色圖就夠。

2. 標題要完整顯示：不要為了排版工整就把標題強制截斷（例如只顯示前 20 字加「...」），這樣訪客看不到重點會直接跳過。寧可讓標題折兩行，也要讓人看完能判斷內容。

3. 加上分類標籤或閱讀時間：像「SEO・8 分鐘閱讀」這樣的小標籤，可以幫訪客快速判斷「這篇適不適合我現在看」，點擊率會提升。

4. Hover 動效要克制：滑鼠移過去有「淡淡的陰影加深」或「圖片微微放大 1.05 倍」就夠，不要用大幅度動畫或彈跳效果，會讓網站看起來廉價。

5. 手機版一定要橫向排列或大卡片：手機版常見錯誤是把 3 篇文章擠在一列變小小的卡片，結果縮圖看不清楚、標題也讀不出。建議手機版直接改成「單欄大卡片直向堆疊」，或是「橫向滑動 Swipe 卡片」，可讀性會好很多。

五、後端邏輯：3 個技術細節不能省

視覺設計做好之後，後端邏輯也有幾個容易忽略的點：

1. 排除已顯示的文章：如果訪客已經看過的文章又出現在推薦區塊，會讓人覺得「網站沒東西可看了」。可以用 cookie 或 localStorage 記錄，把最近 7 天看過的文章從候選池裡拿掉。

2. 排除草稿、私密、過時內容：後端撈相關文章時記得過濾掉 status = draft、private，以及超過 2-3 年沒更新的舊文（除非是特別標記為「長青文」）。避免推薦出來的內容讓訪客覺得網站沒在經營。

3. 快取機制不能省：如果每次載入文章都即時計算推薦名單，網站速度會變慢。建議把「每篇文章的推薦名單」預先算好存起來（Redis 或資料庫欄位皆可），每天或每週更新一次即可。這對 Core Web Vitals 的 LCP 分數影響很大。

Photo by Paul Lichtblau on Unsplash

六、常見錯誤：這 3 個做法一定要避開

錯誤 1：推薦到「產品頁」或「聯絡我們」：有些老闆會想說「反正都是要導流量，不如推到聯絡頁」，結果訪客閱讀節奏被打斷，反而覺得被推銷。相關文章區塊就是純內容推薦，轉換的動作用其他區塊（Sticky CTA、文末 CTA）去做即可。

錯誤 2：一次推薦太多篇：貪心放 9 篇 12 篇，反而讓訪客選擇障礙，全部都不點。3-4 篇是甜蜜點，最多不超過 6 篇。

錯誤 3：推薦邏輯永遠不檢查：導入之後就放著不管，一年後發現推薦出來的文章全部是同一批熱門文。建議每個月看一次 GA4 的「事件」或「著陸頁」報表，觀察相關文章區塊的點擊率跟哪些組合表現最好，持續調整。

七、給中小企業老闆的行動建議

如果你的官網部落格已經累積 10 篇以上文章，卻還沒做相關文章推薦區塊，這件事應該排在下一次改版的優先清單裡。以下是三個立即可以做的事：

第一步：打開 GA4，看看你的部落格文章「平均工作階段頁數」是不是低於 1.5？如果是，就代表訪客看完一篇就走，相關文章區塊會帶來很直接的改善。

第二步：檢查現有官網（如果是 WordPress，用 YARPP 或 Contextual Related Posts 外掛就能快速上線；如果是自製系統，就跟你的網站廠商討論「同分類 + 手動指定」的混合方案）。

第三步：上線後兩週，回頭比較「平均每次工作階段頁數」跟「跳出率」的變化。如果數字有動，就代表這塊區塊在替你賺流量。如果沒動，回頭調整推薦邏輯跟視覺設計。

官網部落格不是寫完就結束的資產，是要靠內部連結、推薦區塊、CTA 一層一層串起來，才會變成真正會替你帶詢問單的行銷武器。相關文章推薦區塊就是其中最基礎、最好做、卻最多人沒做好的一塊。花一個下午把它做起來，未來每一篇新文章都會自動幫你把舊文章往前推——這才是真正的「內容複利」。