元伸科技
過去網頁設計師的工作是「畫出漂亮的版面」，今天還要多一件事：「讓 AI 看得懂你的版面」。AI Overviews 出現後，使用者搜尋一個問題，Google 會直接生成答案摘要並標注幾個引用來源——而會被引用的網站，幾乎清一色都是結構清楚的。
這不是說設計不重要，而是「設計」的定義變了。視覺只是表層，結構是裡層，兩者都做才是 AI-Ready。
AI 看的不是視覺，是 HTML 結構
當 Google 的 AI 抓取你的網頁時，它看到的是什麼？不是漂亮的版面，是這樣的東西：
<article>
<h1>什麼是 AI-Ready 網站</h1>
<p>AI-Ready 網站是經過結構化設計...</p>
<h2>核心要件</h2>
<ul>
<li>結構化資料</li>
<li>清晰定義段落</li>
<li>權威訊號</li>
</ul>
</article>
AI 解析這份 HTML，會立刻知道：「這是一篇文章，主標題是什麼、段落寫了什麼、列出了哪三個要件」。然後它就能拿這段去回答相關搜尋問題。
但如果你的網頁是這樣：
<div class="hero">
<div class="text">什麼是 AI-Ready 網站</div>
<div class="content">AI-Ready 網站是...核心要件包含結構化資料、清晰定義段落、權威訊號...</div>
</div>
視覺上看起來可能一樣，但 AI 看到的是「一坨 div」，沒有標題、沒有列表、沒有段落，無從擷取重點。這個網頁就算內容寫得再好，也不會被引用。
三個層次的結構設計
層次一：資訊架構（IA）
設計階段就要規劃好整篇文章的階層：
- H1：頁面主題，每頁只有一個。
- H2：把主題拆成 3-7 個子問題，每個子問題對應一個 H2。
- H3：在 H2 底下做細節分點。
舉例：「網頁設計報價包含什麼」這個主題，設計階層應該長這樣：
H1：網頁設計報價包含什麼
├─ H2：視覺設計費用
│ ├─ H3：首頁設計
│ └─ H3：內頁版型
├─ H2：程式開發費用
│ ├─ H3：後台管理系統
│ └─ H3：前台功能
└─ H2：第三方串接費用
每個 H2 都能獨立回答一個問題（「視覺設計費用怎麼算」），這就是 AI 喜歡引用的結構。
層次二：內容區塊
純文字段落很難被 AI 切片，結構化元件才容易：
| 元件 | AI 友善度 | 何時使用 |
|---|---|---|
| 列表（ul / ol） | ★★★★★ | 並列項目 3 個以上 |
| 表格（table） | ★★★★★ | 比較類資訊 |
| 定義列表（dl） | ★★★★ | 名詞解釋 |
| 引言（blockquote） | ★★★ | 來源引用 |
| 純文字段落 | ★★ | 描述、過渡 |
| 圖片（img alt） | ★★★ | 視覺輔助 |
設計者要主動判斷：「這段內容適合用列表嗎？用表格會不會更清楚？」一個技術文章如果通篇都是純文字段落，AI 引用率會明顯偏低。
層次三：HTML 語意化
這是純技術層次，但設計師也要懂：
<article>：包整篇文章<section>：包每個子主題<header>、<footer>：頁首頁尾<aside>：補充資訊（側欄、註解）<nav>：導覽列<figure>+<figcaption>：圖片＋說明<dl>+<dt>+<dd>：定義列表
用對標籤，AI 解析時就能正確判斷「這段是文章主體、那段是補充」，引用準確度大幅提升。用 div 大包大攬等於告訴 AI「我什麼都不重要」。
設計檢查清單：你的網頁夠 AI-Ready 嗎？
設計師可以拿這份清單檢查每個頁面：
- H1 是否唯一？是否清楚說明這頁主題？
- H2 是否有 3-7 個？每個能獨立回答一個子問題嗎？
- 是否使用
<article>或<main>包覆主要內容？ - 並列項目是否使用
<ul>或<ol>，而非用<div>模擬？ - 比較類資訊是否使用
<table>？ - 圖片的文字是否在 HTML 裡（不是刻在圖上）？
- 圖片是否有
alt屬性說明？ - 是否有
<header>、<nav>、<footer>三大區塊？ - 文章是否有作者、發布日期可被 AI 提取？
每打勾一項，AI 引用率就提高一階。
結語：版面設計與 SEO 已經不是兩件事
過去的觀念是「設計師畫畫面，工程師寫 HTML，行銷做 SEO」。現在不行了——版面結構直接決定 SEO 與 AI 引用率，三件事必須在設計階段就一起想。
這是元伸科技在做 AI-Ready 網站專案時最強調的觀念：版面美感是表層，結構工程是裡層，兩者從第一張線稿開始就要一起規劃。事後加 Schema 只是補救，從頭設計才是根本。
