視覺破壞 vs 內容完整：details/summary 摺疊不是 cloaking + label 微調 0 影響 SEO
文 / Coolkid發布：2026-06-27 · 最後更新：2026-07-08閱讀約 9 分鐘
摘要
首頁快答那 720 字大段破壞了 RPG 儀表板的視覺，我想把它藏起來，只留給 Google 跟 AI 讀。但把內容藏到人看不到、只留給爬蟲，踩的是 Google 垃圾內容政策裡的「隱藏文字與連結」。至於 cloaking，指的是對使用者跟爬蟲送出不同內容，兩條是不同的紅線(2026-07-08 更正，初版誤稱 cloaking)。合法的替代方案是 details 加 summary 這組原生 HTML 摺疊，Google 明文把手風琴跟分頁列為非違規。視覺上 720 字壓成 1 行，HTML 完全保留，四方都正常抓得到。
1. 首頁 lab-summary 視覺破壞 vs 內容完整的取捨
#22 第 1 週第 2 天，我在首頁的 hero 跟探索區之間插入一段摘要，720 字 4 段。
AEO、GEO、RAG 三方都覆蓋到，首頁字數從 276 變成 995。
也解掉了盤點標的內容太薄，補上 4 個落在甜蜜區的段落。
但首頁的 RPG 儀表板風格是 NES.css 加 5 張探索卡加玩家狀態列。720 字大段塞在中間，視覺破壞很嚴重。
讀者第一眼看不到那 5 張探索卡，全被擠到畫面下方，設計感整個沒了。
問題定義是這樣，想把視覺收乾淨，但內容對 Google、Perplexity、AI 摘要、語音助理四方都還是要留著。
第一個直覺是「隱藏給人類看，留給爬蟲讀」。但這個直覺踩紅線。
2. 純隱藏踩的是「隱藏文字」紅線(不是 cloaking),4 個合法替代方案
先更正一個我自己犯的分類錯誤，2026-07-08，感謝 Threads 留言指正。
把內容藏到人看不到、只留給爬蟲讀，踩的不是 cloaking，是垃圾內容政策裡的另一條「隱藏文字與連結」。
cloaking 的定義是對使用者跟搜尋引擎呈現不同內容。
靠 user-agent 或 IP 分流，送出兩份不同的 HTML。display:none 對所有人送的是同一份，根本不符合定義。
但把文字縮排到畫面外、透明度設 0、白底白字這些老招，性質不一樣。
如果目的是操弄排名，而且真人無法透過正常互動看到，那就是隱藏文字違規，可能收到人工處分。
判定的核心是「操弄意圖加上真人無法取得」，不是「用了某個 CSS 屬性就直接罰」。依據是 Google 垃圾內容政策，2026-05-15 更新版。
四個合法的選項，按推薦順序排：
| 方案 | 視覺 | SEO/GEO/AEO 影響 | 工時 |
|---|---|---|---|
| A. <details> 摺疊 (推薦) | 單行 summary,點開展開 | 0 影響(HTML 完全在,四方都正常抓) | S 15min |
| B. 移到首頁底部 FAQ 之前 | hero → explore 視覺乾淨 | 微降(GEO 偏好「文章前段抽取」但首頁不是 article) | S 10min |
| C. 縮小字級 + padding | 視覺壓縮一半 | 0 影響 | S 5min |
| D. 純 JSON-LD(HTML 完全砍) | 完全消失 | audit 估降 ~40%(AI Overviews 主要看 HTML 不只看 schema) | S 10min |
我選 A。details 加 summary 是原生 HTML，Google 視為漸進揭露，不是隱藏。
前面 SEO 盤點建議的「全站 0 個摺疊」就是這一項，順手解掉兩個問題。
3. 為什麼 details/summary 不算 cloaking
Google 對 cloaking 的定義是「給人類顯示一種內容，給爬蟲顯示另一種內容」。
details 跟 summary 是 W3C 標準的原生元素。
行為是人類預設看到一行摘要，點開才看到完整內容。這跟彈窗、下拉選單同類，屬於漸進揭露，不是隱藏。
關鍵差別在於，cloaking 是依請求者的身分送出不同內容。
同一個網址，人類拿到一份 HTML，Googlebot 拿到另一份，那才是 cloaking。摺疊對兩者給的 HTML 完全相同，只是使用者視覺上要點一下才展開。
這是結構性的介面設計，不是條件性的隱藏。
Google 的政策甚至明文把手風琴跟分頁內容列在非違規清單裡，跟提示框、螢幕閱讀器輔助文字同一類。
實測過了。Google Search Console 的「測試網址實際結果」可以看到 Googlebot 渲染完的 DOM，摺疊裡的內容完整出現。
Perplexity 跟 ChatGPT 的抓取程式讀的也是內層 HTML，不受視覺影響。語音助理的選擇器選的是元素，不是可見度，摺疊裡的快答一樣被選得到。
4. 實作:用 details/summary wrap lab-summary section
build.py build_home() 把原 lab-summary section 結構:
改動只有一個地方。
<section class='block hero-summary' id='lab-summary'>
<div class='wrap'>
<p class='sec-num'>✦ 先講結論</p>
<h2>Coolkid AI Lab 一頁速答</h2>
<div class='quick-answer' id='lab-quick-answer'>
... 720 字 lead + 3 Q&A ...
</div>
</div>
</section>改成:
<section class='block hero-summary' id='lab-summary'>
<div class='wrap'>
<details class='lab-summary-details'>
<summary class='lab-summary-trigger' style='list-style:none;...'>
✦ Coolkid AI Lab 一頁速答(點開看 30 秒總覽) ▾
</summary>
<div class='quick-answer' id='lab-quick-answer'>
... 720 字內容完整保留 ...
</div>
</details>
</div>
</section>summary 用行內樣式移除預設的箭頭，自己加一個符號。
內容 720 字完全留在 HTML 裡，DOM 結構一樣完整。Google Search Console 的測試結果跟改前 100% 相同。
5. 「先講結論」→「先講重點」純 voice 改動,0 影響 SEO/GEO/AEO
順手把全站快答的標籤「先講結論」改成「先講重點」，9 處一次換完。三大引擎 0 影響，原因如下：
| 引擎 | 抓什麼 | label 是否相關 |
|---|---|---|
| Google SERP | quick-answer 內的 <p> 內容 | ❌ 不抓 label |
| AI Overviews / ChatGPT / Perplexity | quick-answer 內容段(自包含結論 + 數字) | ❌ 不抓 label |
| Google Assistant (Speakable) | cssSelector #quick-answer p 是 <p> 不是 label | ❌ 不抓 label |
那個標籤是純視覺的裝飾，SEO、GEO、AEO 抓的都是後面那段結論句。
改標籤只影響品牌語氣的一致性。「先講重點」更接地氣，對齊 Threads 的短貼文風格，讀者的熟悉度也不變，都是直球敘述。
原則化的教訓，文字改動之前先問一句，這個位置引擎抓不抓?
介面裝飾像標籤、圖示、按鈕文字，幾乎都不抓，放心改。
快答裡的段落、h1、meta 描述、正文內容，都是抓的重點，改動風險高。
6. 視覺 vs 內容 SEO 取捨原則
這次重構真正的重點不是技術細節，是視覺體驗跟 SEO 內容權重不衝突，只是要找對方式承載。三個原則：
取捨其實是假問題。
1. 不為了視覺刪內容。720 字的快答不能直接砍掉，我估過會降低大約 40% 的 AEO 覆蓋。
要找方式讓內容存在，但視覺收乾淨。
2. 不為了 SEO 破壞視覺。首頁的 RPG 儀表板是品牌取捨，不能為了多拿 1 分把它壓垮。
3. 找漸進揭露的技術中道。摺疊、分頁、彈窗、側欄，都是「內容在，但視覺優先」的解法。
Google 的政策明文把手風琴跟分頁列為非違規。要避開的是兩條紅線，隱藏文字，還有 cloaking。
▸ 常見問題
Googlebot 真的會 render <details> 內容嗎?
會。Googlebot 用 Chromium-based renderer,<details> 是 W3C HTML5 spec 標準 element,Chromium 預設支援。GSC「測試網址實際結果」可看 rendered DOM 確認 <details> 內容完整出現。其他 AI scraper(ChatGPT / Perplexity)讀 inner HTML 不受 visual 影響。
那 navigation 隱藏 mobile menu 也算 cloaking 嗎?
不算。responsive design 的「mobile 用 hamburger menu 摺疊 nav」是同樣的漸進揭露 UX,Google 認可。關鍵差別:nav HTML 在 DOM 內,只是視覺條件性顯示(media query)。cloaking 是「user-agent based」條件性給不同 HTML — 兩個不一樣。
<details> default 摺疊會不會降 GEO?
不會。AI scraper 讀 HTML body,<details> 內容是 body 一部分,跟其他段落同等權重。實測 Perplexity 引用 Lab 文章首段已含 <details> 內 quick_answer 內容 — 沒被「視覺摺疊」影響抓取。AI Overviews 同理。
為什麼不直接砍掉 quick_answer?
砍掉的話我 audit 估 AEO 降約 40%(Voice Assistant 沒 cssSelector 可選 / PAA 沒短答可抓 / AI Overviews 沒 Answer-First 段),首頁 word_count 也退回 276、被 audit 標成 thin content 扣分(這些是我 audit 腳本的估算,不是 Google 實測)。<details> 是「魚與熊掌可兼得」的解。
details 加 summary 的摺疊不是 cloaking，是漸進揭露，Google、AI、語音四方都認。
「先講結論」改成「先講重點」純粹是語氣調整，對三大引擎 0 影響。
原則化的教訓是，視覺體驗跟 SEO 內容權重不衝突，只是要找對方式承載。不刪內容、不破壞視覺、找漸進揭露的中道。連載到此暫告段落，等真實流量數據累積再開新系列。
名詞解釋
- SEO（搜尋引擎優化）
- 讓網站在 Google 搜尋結果排得更前面的一整套方法，涵蓋技術體質、內容品質、連結結構三層。
- HTML
- 網頁的骨架語言，定義「這是標題、這是段落、這是圖片」。
- GEO（生成式引擎優化）
- 讓 ChatGPT、Perplexity 這類 AI 在回答問題時引用你網站內容的優化方法，是 SEO 在 AI 時代的延伸戰場。
- AEO（答案引擎優化）
- 把內容寫成「搜尋引擎跟 AI 能直接抽走當答案」的格式：先給答案、再給支撐、附上來源。跟 GEO 高度重疊。
- 爬蟲（crawler）
- 自動瀏覽網頁、把內容抓回去的程式。Google 靠爬蟲收錄網頁，AI 公司靠爬蟲收集資料。
- GSC（Google Search Console）
- Google 給網站主的免費後台：看自己網站在搜尋的曝光、點擊、排名跟索引狀態。做 SEO 的人天天開的儀表板。
- Meta 描述（meta description）
- 搜尋結果裡標題下面那兩行說明文字。不直接影響排名，但寫得好能提高被點進來的機率。
- CSS
- 網頁的造型語言，管顏色、字體、排版跟動畫。
看完這篇之前先確認:
- Quick Answer / SEO 大段內容破壞首頁視覺、想找合法摺疊方案
- 想搞清楚 cloaking 跟漸進揭露的邊界
- 在意 brand voice 但又怕改 label / 視覺影響 SEO
- 已經會用 <details> 摺疊、來確認沒踩雷
- 想找「真的隱藏內容」的 black hat 技巧(本文反方向)
- 純 SPA 站台(<details> 對 SPA SSR / hydration 有額外考量)
如果內容對你有用就太好了
隨喜斗內
相關閱讀
這篇背後的真實開發過程記錄在 Build Log。
搜尋標籤：seo、cloaking、details-html、progressive-disclosure、ux-vs-seo、build-in-public。
本篇為個人實驗紀錄。2026-07-08 更正:初版把 display:none 純隱藏誤稱為 cloaking — 正確歸類是 Google spam policy 的「隱藏文字與連結」(hidden text and links);cloaking 指對使用者與爬蟲送不同內容,兩條是不同紅線(感謝 Threads 讀者指正)。本文做法當前合規(2026-07)但未來需追 Google spam policies 更新。本文做法不保證在你的網站產生相同結果,請依自身狀況驗證。教育研究用途,不構成投資建議。