逐步教學文寫法（How-to）：HowTo Schema 的設計加成

「怎麼做 XX」是搜尋頻率最高的問題類型：使用者要的是手把手的明確指引。AI 在生成這類查詢的摘要時，有 HowTo Schema 標記的文章引用率比沒做的明顯提升。

老實說，過去十幾年我們看過太多企業寫教學文卻沒被引用，原因不是內容不好，而是「步驟感」太弱：一段一段散開的長文，AI 抓不到「第幾步、做什麼、預期結果」。這篇是 How-to 教學文的完整寫作指南，含 HowTo Schema 實作（其他 Schema 類型對應請參考 Schema 結構化資料完整指南）。

寫好 How-to 文章的 4 大原則

原則 1：明確的步驟編號

每個步驟用 H3 + 數字：

## 怎麼建立 llms.txt

### 步驟 1：列出網站重要頁面
[詳細說明...]

### 步驟 2：撰寫 llms.txt 內容
[詳細說明...]

### 步驟 3：放在網站根目錄
[詳細說明...]

### 步驟 4：驗證上線
[詳細說明...]

每步驟都用「動詞開頭」（建立、撰寫、上傳、驗證），讓使用者知道該做什麼動作。

原則 2：可驗證的結果

每步驟結尾告訴使用者「做完應該看到什麼」。實務上這是老闆最常忽略的一點：以為寫完步驟就結束，但讀者卡在第 3 步不知道對不對，直接放棄。

### 步驟 2：撰寫 llms.txt 內容

[實作說明]

**預期結果**：完成後你應該有一個包含網站介紹、重要連結、核心定義三大區塊的 Markdown 檔案，約 200-500 行。

可驗證的結果讓使用者知道自己進度對不對，也讓 AI 在引用時能保留「驗證點」。

原則 3：截圖或視覺輔助

每 2-3 步驟搭配一張截圖或圖示：

### 步驟 3：放在網站根目錄

把檔案上傳到 `public/llms.txt`（Laravel）或 `static/llms.txt`（Next.js）。

![檔案結構示意圖](/images/howto/llms-txt-location.webp)
*圖：llms.txt 在專案中的位置*

圖片需要：

• 完整 alt 文字
• 配上文字說明（讀圖加圖說 = 雙重資訊）
• 用 WebP/AVIF 格式

原則 4：HowTo Schema 標記

整個教學包成 HowTo Schema（下節詳述）。

HowTo Schema 完整範例

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "HowTo",
  "name": "怎麼建立 llms.txt 索引檔",
  "description": "5 個步驟在你的網站上建立 llms.txt，讓 AI 模型主動發現你的重要內容。",
  "totalTime": "PT30M",
  "estimatedCost": {
    "@type": "MonetaryAmount",
    "currency": "TWD",
    "value": "0"
  },
  "tool": [
    { "@type": "HowToTool", "name": "文字編輯器（VS Code、Sublime）" },
    { "@type": "HowToTool", "name": "FTP 或 Git 部署工具" }
  ],
  "step": [
    {
      "@type": "HowToStep",
      "position": 1,
      "name": "列出網站重要頁面",
      "text": "從首頁、服務頁、最新文章中挑選 10-30 個值得 AI 引用的頁面，列在試算表中。",
      "image": "https://example.com/howto/step1.webp",
      "url": "https://example.com/llms-guide#step1"
    },
    {
      "@type": "HowToStep",
      "position": 2,
      "name": "撰寫 llms.txt 內容",
      "text": "用 Markdown 格式撰寫，包含：網站介紹（3-5 句）、重要連結清單、核心定義段落。",
      "image": "https://example.com/howto/step2.webp"
    },
    {
      "@type": "HowToStep",
      "position": 3,
      "name": "放在網站根目錄",
      "text": "把檔案上傳到 https://yoursite.com/llms.txt（必須是根目錄，不能放在子資料夾）。",
      "image": "https://example.com/howto/step3.webp"
    },
    {
      "@type": "HowToStep",
      "position": 4,
      "name": "驗證上線",
      "text": "在瀏覽器訪問 https://yoursite.com/llms.txt 確認內容正確顯示。",
      "image": "https://example.com/howto/step4.webp"
    },
    {
      "@type": "HowToStep",
      "position": 5,
      "name": "持續更新",
      "text": "新增重要文章或服務時記得補進 llms.txt，建議每月更新一次。",
      "image": "https://example.com/howto/step5.webp"
    }
  ]
}
</script>

HowTo Schema 重要欄位

每個 step 必須有：

• position（步驟序號）
• name（步驟標題）
• text（詳細說明）
• image（建議）
• url（步驟錨點，建議）

Google Rich Results

正確標記後，Google 搜尋結果可能顯示為「步驟卡片」：

[文章標題]
yoursite.com › guide
[簡短描述]

步驟：
1. 列出網站重要頁面
2. 撰寫 llms.txt 內容
3. 放在網站根目錄
4. 驗證上線
5. 持續更新

[查看完整指南]

這個顯示方式直接告訴使用者教學步驟，CTR 比一般搜尋結果高 30-50%。同樣概念可推廣到 FAQ 區塊的 5 個設計原則，兩者搭配能形成完整的引用磁鐵組合。

How-to 文章實戰觀察

配 HowTo Schema 的文章，整體成效：

• AI 引用率：明顯提升
• Google Rich Results 顯示率：顯著改善
• 文章 CTR：有感成長
• 文章停留時間：明顯增加（步驟結構讓讀者完整跟隨）

不要犯的 4 個錯誤

• ❌ 步驟太少（< 3）：AI 不視為 HowTo
• ❌ 步驟超過 10 個沒分組：使用者放棄
• ❌ HowTo Schema 與內容不一致：Schema 標 5 步驟但文章寫 8 步驟
• ❌ 每步驟太長（> 200 字）：失去「步驟感」，應拆分

結語：手把手是最容易被引用的內容

AI 處理「怎麼做 XX」搜尋時，最希望拿到的就是清楚編號的步驟。寫好 How-to 文章 + 配 HowTo Schema = AI 引用率最大化。

我會建議：每個產業都有 10-20 個經典 How-to 主題等著被寫，老闆可以列個清單從最高頻的問題開始。這些是 AI 時代的引用磁鐵，每篇都是長期資產：把它們納入 客製化網頁設計 的內容地圖，是 AI-Ready 的必經之路，更全面的服務範疇可看 整體解決方案。

如果你正在規劃 AI-Ready 的內容地圖，歡迎跟我們聊聊，元伸科技 24 年深耕網頁設計，從 Schema 到內容策略都能協助。