SEO優化

首頁輪播,真的能讓訪客看到更多嗎?

多數官網和電商首頁一開始討論改版,話題常常會繞到要不要在最上面放一組自動輪播的大圖。這個提案幾乎不會被拒絕,因為輪播看起來像一次解決所有人的需求,公司形象、活動預告、新品上市,誰都可以分到一格,誰都不用被犧牲掉。

問題是,這套「放更多等於對搜尋與轉換更有利」的假設,很少真正被檢驗過。多數使用者看不看得到第二張、第三張?自動輪播會不會拖慢首頁的載入速度?輪播裡那些排進圖片裡的文字,搜尋引擎讀得到多少?這幾個問題,才是決定輪播值不值得放在首屏的真正關鍵。

自動輪播幾乎是每個首頁的標準配備

打開任何一個中型以上的企業網站,首頁最上方放一組會自動切換的大圖幾乎是預設值。這個決定很少是設計師自己想放的,多半是業務部門想要活動訊息露出、行銷部門想要新品上市有版位、公司高層想要形象照有機會被看到。每個部門手上都有一則「非放不可」的內容,誰都不肯先被排除,輪播就成了最方便的折衷方案,反正版位可以一格接一格輪流換,誰都能分到。

Google 旗下的開發者網站 web.dev 在一篇專門討論輪播的文章裡,直接點出這個現象背後的動機:輪播「常常被用來安撫多個部門,避免做出關於商業優先順序的決定,因此輪播很容易變成放置無效內容的垃圾場」。使用者體驗研究機構 Nielsen Norman Group 在較早的一篇分析裡也講到同一件事:輪播「最大的好處,是能讓不只一則內容佔據首頁最搶眼的那塊版位,這能緩解誰的內容最該被放上去的內部爭執」。

兩個獨立來源,一個是搜尋引擎廠商自己的工程團隊,一個是專門研究使用者行為的機構,講的其實是同一件事。輪播存在的理由,往往不是「這樣對使用者或搜尋引擎比較好」,而是「這樣公司內部比較好談」。省下來的,是一次得罪人的決策,真正該被排出優先順序的,是這幾則訊息裡哪一則現在最重要,而不是把決定往後拖、讓每則訊息輪流露臉。

省下的內部協調成本,轉嫁給了使用者與搜尋引擎

這筆省下來的協調成本,並沒有真的消失,只是換了個對象承擔。使用者的注意力、頁面的載入速度、搜尋引擎讀到的內容,三個地方都因為這個折衷方案打了折扣。

多數使用者只看得到第一張輪播

Nielsen Norman Group 那篇分析裡有一句話講得很直接,不管螢幕是 30 吋還是 3 吋,使用者常常直接掃過這些大圖,錯過裡面除了第一張以外的所有內容。也就是說,不管輪播是自動播放還是要使用者自己點箭頭切換,第一張永遠拿走絕大多數的關注,後面幾張大概只是陪榜。這也是為什麼同一份分析建議輪播的張數要控制在 5 張以內,理由是使用者不太可能跟超過這個數量的內容互動。塞第六、第七張進去,多半只是自我安慰。

這個結論不是憑印象講的。聖母大學(University of Notre Dame)網站開發團隊的 Erik Runyon 在 2013 年公開發布過一份自家的點擊追蹤分析,方法是透過 Google Analytics 事件追蹤實際訪客的點擊,不是問卷、也不是猜測。結果顯示,ND.edu 首頁輪播在追蹤期間,整體只有約 1%的訪客點擊過輪播裡的任何一格內容,而這些點擊裡有 84%集中在第一格,其餘四格加總平分剩下的份額。同批追蹤裡,三個不會自動輪播、需要手動切換的網站,整體點擊率介於 1.7%到 2.3%,第一格仍拿下 48%到 62%的點擊;唯一採自動輪播的那個網站,雖然整體點擊率最高,來到 8.8%,但第一格還是占了 40%,第二格降到 18%,最後一格只剩 11%。

換句話說,就算把輪播設計成自動播放、逼使用者多看幾眼,第一張搶走的關注度還是遠遠壓過其他每一張。多塞幾張進去,換來的不是「多幾個訊息被看到」,而是「同一批注意力被切得更碎」。

ND.edu 首頁五格輪播的點擊分布,第一格拿走 84%,其餘四格各只有 4%
輪播的點擊高度集中在第一格,多塞幾張只是把同一批注意力切得更碎(資料來源:Erik Runyon,2013)。

