官網『搜尋結果頁』(Search Results Page) 設計完整攻略：中小企業如何把訪客的關鍵字直接變成下一步詢問

先想像一個畫面

訪客在你的官網搜尋框輸入「不鏽鋼水槽」按下 Enter，畫面跳轉。他期待看到的是：「有」或「沒有」，如果有，就直接點進去。但實際情況常常是：跳出一堆亂七八糟的結果，排序莫名其妙，篩選按鈕不知道要怎麼點，或更糟——一片空白，只寫一句「找不到相關結果」。

訪客那一秒的反應通常是：關掉分頁。這一關，就等於你在 Google 廣告上花的每一塊錢、SEO 排名衝到第一的每一次點擊、辛辛苦苦寫的每一篇部落格，全部歸零。

搜尋結果頁（Search Results Page）就是訪客「主動舉手告訴你他要什麼」的那一頁。他打的每一個字都是強烈購買訊號，比首頁的滑鼠移動更有意圖、比部落格文章的滾動更接近成交。可是絕大多數中小企業的官網，這一頁做得最爛——通常就是 WordPress 內建那個灰灰的預設樣式，什麼優化都沒做。

這篇把搜尋結果頁該怎麼設計、從版面到細節、從有結果到沒結果，全部一次講清楚。

Photo by MJ Duford on Unsplash

為什麼搜尋結果頁是「錢最集中的一頁」

先講一個很多老闆都不知道的事實：會主動使用官網站內搜尋的訪客，購買意圖比一般瀏覽者高出 2 到 3 倍。他不是隨便逛，他是「有需要、正在找」。這種訪客只要體驗流暢，成交率會比首頁進來的普通訪客高很多。

換句話說，你的搜尋結果頁若做得好，等於是把最有意圖的那群人集中在一個版位——這是全站轉換率最高、也最值得投資設計的頁面之一。可是通常怎麼被對待？WordPress 主題預設，配色跟其他頁面不一致，搜尋框放在角落找半天，搜完出來一片單調列表，沒圖片、沒篩選、沒排序。

對比一下淘寶、蝦皮、Amazon——他們的搜尋結果頁是產品經理最花時間優化的頁面之一，因為每提升 1% 的轉換就是幾百萬營收。中小企業當然做不到那種投入，但基本盤該做的還是要做。

結果頁該有的六個核心元素

1. 搜尋框要「留在頁面上」，不能只在頂端

很常見的錯誤：訪客打完關鍵字進到結果頁，搜尋框就消失了或縮到頁尾。他若想改關鍵字（例如從「水槽」改成「不鏽鋼水槽 60cm」），就要滑回最上面，或者點瀏覽器的返回。這一動就流失一批人。

正確做法：結果頁最上方要有一個顯眼的搜尋框，把當前關鍵字填進去，訪客可以直接修改再送出。這叫「持續搜尋（Persistent Search）」，是搜尋 UX 最基本的一條。

2. 搜尋摘要行：告訴訪客「他搜的是什麼、找到幾筆」

結果最上方要有一行類似這樣的文字：找到 24 筆關於「不鏽鋼水槽」的結果。看似小事，但對訪客的心理影響很大——他確認自己搜對了，也知道有沒有東西可看。若你的網站商品/文章很多，甚至要顯示「找到 24 筆結果，本頁顯示 1-12 筆」。

另外一個細節：訪客搜的關鍵字要在結果標題與描述中「高亮」（通常用粗體或黃底）。這一動可以讓訪客在滑動列表時，眼睛自動被吸到相關字上，判斷速度加快 30% 以上。

3. 篩選（Filter）與排序（Sort）：讓 24 筆變成 3 筆

如果搜尋只是把 24 筆結果丟出來按預設排序，訪客還是要一筆一筆看。有效率的結果頁一定要有兩個工具：

篩選放左側或頂端，例如「價格區間、品牌、材質、尺寸、有無庫存」。B2B 服務網站則可能是「產業別、服務類型、內容形式」。訪客勾選幾個條件，結果馬上縮到 3-5 筆，決策時間立刻大幅縮短。

排序下拉選單放右上，選項通常是「相關性、最新、價格由低到高、價格由高到低、熱門度」。B2B 網站可以簡化為「相關性、發布日期、瀏覽次數」。

提醒：篩選跟排序的預設值一定要調整。WordPress 或多數 CMS 預設「日期最新」，但搜尋結果頁的最佳預設是「相關性」——訪客搜的字要跟結果的匹配度最高。

Photo by Christin Hume on Unsplash

4. 結果卡片要有「圖片＋標題＋兩行描述＋一個 CTA」

單純的文字列表已經過時了。訪客在手機上滑得很快，只有純文字很難引起注意。每一筆結果都應該是一張視覺卡片，包含：縮圖（電商就是產品圖、服務業就是案例圖或圖示）、標題（把關鍵字高亮）、簡短描述（80-120 字左右）、以及一個明確的下一步按鈕（「查看詳情」「加入詢問」）。

若是文章類型的結果，卡片還可以加上「分類標籤」與「發布日期」，訪客一眼就能判斷內容新舊。

5. 分頁或無限捲動：依內容量決定

結果超過一頁（通常一頁 10-20 筆）時，需要選擇分頁方式。三種常見做法：

