可折疊內容是一種流行的網頁設計功能，可以透過收合頁面資訊，使其更易於導覽，提供更好的使用者體驗。然而，可折疊內容如何影響 SEO 仍存在爭議。本篇文章將介紹常見的折疊方式，探討可折疊內容對 SEO 的影響，以及如何在不對網站排名產生負面影響的情況下使用此功能。
什麼是可折疊內容
在關於 SEO 問題搜尋及英文用詞方面，越來越多專家將這種使用者介面控件稱為「Tabbed Content」。但從嚴格的角度來看，Tabbed Content 常見的使用方式也可以歸屬於折疊（Collapsible）內容的一種。為避免將 Tabbed Content 直接翻譯為「標籤頁式內容」，與瀏覽器分頁或標籤/導覽列程式碼的用法混淆，本文將以「可折疊內容」作為說明。
可折疊內容指的是使用者介面中可以折疊和展開的內容，可以讓使用者在需要時按下按鈕或點擊才能查看資訊的內容，並在不需要時將內容隱藏，以節省頁面空間。它常用於網頁和應用程式的設計，可以管理資訊，並可能在一定程度上提高使用者體驗。
最常見的可折疊內容形式為手風琴（Accordion）和分頁（Tab），後續將針對這兩種形式進行更詳細的解釋。
Accordion 的常見使用方式與優點
Accordion 是由「垂直堆疊標題」組成，通常用於網站的導覽列或者側邊欄等位置。點擊標題可以展開隱藏的內容，再次點擊標題可以隱藏展開的內容。由於這種網頁設計方式，先顯示部分最關鍵的資訊，需要使用者點擊才能查看更詳細的資訊，適合將冗長或複雜的資訊內容進行分類，因此它也是響應式網頁設計中的常見元素之一。
在產品頁使用 Accordion 的示意圖範例：
在上述的範例中，使用者可以只點擊商品規格，優先來了解瑜珈墊的尺寸是否符合需求，再來選擇查看其他相關內容資訊。
同樣，對 FAQ 內容使用 Accordion 也可以讓使用者選擇查看想了解的問題，示意圖範例：
何時使用 Accordion 式的可折疊內容？
- 頁面內容過長或圖片過多，欲縮短網頁頁面或減少滾動網頁頁面
- 在行動裝置介面想讓網頁完整顯示
- FAQ 內容，使用者可選擇點擊自己感興趣的問題
- 呈現使用者評論，點擊“閱讀更多”時可以展開這些評論
- 以簡化的方式呈現複雜的主題
- 細節資訊過多，欲根據使用者需求而選擇向他們展示不同內容
- 在特定頁面上進行分類，呈現各種細分/垂直/類別的資訊
以可折疊內容的優勢來看，Accordion 是設計行動裝置版網站的理想選擇（桌機版也適用），它可以確保整體頁面不會過於冗長，減少行動裝置網頁使用者的滾動次數。此外，透過點擊獲取需要的資訊，Accordion 可以避免其他不相關內容的干擾，進而提高使用者的體驗。但需要注意的是，若 Accordion menu 的內容過多，可能會對網站的加載速度產生負面影響，進而影響 SEO 排名。
Tab 的常見使用方式與優點
Tab 是一種可折疊內容的方式，通常用於發布多個與頁面主題有關聯性的頁面，也是響應式網頁設計中的常見元素之一。Tab 可以將內容分類成有意義的子部分，可以使空間得到有效利用，使用者可以高效且有效地訪問每個 Tab 中的內容。在產品頁中，Tab 內容更偏向於進行分類。以下示意圖說明了兩種預設加載方式：
對於相同類型的主題內容，如：服務項目，使用 Tab 的示意圖範例：
何時使用 Tab 式的可折疊內容？
- 縮短網頁頁面內容、減少滾動網頁頁面
- 將相關資訊與內容個別分組到對應的類別與標籤頁中
- 將複雜的主題以結構化的方式呈現，並按照特定層次結構有序地進行標籤
- 幫助使用者直觀地瀏覽網頁的內容
由於 Tab 對相關的內容進行分組，這種設計模式適合將冗長且相關的資訊內容進行分類，可以減少使用者滾動或跳轉頁面的次數，尤其是桌機版，因為 Tab 可以避免是在一個長頁面上展示所有的內容，藉此提高使用者體驗。
使用可折疊內容對SEO的影響
根據 Google 官方文件表示，現今有許多網頁設計元素會以動態方式顯示和隱藏內容，藉此提升使用者體驗，這類元素並不會違反 Google 政策。
即使 Google 能夠抓取隱藏元素（Tabbed Content 的展開內容）中的 HTML 內容，並且不將其視為隱藏內容，但 Google 認為使用者無法直接訪問/看到這些內容，並可能將這些內容視為不重要的內容。
可折疊內容 v.s. 隱藏內容
搜尋引擎對隱藏內容和可折疊內容的判斷方式不同。
對於隱藏內容，搜尋引擎會檢查網頁上是否有大量的隱藏內容，內容是否相關且對使用者可見。如果一個元素的 CSS 屬性 display 或 visibility 被設置為 none 或 hidden，或 CSS 屬性 height 或 width 被設置為0（除非有 aria-expanded 屬性），那麼 Google 會認為它是隱藏內容，並且不會給它太多的權重。如果網頁存在大量的隱藏內容，而內容與主題不符或對使用者不可見，對網站 SEO 會產生負面影響。
對於可折疊內容，搜尋引擎會檢查內容是否對使用者可見，並判斷內容是否相關。如果一個元素的 CSS 屬性 overflow 被設置為 hidden，那麼搜尋引擎會根據上下文來判斷它是可折疊內容還是隱藏內容。如果它與其他元素有相同的根元素，並且這些元素可以通過點擊來切換顯示，那麼搜尋引擎會認為它是可折疊內容。如果可折疊內容對使用者可見，且內容相關，那麼網頁不會被視為存在隱藏內容，對網站 SEO 的影響相對較小。
綜上所述，為了避免網站被視為存在隱藏內容，建議在網站設計時盡量避免使用隱藏內容的方式，應注意使用的 HTML 和 CSS 程式碼是否符合 Google 的指南和規範，並盡量使用可折疊內容的方式呈現網頁內容。
黑帽 SEO 技術「隱藏內容」可能的風險
有些網站使用可折疊內容當作黑帽 SEO 技術的一種手段，將隱藏內容設置為無法被使用者看見，有些網站甚至會故意將可折疊內容的展開按鈕設置得非常小，讓使用者很難找到展開查看的方法，而這些隱藏的文本可能包含一些惡意操作關鍵字的內容。
若不當使用，搜尋引擎可能會將這些隱藏內容視為對使用者無用的資訊，並定義為“隱藏內容”。近年來，搜尋引擎也不斷提高偵測和懲罰黑帽 SEO 技術的能力。如果你的網頁使用可折疊內容被判定為隱藏內容，可能會被降低排名，甚至被從搜尋引擎索引中移除，使其無法在搜尋結果頁面上展示。此外，搜尋引擎還可能禁止該網站在搜尋引擎上投放廣告，對網站的流量和營收造成負面影響。
民間研究：將 Tab 默認顯示可以提高使用者體驗
有什麼方法可以協助你更好地使用可折疊內容，同時降低網站被搜尋引擎視為隱藏內容的可能性呢？如果使用不正當的黑帽 SEO 技術，被搜尋引擎判定你的網頁為隱藏內容，又會對你的網站造成哪些負面影響呢？
資深顧問 Dan Shure 的研究表示，沒有被隱藏的 Tab 內容的網頁排名較高。在以下範例中，Dan 在一個關鍵字競爭度高的網頁中，將 Tab 內容預設為在行動裝置與桌面界面上皆可見，即不需要使用者點擊展開內容，這個網頁的排名就會明顯提升。相反地，若折疊內容的預設為不可見，即使這些內容可以完全渲染到 HTML 中，搜尋引擎索引後，網頁的排名並不會明顯提高。
因此，我們應以使用者角度考慮為主（尤其在行動裝置上），正確地使用可折疊內容，可以進一步提高使用者體驗。John Mueller 也對 Dan 的研究作出回應，Google 確實可以抓取 Tab 和 Accordion 中的文字內容並將其編入索引，前提是這些內容不是出於惡意操縱搜尋排名的目的而設計的隱藏內容。
應繼續使用可折疊內容嗎？
相較於是否使用可折疊內容元素，內容的實用性以及是否能被搜尋引擎爬取更為重要，因為搜尋引擎會視可折疊內容與一般文字內容為同等價值。因此，我們在使用可折疊內容時，需要平衡使用者體驗與品質內容。
使用可折疊內容的重點：
- 目的是增強使用者體驗，而不是操縱搜尋排名
- 確保內容與使用者相關且有用
- 避免隱藏重要內容，例如 Call-To-Action 或主要導覽
- 使用描述性標題，以幫助搜尋引擎了解內容
- 避免使用 JavaScript 隱藏內容，避免搜尋引擎可能無法爬取
若網頁內容並不多、不複雜，則建議移除可折疊內容，除了可以減少使用者不必要的操作、提升使用者體驗，也可能進一步幫助網頁轉換率。
對於內容較多、需要分類主題的網頁，應避免可折疊內容被視為黑帽技術所用的隱藏內容，且應與使用者的搜尋意圖相關。故建議在設計網頁時，若使用可折疊內容，應將重要內容設置為默認展開/可見。
總而言之，SEO 的目標在於提供優質的使用者體驗。只要正確使用可折疊內容，就能夠增進使用者體驗，同時不會對網站的 SEO 造成負面影響。如有任何 SEO 自然流量增長的問題，或想了解更多關於 awoo SEO 服務內容，歡迎立即諮詢，將有 awoo 專業顧問與您聯繫。