訊息塞得越多,每一則被記住的機會越低

Nielsen Norman Group 另一篇專門討論自動輪播的文章舉了一個實測案例:某網站把一句「折扣 100 元」的促銷訊息放進每 5 秒自動切換一次的輪播,結果在使用者停留期間,這則訊息只有 20%的時間真的顯示在畫面上。這個數字反過來看,正好戳破「輪播能放更多內容」這個賣點的邏輯,內容確實變多了,但每一則的實際曝光時間,也跟著被瓜分掉了。塞進輪播的訊息越多,每一則能被看到、被記住的機會就越低,這是簡單的除法,不是玄學。

同一份研究也提到,會動、看起來像廣告的元素,本來就容易被使用者當成廣告忽略掉。這跟長年被討論的「橫幅視盲」是同一套機制。使用者一旦認出某個區塊看起來像廣告,注意力就會自動跳過,不管那則訊息本身有沒有價值。自動輪播恰好符合這個特徵:會動、佔滿版面、位置又在首頁最上方,等於同時具備了「像廣告」的所有條件。

輪播常是首頁載入變慢的頭號嫌疑犯

輪播對搜尋引擎最直接的傷害,不是內容看不到,而是拖慢速度。web.dev 的說法很明確:「大型的頂端輪播介面通常會包含網頁的最大內容繪製(LCP)元素,因此可能會對 LCP 造成重大影響」。LCP 是 Google 用來衡量使用者感覺頁面主要內容多快出現的核心指標,同一篇 web.dev 對 LCP 的說明也給出具體門檻,良好的使用者體驗,LCP 應該落在 2.5 秒以下,而且要用第 75 個百分位數當評估基準,行動裝置與電腦裝置分開衡量,不能混著算。

問題出在最常見的實作方式,許多網站用 JavaScript 去啟動輪播內容的載入,而不是直接寫進頁面的 HTML 標記裡。web.dev 把這個做法點名為「使用輪播時最容易犯下的效能錯誤」,因為瀏覽器要等 JavaScript 執行完才知道該去載入哪張圖,圖片自然比寫在 HTML 裡的內容晚一步出現,LCP 分數也跟著被拖累。除此之外,不少輪播用的是不夠順暢的非合成動畫,這類動畫容易造成版面配置位移(CLS),在有自動播放輪播的頁面上,甚至可能導致無限的 CLS,版面一直因為輪播切換而跳動,數值永遠停不下來。web.dev 給的解法是確保自動播放輪播裡的每一張圖片都用相同的內在尺寸,版面才不會因為圖片大小不一而反覆跳動。

這套計算方式本身也還在調整。Chrome 88 之後,就算輪播圖片已經從 DOM 移除,仍可能被視為潛在的 LCP 候選項目,對自動輪播網站的分數影響偏中性或正面;Chrome 121 之後,輪播這類水平捲動圖片改採跟垂直捲動一樣的載入門檻,使用者比較不容易察覺圖片還在載入,但下載次數會跟著增加。細節一直在變,但基本結論沒有變,版面上方那個大型輪播,多半就是拖慢整頁速度的第一嫌疑犯。

輪播裡的文字,天生就比首屏靜態文字慢一步

輪播還有一個更隱形的弱點。裡面的文字內容,格式上常常根本不是文字,web.dev 的說明是這樣寫的——輪播的文字內容「通常會嵌入對應的圖片檔案,而不是使用 HTML 標記單獨顯示」。設計師常把標題、口號、按鈕文字這些內容,連同背景一起做成一張完整的圖片,而不是把文字用真正的文字節點寫進頁面。這種做法對無障礙輔助工具、多語系呈現、圖片壓縮率都不利,因為讀到的只是一張圖,不是一段可以被選取、被朗讀、被翻譯的文字。

前面提過,最大內容繪製(LCP)只會計入含有文字節點的區塊層級元素,或圖片、影片元素本身。如果文字是圖片的一部分,它就不構成頁面上「可以被當成文字內容」的節點。再加上不少輪播還是靠 JavaScript 動態注入內容,比寫進初始 HTML 的內容晚一步出現。內容出現得越晚、格式上又不算獨立的文字,不管是對使用者的第一印象,還是對頁面主要內容的判定,都比首屏其他直接寫在 HTML 裡的靜態文字弱了一截。

