視覺破壞 vs 內容完整：details/summary 摺疊不是 cloaking + label 微調 0 影響 SEO
先講重點
首頁 Quick Answer 720 字大段破壞 RPG dashboard 視覺,想隱藏只給 Google/AI 讀。但 CSS display:none / visibility:hidden 純為隱藏是 Google webmaster guidelines 禁止的 black hat(cloaking)。合法替代: native HTML 摺疊 — 視覺壓縮 720 字 → 1 行,HTML 完全保留,Google/Perplexity/Speakable/PAA 四方都正常抓。順手把 qa-label「先講結論」改「先講重點」,0 影響三大引擎(都不抓 label)。
1. 首頁 lab-summary 視覺破壞 vs 內容完整的取捨
#22 Week 1 Day 2 在首頁 hero 跟 explore-section 之間插入 lab-summary section,720 字 4 段(lead + 3 個 Q&A 詳述)。AEO + GEO + RAG 三方都覆蓋,首頁 word_count 從 276 → 995,解 audit 標的 thin_content 扣分項 + sections_in_range(0 → 4 個在 60-300 字 RAG 甜蜜區)。
但首頁 RPG dashboard 風格是 NES.css + 5 卡 explore + 玩家狀態列 — 720 字大段塞在中間視覺破壞嚴重。讀者第一眼看不到 explore 5 卡(被擠到 fold 下),設計感全沒了。
問題定義:想視覺收乾淨,但內容對 Google / Perplexity / AI Overviews / Voice Assistant 四方還是要留。第一個直覺是「隱藏給人類、留給爬蟲」 — 但這個直覺踩 Google 紅線。
2. cloaking 是 black hat,4 個合法替代方案
cloaking(對人隱藏只給爬蟲)是 Google webmaster guidelines 明確禁止的 black hat。CSS display:none / visibility:hidden / clip:rect(0) 純為隱藏內容、text-indent:-9999px 等老 SEO 招數,2024+ 全標 black hat。Google 偵測到「人類看不到但爬蟲看到」直接 manual action 罰站。
4 個合法選項(按推薦序):
| 方案 | 視覺 | 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 — 是 native HTML,Google 視為「漸進揭露」不是隱藏。前面 SEO audit 建議「全站 0
3. 為什麼 details/summary 不算 cloaking
Google 對 cloaking 的定義是「給人類顯示一種內容、給爬蟲顯示另一種內容」。<details>/<summary> 是 W3C 標準的 native HTML element,行為是「人類預設看到 summary 一行,點開看到完整 details 內容」 — 跟 modal / dropdown 同類,屬於漸進揭露 UX,不是隱藏。
關鍵差別:cloaking 是「同樣的 user 看不到、但同樣的 Googlebot 看得到」(對相同 user-agent 給不同內容)。<details> 對 user / Googlebot 給的 HTML 一樣完全相同,只是 user 視覺需要點 summary 才展開 — 結構性 UX,不是條件性隱藏。
實測:Google Search Console 用 「測試網址實際結果」可以看 Googlebot render 完的 DOM,<details> 內容完整出現。Perplexity / ChatGPT 的 web scraper 也讀 inner HTML(不受 visual 影響)。Voice Assistant 的 Speakable cssSelector 是 #quick-answer p — 它選的是 element 不是 visibility,<details> 內的 #quick-answer 一樣被選到。
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 用 inline style list-style:none 移除預設箭頭,自己加 ▾ 字元。內容 720 字完全在 HTML body,DOM tree 一樣完整。Google Search Console 測試結果跟改前 100% 相同。
5. 「先講結論」→「先講重點」純 voice 改動,0 影響 SEO/GEO/AEO
順手把全站 qa-label「先講結論」改「先講重點」(9 處 replace_all 一次換)。三大引擎 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 |
qa-label 是純視覺 chrome(UI 裝飾),SEO/GEO/AEO 抓的是後面 <p> 結論句。改 label 只影響 brand voice 一致性 — 「先講重點」更接地氣對齊 voice_coolkid 短貼風格,讀者熟悉度不變(都是直球敘述)。
原則化教訓:文字改動之前先問「這個位置 SEO/GEO/AEO 抓不抓?」UI chrome(label / icon / button text)幾乎不抓,放心改;quick-answer 內 <p> / h1 / meta description / 段落內容 都是抓重點,改動風險高。
6. 視覺 vs 內容 SEO 取捨原則
這次重構真正的點不是 <details> 技術細節,是視覺體驗跟 SEO 內容權重不衝突,只是要找對方式承載。三個原則:
1. 不為了視覺刪內容 — 720 字 quick_answer 不能直接砍(我 audit 估會降 AEO 約 40%)。要找方式讓內容存在但視覺收乾淨。
2. 不為了 SEO 破壞視覺 — 首頁 RPG dashboard 是 brand 取捨,不能為了 +1 audit 分把它壓垮(#20 的天花板論述)。
3. 找漸進揭露的技術中道 — <details> / tabs / modal / 摺疊 sidebar 都是「內容在但視覺優先」的解。Google 都認,只要不是 cloaking。
▸ 常見問題
Q1:Googlebot 真的會 render <details> 內容嗎?
會。Googlebot 用 Chromium-based renderer,<details> 是 W3C HTML5 spec 標準 element,Chromium 預設支援。GSC「測試網址實際結果」可看 rendered DOM 確認 <details> 內容完整出現。其他 AI scraper(ChatGPT / Perplexity)讀 inner HTML 不受 visual 影響。
Q2:那 navigation 隱藏 mobile menu 也算 cloaking 嗎?
不算。responsive design 的「mobile 用 hamburger menu 摺疊 nav」是同樣的漸進揭露 UX,Google 認可。關鍵差別:nav HTML 在 DOM 內,只是視覺條件性顯示(media query)。cloaking 是「user-agent based」條件性給不同 HTML — 兩個不一樣。
Q3:<details> default 摺疊會不會降 GEO?
不會。AI scraper 讀 HTML body,<details> 內容是 body 一部分,跟其他段落同等權重。實測 Perplexity 引用 Lab 文章首段已含 <details> 內 quick_answer 內容 — 沒被「視覺摺疊」影響抓取。AI Overviews 同理。
Q4:為什麼不直接砍掉 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,是漸進揭露 UX,Google / AI / Voice 四方都認。「先講結論」改「先講重點」純 voice 0 影響三大引擎。原則化教訓:視覺體驗跟 SEO 內容權重不衝突,要找對方式承載 — 不刪內容、不破壞視覺、找漸進揭露中道。連載到此暫告段落,等真實 GSC 流量數據累積再開新 series。
名詞解釋
- 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
- 已經會用 摺疊、來確認沒踩雷
- 想找「真的隱藏內容」的 black hat 技巧(本文反方向)
- 純 SPA 站台(對 SPA SSR / hydration 有額外考量)
- 誤把 display:none 當 用 — 前者是 cloaking 後者不是
- 改文字以為「都會影響 SEO」— 實際 UI chrome label 不抓,放心改
- 為了 SEO 不敢動視覺 — audit 不是最終目的,品牌取捨優先
如果內容對你有用就太好了
隨喜斗內
相關閱讀
這篇背後的真實開發過程記錄在 Build Log。
搜尋標籤：seo、cloaking、details-html、progressive-disclosure、ux-vs-seo、build-in-public。
本篇為個人實驗紀錄。Google 對 cloaking 的定義可能變動,本文做法當前合規(2026-06)但未來需追 Google webmaster guidelines 更新。本文做法不保證在你的網站產生相同結果,請依自身狀況驗證。教育研究用途,不構成投資建議。