結論先講
SEO 的技術問題通常在工程階段被發現，但大部分是在 wireframe 階段種下的。三個最常見的源頭：
- 標題層級是照「字要多大」選的，不是照「這段在講什麼」選的
- 圖片沒有規劃替代文字的位置，於是實作時直接留空
- 版面沒有為內部連結留空間，於是上線後永遠沒有內部連結
以下 14 項是設計稿交付前可以自己跑一輪的檢查。它管的全部是語意結構，不干涉視覺樣式。
一、標題結構（4 項）
- 整個頁面只有一個 H1 —— 通常是主標題。多個 H1 等於對搜尋引擎宣告了兩個互相競爭的主題
- H1 包含核心關鍵字 —— 不是硬塞，是這個頁面本來就該在講那件事
- 層級依序排列，沒有跳級 —— H1 之後接 H2，不要直接跳 H3
- 每個 H2 都描述了該段落的主題 —— 讀者只掃 H2 也該能理解全文架構
最常犯的錯：為了字級選層級
「這行字要大一點，那就設 H2 吧」——這是所有語意問題的源頭。
樣式與語意要分離。 想要大字，用樣式；設成標題，是因為它真的是一個段落的開頭。設計稿上可以直接標注「這是 H2（語意）」與「字級 32px（樣式）」兩件事，交付時工程師才不會猜。
這一點在答案引擎時代更重要：LLM 抓取內容時高度依賴標題階層來理解結構。層級亂了，整頁的可引用性一起下降。
二、圖片（3 項）
- 具資訊意義的圖片都標了 Alt Text 位置 —— 在設計稿上用註解或貼紙標出來
- Alt Text 是描述，不是關鍵字堆砌 —— 標準是「聽這句話能不能知道圖裡有什麼」
- 檔名有意義 ——
keyword-description.jpg而非IMG_1234.jpg
純裝飾的圖片應該留空
不是每張圖都要寫 Alt。背景色塊、裝飾線條、純氛圍照應該留空的 alt 屬性，讓螢幕閱讀器跳過。每張圖都硬寫，反而製造噪音。
判斷方式：如果這張圖不見了，讀者會漏掉資訊嗎？會，就要寫；不會，就留空。
三、內容佈局（4 項）
- 前 100 字自然出現核心概念 —— 前言就要破題，不要暖場三段才進正題
- 段落夠短 —— 建議每段不超過 3 至 4 行
- 有使用列點整理資訊 —— 清單與表格是最容易被引用的格式
- 規劃了內部連結的位置 —— 延伸閱讀區塊或文內連結，要在版面上有位置
內部連結是最容易被跳過的一項
前三項工程師還可能補救，內部連結沒有版面位置就是永遠不會有。
wireframe 階段就要決定：文章底部要不要「相關指南」區塊？側欄要不要放系列文導覽？文中提到其他主題時，那個連結長什麼樣？
這些是設計決定，不是工程決定。留了位置，內容團隊才有地方放。
四、搜尋結果預覽（3 項）
- Title Tag 控制在約 30 個中文字以內 —— 超過會在搜尋結果被截斷
- Meta Description 控制在約 80 個中文字以內
- Title 與 Description 有點擊誘因 —— 數字、年份、具體情境、明確動詞
為什麼設計稿要畫搜尋結果
因為那是使用者第一個看到你的地方，而它幾乎從來不在設計稿裡。
實務做法很簡單：在 wireframe 加一個小區塊，畫成搜尋結果的樣子——一行藍色標題、一行網址、兩行灰色描述——然後把真實的 Title 與 Description 填進去。字數超了會立刻看出來。
這個小動作會改變一件事：團隊開始把 Title 當成設計元素來討論，而不是上線前一天隨手填的欄位。
交付前的三個複查點
給要驗收設計稿的人：
| 檢查什麼 | 怎麼看 |
|---|---|
| H1 與 Title 是否被混淆 | 設計稿上有沒有分別標出這兩個？內容一樣沒關係，但要是兩個欄位 |
| Alt Text 品質 | 抽查幾張。寫「圖1」是太簡略，寫滿關鍵字是太過頭 |
| 有沒有為了字級亂設標題 | 找版面上最大的幾行字，逐一問「它真的是一個段落的開頭嗎」 |
這份清單的適用範圍
它涵蓋的是結構層的 SEO——那些一旦做錯，之後要重做版面才能修的部分。
它不涵蓋：關鍵字研究、內容品質、外部連結、伺服器效能。那些是另外的工作，而且都可以在上線後補。結構層不行，所以要在 wireframe 就做對。
常見問題
設計稿階段就要考慮 SEO，會不會限制了視覺發揮？
不會，因為這份清單管的是「語意結構」不是「視覺樣式」。H2 要描述段落主題，跟那個 H2 用多大字級、什麼顏色完全無關。真正的衝突只有一種：為了視覺效果把不是標題的文字設成標題。那個情況要改的是實作方式（用樣式做大字），不是放棄語意。
H1 和 Title Tag 到底差在哪？
H1 是使用者打開頁面後看到的大標題，Title Tag 是搜尋結果與瀏覽器分頁上顯示的標題。兩者內容常常相同，但用途不同，長度限制也不同：H1 沒有硬性字數限制，Title Tag 超過約 30 個中文字就會在搜尋結果被截斷。設計稿應該把兩者都標出來。
一個頁面真的只能有一個 H1 嗎？
技術上 HTML5 允許多個，但實務上建議只有一個。理由是 H1 的作用是宣告「這一頁在講什麼」，出現兩個等於給了兩個互相競爭的答案。若版面上有多個需要放大的文字，用 H2 或直接用樣式處理即可，不必都設成 H1。
Alt Text 要寫多詳細？每張圖都要寫嗎？
只有「具備資訊意義」的圖片需要寫。純裝飾用的背景圖、分隔線、色塊應該留空（空的 alt 屬性），讓螢幕閱讀器直接跳過。需要寫的圖片，標準是「閉上眼睛聽這句話，能不能知道圖裡有什麼」，而不是塞關鍵字。
內部連結要在 wireframe 就規劃嗎？工程師之後再加不行嗎？
之後再加通常就是不會加。內部連結需要版面空間——延伸閱讀區塊、相關文章列表、文內連結的視覺樣式——這些都是設計決定。wireframe 沒留位置，上線後要嘛硬塞破壞版面，要嘛就這樣算了。這是最常見的「事後補不回來」項目。