內容網站設計
內容網站存在的目的是讓讀者能找到頁面、確認它是正確的、獲得他們要的答案或理解，然後繼續下一件事。大多數讀者是從搜尋引擎進入一個深層頁面，先掃讀再閱讀，一旦得到所需便離開。模型最常犯的錯誤是設計外殼（首屏、卡片、側邊欄、深色模式切換），卻忽略了內容本身的結構：模糊的標題、毫無資訊量的標題（「概述」、「介紹」）、答案藏在第三段之後、一個頁面混雜了教學、參考和評論、「這裡」這種連結文字、缺少日期、以及毫無用處的站內搜尋。
套用 interface-guidelines 的分級原則（每個人都能用 > 它說實話 > 它說清楚意思 > 答案優先 > 錯誤可挽回 > 位置固定 > 可能選項可見 > 慣例 > 打磨）。如果已安裝該技能，請先閱讀其 SKILL.md。字型大小、行長、對比度與重排已在該技能中涵蓋（references/human-interface.md 第 6 和第 7 節）；本技能則涵蓋內容結構、導覽、搜尋以及 AI 代理閱讀。
簡報
- 網站類型： 文件、說明中心、知識庫、編輯或部落格，或是混合型。混合型網站需為每個區塊指定主要任務。
- 讀者與其到達方式： 從搜尋引擎進入深層頁面、從產品內部（「？」連結）、瀏覽或訂閱。誰是新用戶？誰是專家？
- 首要任務： 讀者會帶來的 10 到 20 個問題，用他們的語言表述。這些應來自搜尋記錄、客服工單和論壇貼文，而非組織架構圖。
- 內容類型： 對於文件，分為教學、操作指南、參考資料和說明；對於編輯內容，則分為新聞、分析、評論和指南。
- 時效性： 內容更新的頻率、每個頁面的負責人是誰、產品版本變更時的處理方式。
- AI 代理讀者： 閱讀文件的編碼代理、引用頁面的搜尋與答案引擎、進行導航的瀏覽器代理。它們必須正確獲取哪些資訊？
- 誰來寫： 僅限員工，還是也包含使用者（留言、社群答案）？外部貢獻的內容需標記清楚。
規則
標籤：[E] 經驗實證，[S] 標準或機構，[P] 實踐者，[J] 判斷。來源列於參考檔案中。
頁面
- 答案優先。 前兩個段落應承載主要觀點；細節按重要性遞減排列（反向金字塔）[S: GOV.UK; P: NN/g]。讀者只會閱讀頁面的一小部分文字，Nielsen 估計約為 20% 到 28% [P: Nielsen 2008, 引用 Weinreich et al. 2008 資料]。
- 一頁一事。 教學用於教授，操作指南用於指導，參考資料用於描述，說明用於討論；請勿將它們混雜在同一頁面 [P: Procida, Diátaxis]。
- 標題需獨特、具體且關鍵詞前置， 使用讀者的語言，字數約 65 個字元以內，以免在搜尋結果中被截斷 [S: GOV.UK]。任務頁面以動詞開頭（「輪換 API 金鑰」）；關於任務的指引使用 -ing 形式（「輪換 API 金鑰」）[S: GOV.UK]。
- 標題下方需有摘要， 一句話，160 個字元以內，補充標題中未涵蓋的詞彙；此文字同時作為 meta description [S: GOV.UK]。
- 標題應說明該小節的內容， 關鍵詞前置，避免使用「概述」或「更多資訊」，也不要以提問方式呈現；即使移除標題，內容仍應可理解 [S: GOV.UK]。標題層級需遵循結構：一個
h1，不可跳級 [S: WCAG 1.3.1, 2.4.6]。 - 簡短的句子和段落，使用平實詞彙。 句子長度約 25 個單詞時應拆分，段落保持在五句以內，專業術語在首次使用時需解釋 [S: GOV.UK]。以「你」稱呼讀者，使用主動語態，條件式先於指令（「若要刪除專案，請開啟設定」）[S: Google developer style guide]。
- 步驟使用編號列表，集合使用項目符號列表，比較使用表格 [S: Google developer style guide; GOV.UK]。
- 為掃讀而排版： 有意義的標題與前置段落可對抗 F 形掃讀模式（讀者經常忽略頁面右側及下方內容）[P: Pernice, NN/g 2017]。
- 有意義的日期： 「最後更新於 2026 年 11 月 4 日」並附上簡短的變更說明（針對實質性更新），文章需有發布日期。內容仍準確的舊頁面應標示「已審閱」[S: GOV.UK change notes; J]。
- 註腳： GOV.UK 禁止在服務內容中使用註腳；學術與長篇編輯內容可能需要。應根據讀者是否需要驗證來源來決定 [S: GOV.UK; J]。
連結
- 連結文字應指名目的地， 關鍵詞前置，且在同一頁面中每個目的地需有獨一無二的連結文字；絕對不要使用「點此」、「閱讀更多」或「這裡」[S: GOV.UK, WCAG 2.4.4]。
- 若連結會離開本站、開啟檔案或變更語言，需標明： 「定價表（PDF, 240 KB）」[S: GOV.UK]。
- 連結應放在對閱讀有幫助的地方， 而非堆在頁底作為「延伸閱讀」；任務頁面結尾的具體下一步指引是可行的 [S: GOV.UK]。
- 每個標題都需有穩定的錨點（
#rotate-a-key），並附上可見的複製連結控制項。重新命名標題時，舊的錨點仍應能作用 [J]。 - 網址應可讀且永久。 頁面移動時，需將舊網址重新導向；絕對不要讓文件連結返回 404 [J]。
導覽
- 讀者直接進入深層頁面。 每個頁面需顯示其所在位置（麵包屑或高亮的區段）以及接下來可前往或鄰近的頁面 [S: WCAG 2.4.8; P: NN/g breadcrumbs]。
- 導覽標籤應使用讀者的語言，並能預測內容（資訊線索）[E: Pirolli and Card 1999]。
- 每個頁面至少需有兩種到達方式： 導覽加上搜尋，或加上網站地圖 [S: WCAG 2.4.5]。
- 長頁面需有頁內目錄， 由
h2和h3自動產生，並高亮顯示當前小節 [J]。 - 存檔和搜尋結果應使用分頁或「載入更多」而非無限滾動， 以便讀者能到達頁尾、返回特定位置並分享該位置 [P: NN/g infinite scrolling]。
- 文件： 一個按讀者任務和 Diátaxis 類型組織的側邊欄、版本不同時需有可見的版本切換器，以及在舊版本頁面上顯示連結到當前版本的橫幅 [P: Procida; J]。
搜尋
- 搜尋是主要路徑，而非附加功能。搜尋框在每個頁面上都應可見，在桌面版上不應隱藏在圖示後面 [P: NN/g; J]。
- 搜尋結果應顯示頁面標題、其所屬區塊或類型、包含匹配詞彙的片段，以及日期。應能容忍來自真實查詢的錯字和同義詞 [J]。
- 無結果頁面應建議拼字修正、更廣泛的詞彙和熱門頁面，並記錄此查詢 [J]。
- 每月檢閱無結果查詢與熱門查詢；每個查詢都應指向一個缺失的頁面、一個缺失的同義詞，或一個不好的標題 [P: common docs practice; J]。
閱讀舒適度
- 正文字體、行長、行高、對比度與重排遵循基礎規範。在手機上，讀者對簡短、簡單的文字理解度與桌面相同，但處理困難文字時速度會變慢，因此困難內容在手機上需要額外的結構 [P: Moran, NN/g 2016]。
- 沒有覆蓋文字的插頁廣告或黏性元素；廣告和電子報提示絕不應打斷答案的第一屏 [S: WCAG 2.4.11 for focus; J]。
- 承載資訊的圖片需有說明該資訊的替代文字；裝飾性圖片需有空的替代文字 [S: WCAG 1.1.1]。圖表需在附近有文字說明 [J]。
- 程式碼範例應為文字，絕非圖片，並需附上複製控制項及語言標示。用於語言變體的頁籤應將所有變體保留在 DOM 中 [J]。
- 列印與閱讀器模式應產出不含導覽裝飾的內容 [J]。
針對 AI 代理
- 內容需存在於 HTML 中， 由伺服器端渲染，而非透過用戶端 JavaScript 在載入後組裝，以便不執行腳本的爬蟲和代理能獲取內容 [J]。
- 語意化結構即為介面： 標題、列表、表格、帶語言類別的
code和pre、figure和figcaption[S: WCAG 1.3.1]。 - 穩定的、可引用的網址和錨點， 每個頁面有唯一的標準網址（canonical URL），並在頁面中標示日期 [J]。
- 每個文件頁面提供一份乾淨的 Markdown 副本，網址相同但附加
.md，並以rel="alternate" type="text/markdown"連結，是為編碼代理提供無裝飾內容的簡易方法。在網站或文件根目錄提供llms.txt是社群提案；對一般網站而言，需求量測結果不高，但很適合編碼代理閱讀的文件 [P: Howard, llms.txt; foundation agent-surfaces section 6]。 - 頁面文字、註解或不可見元素中不得有對 AI 代理的隱藏指令。 這與提示注入難以區分 [J; foundation oversight section 5]。
- 使用者貢獻內容（留言、社群答案、論壇貼文）需在標記和視覺上標明，附上作者和日期，以便代理和人們能評估其可信度 [J]。
建置順序
- 首要任務與內容清單： 列出每個現有或計劃中的頁面，包含其類型、負責人、最後審閱日期以及服務的任務。刪除或合併無服務任務的頁面。
- 資訊架構： 根據讀者任務和內容類型建立區塊；使用讀者的語言命名；透過樹狀測試驗證標籤（人們在純文字樹狀結構中尋找五個任務）[P: NN/g tree testing]。
- 每種內容類型的頁面模板： 標題、摘要、日期、主體結構、下一步。對於文件：教學、操作指南、參考資料、說明模板（
references/docs.md）。 - 優先撰寫或改寫首要任務頁面 使用
references/writing.md；一篇完整、優質的頁面勝過二十篇草稿。 - 語意化 HTML 外殼： 地標、跳過連結、麵包屑、使用
nav搭配aria-current的側邊欄、頁內目錄、頁尾。需伺服器端渲染。 - 搜尋 使用來自記錄或首要任務列表的真實查詢；調整同義詞。
- 代理層： 標準網址、錨點、Markdown 副本、網站地圖、可選的
llms.txt。 - 為長時間閱讀而設計的樣式： 品牌負責視覺外觀（
brand-identity）。 - 驗證（如下）。
驗證
-
渲染稽核 針對首頁、一篇長文章或參考頁面、搜尋結果頁面以及一個 404 頁面：
node <interface-guidelines>/scripts/audit.mjs <dist-or-url> --out audit-output -
首要任務測試： 對於每個首要任務，從搜尋引擎查詢或首頁開始，直到找到答案。記錄步驟數，並注意線索中斷之處。分別以兩種方式進行：一次由人類在手機寬度下使用鍵盤操作，另一次由 AI 代理僅使用無障礙快照。
-
內容靜態分析 針對每個頁面（
references/writing.md第 8 節有腳本大綱）：檢查是否只有一個h1；無跳過的標題層級；標題是否獨特且不超過 65 個字元；摘要是否存在且不超過 160 個字元；無通用標題或連結文字（「概述」、「點此」、「閱讀更多」）；標記超過 25 個單詞的句子；檢查圖片是否缺少替代文字；檢查最後更新日期是否存在。 -
連結： 爬取頁面檢查是否有損壞的內部連結和遺失的錨點；確認舊網址是否有重新導向。
-
無 JavaScript 檢查： 使用
curl擷取頁面，確認主要內容和標題都存在於 HTML 中。 -
搜尋： 執行 20 個熱門查詢和 5 個拼錯的查詢；正確的頁面應出現在前三個結果中。
-
AI 代理閱讀： 提供 AI 代理一個文件頁面的網址或其
.md副本，要求它執行該任務；檢查它是否遵循當前版本並引用正確的小節錨點。
常見陷阱
- 文件首頁使用文章摘要卡片網格，缺乏任務入口點或搜尋。
- 使用「介紹」、「概述」、「詳細資訊」作為標題，或將標題寫成問句。
- 常見問題（FAQ）頁面收集不相關的問題，而非在問題發生的頁面上回答它們。
- 答案位於一大段關於該主題為何重要的冗長前言之後。
- 教學在中途變成參考資料，或參考資料摻雜評論。
- 文章未標明日期，以及每個頁面的「最後更新」都設為建置日期。
- 內容僅由用戶端 JavaScript 渲染，隱藏的面板未存在於 DOM 中，程式碼使用截圖。
- 在存檔和搜尋結果中使用無限滾動。
- 在頁面中隱藏針對 AI 爬蟲的指令文字。
- 重新設計文件網站樣式，但標題、標題和搜尋功能依然有問題。
參考資料
| 檔案 | 使用時機 |
|---|---|
references/writing.md | 撰寫或編輯頁面時：標題、摘要、標題、句子、連結、日期、數字、編輯細節以及靜態分析大綱 |
references/docs.md | 文件與說明中心：含模板的 Diátaxis 類型、API 參考頁面、程式碼範例、版本、更新日誌、為編碼代理提供的文件 |
references/navigation-search.md | 網站結構、標籤、側邊欄、麵包屑、目錄、存檔、搜尋結果、404 頁面 |