結論先講
使用者第一次看到你的地方，是搜尋結果裡的三行字——而那三行字幾乎從來不在設計稿裡。
結果就是：整個團隊花三週打磨首頁 Hero 區，然後在上線前一天由工程師隨手填了 Title 和 Description。
解法很簡單：把搜尋結果做成設計稿裡的一個標準元件。 一旦它在畫布上，團隊就會開始討論它。
這個元件包含什麼
模擬手機版搜尋結果卡片，寬度約 360 至 390px：
| 元素 | 規格 | 說明 |
|---|---|---|
| Favicon 與站名 | 16px 圖示 ＋ 小字 | 品牌第一次出現的地方 |
| 麵包屑網址 | 灰字，小字級 | 例如 example.com › guides › serp-preview |
| Title（藍色連結） | 約 20px，連結藍 | 上限約 30 個中文字 |
| Description（摘要） | 約 14px，深灰 | 上限約 80 個中文字 |
| 縮圖（選填） | 右側方形小圖 | 有些結果會顯示 |
把這五個元素做成一個 Component，之後每個要上線的頁面都複製一份、填上真實內容。
填進去的當下就會發現字數超了。 這是整件事最大的價值——超字這件事，用看的比用數的快。
為什麼字數限制的說法總是不一致
因為搜尋引擎是依像素寬度截斷，不是依字數。
中文字寬度大約是英文字母的兩倍，所以常見的「60 字元」「160 字元」是英文情境的數字。換算成中文的保守安全值是：
- Title：約 30 個中文字
- Description：約 80 個中文字
比精準字數更重要的原則是：把最重要的資訊放前半段。 就算被截斷，讀者也已經知道這一頁在講什麼。
一組可以套用的檢查標準
畫好之後，用這四題檢查：
- Title 有沒有超過約 30 個中文字？
- Title 前半段就講清楚這頁在講什麼？ —— 品牌名放後面，不要開頭就是公司名
- 有沒有點擊誘因？ —— 數字、年份、具體情境、明確動詞
- Description 是在補充 Title，還是在重複 Title？ —— 重複等於浪費 80 個字
最常見的問題：標題寫的是「我是誰」，不是「你能得到什麼」
錯誤示範：
梵亞行銷有限公司 - 專業數位行銷服務
好一點的寫法：
網頁上線前的 14 項 SEO 結構檢查清單｜梵亞行銷
差別在於：前者只有找你的人會點，後者是在找答案的人會點。而在找答案的人，數量多了不只一個量級。
H1 與 Title 不是同一件事
設計稿上要分別標出這兩個，內容可以相同，但它們是兩個欄位：
| H1 | Title Tag | |
|---|---|---|
| 出現在哪 | 頁面上的主標題 | 搜尋結果、瀏覽器分頁 |
| 誰會看到 | 已經進到頁面的人 | 還在決定要不要進來的人 |
| 長度限制 | 無硬性限制 | 約 30 個中文字會被截斷 |
| 可以有幾個 | 一個 | 一個 |
最常見的混淆：以為填了 H1 就等於填了 Title。實際上兩者常常需要不同寫法——H1 可以長一點、可以有情緒；Title 必須在 30 字內把價值講完。
這件事在 AI 搜尋時代的新意義
過去做 SERP Preview 的理由是「爭取點擊」。現在多了一個理由：
Title 與 Description 是內容摘要的一部分，答案引擎在判斷「這一頁在講什麼」時同樣會參考。
一個含糊的標題，不只降低點擊率，也降低被正確歸類與引用的機會。當使用者問 AI 助理一個問題，AI 要在成千上萬個候選頁面裡判斷哪些相關——標題是它最先讀到的訊號之一。
所以這個元件的價值，比它剛被發明時更高了。
加進交付流程的最小做法
不需要大改流程，只要三步：
- 在設計檔建一個 Component：搜尋結果卡片
- 每個要上線的頁面，複製一份、填上真實 Title 與 Description
- 設計審查時，把這張卡片跟頁面一起看
成本大約是每個頁面兩分鐘。 效益是：那三行字終於有人負責了。
常見問題
Title 和 Meta Description 不是工程師填的嗎，為什麼要設計師管？
因為它們是視覺內容，不是技術設定。它們決定使用者要不要點進來，跟按鈕文案、Hero 標題屬於同一類決策。工程師只是把字串放進標籤裡，沒有人負責判斷那三行字夠不夠吸引人。把它畫進設計稿，這件事才有人負責。
字數限制到底是幾個字？看到的說法都不一樣。
說法不一致是因為搜尋引擎是依「像素寬度」截斷，不是字數。中文字比英文字母寬，所以換算後的安全值是 Title 約 30 個中文字、Description 約 80 個中文字。這是保守值，重點是把最重要的資訊放在前半段，即使被截斷也不影響理解。
Meta Description 還有用嗎？聽說搜尋引擎會自己改寫。
搜尋引擎確實常常改寫，會依查詢字串從內文抓更相關的片段。但這不代表可以不寫：一是它不改寫的時候就是用你寫的，二是寫得好的描述本身就代表這一頁的重點很清楚，那對內容結構也有幫助。把它當成「預設值」而非「保證顯示的內容」。
SERP Preview 要畫手機版還是電腦版？
手機版。搜尋引擎已經以行動版內容為主要索引依據，而手機版的截斷更嚴格、版面更窄，先過手機版就不太會有問題。實務上畫一個約 360 至 390px 寬的卡片即可。
AI 搜尋時代還需要在意 SERP 嗎？
需要，而且理由多了一個。傳統理由是爭取點擊；新的理由是 Title 與 Description 是內容摘要的一部分，答案引擎在判斷「這一頁在講什麼」時同樣會參考。一個含糊的標題不只降低點擊率，也降低被正確歸類與引用的機會。