傳統分頁：頁尾放「1 2 3 ... 下一頁」按鈕。優點是 SEO 友善、訪客有明確位置感、可以直接跳到後段。缺點是每次都要重新載入。適合結果筆數固定、訪客會反覆瀏覽的網站。

「載入更多」按鈕：頁尾放一顆「查看更多結果」按鈕。優點是操作明確、不會意外一直滑。適合大多數 B2B 內容型網站，是最推薦的平衡做法。

無限捲動：滑到底自動載入下一頁。優點是流暢、適合純瀏覽情境（例如 Instagram、Pinterest）。缺點是訪客會滑到迷路、沒有頁尾、SEO 也較差。除非是純逛街型電商，否則不建議中小企業採用。

6. 「相關搜尋」與「熱門搜尋」提示

結果頁底部或側欄放一個「你可能還想找：」區塊，列 5-8 個相關的關鍵字連結。這個功能有兩個好處：一是幫訪客拓展搜尋範圍（他打「水槽」，你提示「洗手台」「不鏽鋼水槽」「排水管」），二是把「熱門搜尋詞」暴露出來——這些字往往就是你官網的高流量商機，很多老闆連自己網站被搜什麼都沒看過。

空狀態頁：那句「找不到」的殺傷力

訪客搜完沒有結果，這一頁的處理方式直接決定他是關掉還是繼續逛。壞的空狀態頁只寫一句「查無資料」，接著就是空白。訪客的下一動作 100% 是關掉分頁。好的空狀態頁至少要做到四件事：

第一，明確告訴他搜了什麼、為什麼沒結果。例如「找不到與『不鏽鋼水槽 90cm』完全符合的結果，可能原因：關鍵字太長或商品尚未上架」。

第二，給替代建議。列出 3-5 個系統判斷可能相關的商品或文章，前面加一句「你可能有興趣：」。

第三，提供關鍵字修正建議。若訪客明顯打錯字（例如「水糟」而非「水槽」），系統要主動提示「你要找的是不是：水槽？」。這個功能在 WordPress 上有現成的搜尋外掛可以做。

第四，把「聯絡我們」變成主要 CTA。既然搜不到，就直接告訴他「我們可能有你要的商品但尚未上架，直接聯絡我們客服，24 小時內給你答覆」。搭配一顆明顯的按鈕，最好還帶 LINE 或 Email 連結。這樣可以把「跳出」轉成「詢問」，是所有中小企業搜尋結果頁最容易被忽略的成交機會。

Photo by Stephen Dawson on Unsplash

搜尋記錄是被浪費最多的商業情報

建議每家做官網的中小企業都要開通「站內搜尋分析」——GA4 內建就有，只要在 GA4 後台的「事件」設定裡打開「site_search」追蹤，就能看到訪客到底搜了什麼字、多少次、搜完有沒有跳走。

這份報表通常會給老闆三種驚喜：

第一種：訪客一直搜某個你沒賣的商品或服務。這代表市場需求存在，可能是新品開發或代購的機會。

第二種：訪客一直搜某個你有賣但在網站上找不到的東西。這代表你的分類架構或 SEO 出問題了，明明有商品卻藏在很深的地方。

第三種：某些搜尋詞出現後訪客跳出率超高。這代表結果頁沒滿足他們，要嘛結果不精準，要嘛沒有他要的品項——都是可以精準改善的地方。

搜尋記錄本身就是你網站的「客戶提問簿」，每一條都值錢。可惜 90% 的中小企業從來沒看過這份報表。

手機版要特別注意的兩件事

台灣中小企業官網流量現在有 60-70% 來自手機，但搜尋結果頁在手機上常常做得很差。兩個最常見的問題：

第一是篩選面板佔滿螢幕。桌機版左側篩選欄在手機上直接橫掉，訪客要找的結果反而看不到。解法是把篩選改成上方一顆按鈕，點開才彈出全螢幕篩選面板，選完關閉回到結果列表。

第二是搜尋框太小、輸入不順。手機上輸入本來就慢，若搜尋框只有半個螢幕寬還不能自動聚焦，很多訪客直接放棄。手機版的搜尋框要夠寬、要主動彈鍵盤、要支援清除按鈕（輸入右邊的 X），這些是最基本的細節。

結語：做網站不只是首頁漂亮

很多老闆花大錢做官網，最在意的是首頁動畫、Hero 大圖、關於我們的照片——這些當然重要，但那都是「陌生訪客第一印象」。真正決定成交的，往往是那些不起眼的頁面：搜尋結果頁、聯絡表單、感謝頁、404 頁。

搜尋結果頁尤其特別——這是訪客「主動用鍵盤告訴你他想要什麼」的那一頁。任何一個做電商或內容型網站的中小企業，都應該把這頁列為第二輪優化的優先項目（第一輪是首頁與服務頁）。

如果你的官網現在的搜尋結果頁還是 WordPress 預設的樣子——建議這週就打開來看一次，用你自己會搜的字測試 5 遍，看看訪客的體驗到底是什麼樣子。看完通常會很想立刻動工。

做官網不是一次搞定的事，是持續優化的過程。而搜尋結果頁，往往就是那個「改一下就有感」的高投報率改動。