文字烤進圖片就無法被選取、朗讀、翻譯,也不構成計入 LCP 的文字節點;寫進 HTML 才可以
同一句標題不是烤進圖片,而是寫成 HTML 文字節點,才能被讀取、翻譯並計入頁面主要內容。

把首屏留給一句話,而不是留給一組輪播

把前面幾股力量放在一起看,答案其實不複雜。與其把首屏塞滿一組會自動切換、多數人只看得到第一張的輪播,不如把這塊版位留給一個明確的主訊息,一句話、一張圖,搭配一段可以被讀到、也可以被搜尋引擎正常處理的真實文字。

自動輪播首屏多數人只看第一張又拖慢 LCP,單一主訊息首屏聚焦一個重點、文字可被讀取
與其把多則訊息塞進輪流播放的輪播,不如把首屏留給一個明確主訊息,一句話、一張圖搭配可被讀取的真實文字。

Nielsen Norman Group 在同一篇分析裡也給出類似的建議,靜態的主視覺(hero image),在不少情況下反而是更成熟的做法,因為設計者被迫只能選一張圖、一句話來傳達重點,不會因為「反正輪播有好幾張,總有一張會被看到」而心存僥倖、選一個平庸的素材。web.dev 的說法可以直接呼應這個立場,如果內容本身沒辦法在輪播以外吸引使用者,把它塞進輪播,並不會讓成效變好。

如果真的有好幾則訊息都值得露出,答案不是把它們硬塞進同一塊首屏版位輪流播放,而是幫每一則訊息找一個自己的位置,往下捲動之後的區塊、或是各自獨立的頁面,讓每則訊息都用完整的篇幅講清楚,而不是擠在同一格輪播裡,輪到自己的那幾秒鐘匆匆亮相。內部要解決的問題,從來就不是「這幾則訊息怎麼都塞進首頁最上面」,而是「這幾則訊息裡,哪一則現在最重要」,這個決定本身才該被好好談清楚,不該用一組輪播去迴避它。

下一次有人提議在首頁放一組自動輪播,值得先問一句,這是為了讓使用者看到更多內容,還是為了讓內部不用選邊站?這兩個問題的答案,通常不一樣。

常見問答

本區問答由 AI 依文章內容自動整理,僅供快速參考,正式內容仍以全文為準。

首頁自動輪播真的能讓更多訪客看到內容嗎?

多數情況下不會,Nielsen Norman Group 的追蹤研究發現,使用者常常直接掃過輪播大圖,只看得到第一張,後面幾張大概只是陪榜;把多則訊息硬塞進同一組輪播,換來的不是被看到的機會變多,而是同一批注意力被切得更碎。

首頁輪播第一張以外的內容真的有人看嗎?

很少,聖母大學網站團隊在 2013 年用 Google Analytics 追蹤實際點擊,發現自動輪播裡 84% 的點擊集中在第一格,其餘四格只平分剩下的份額,就算輪播自動切換逼使用者多看幾眼,第一張搶走的關注度依然遠遠壓過其他每一張。

輪播裡的促銷訊息使用者實際看得到多久?

遠比想像中短,Nielsen Norman Group 的實測案例顯示,一句促銷訊息放進每 5 秒自動切換一次的輪播,使用者停留期間這則訊息只有 20% 的時間真的顯示在畫面上,塞進去的訊息越多,每一則能被看到、被記住的機會就越低。

首頁輪播為什麼常常是網站載入變慢的原因?

因為輪播圖片常包含頁面的最大內容繪製(LCP)元素,而許多網站又用 JavaScript 才去載入這些圖片,瀏覽器得等程式執行完才知道該載入哪張圖,圖片自然比寫進 HTML 的內容晚一步出現,LCP 分數也跟著被拖累。

輪播裡的文字為什麼常無法被搜尋引擎讀到?

因為設計師常把標題、口號這些文字連同背景做成一張完整的圖片,而不是寫成頁面裡的文字節點,這種做法對搜尋引擎判定主要內容不利,也讓輔助工具沒辦法選取、朗讀或翻譯這段內容,等於讀者跟搜尋引擎都只看得到一張圖。

資料來源
  1. Carousel best practices — Google
  2. Largest Contentful Paint (LCP) — Google
  3. Carousel Usability: Designing an Effective UI for Websites with Content Overload — Nielsen Norman Group
  4. Auto-Forwarding Carousels and Accordions Annoy Users and Reduce Visibility — Nielsen Norman Group
  5. Carousel Interaction Stats — Erik Runyon