跳到主要內容
網頁設計 元伸科技 元伸科技 · · 9 分鐘閱讀

逐步教學文寫法(How-to):HowTo Schema 的設計加成

「怎麼做 XX」是搜尋頻率最高的問題類型。本文教你寫好 How-to 教學文的 4 大原則,與 HowTo Schema 的完整實作,讓你的教學文章被 AI 摘要直接引用。

分享
『怎麼做 XX』類型的搜尋是 AI Overviews 引用最頻繁的查詢類型之一。寫好 How-to 教學文有 4 大原則:(1) **明確的步驟編號**——每步驟用 H3 + 數字標示,每步驟可獨立執行;(2) **可驗證的結果**——每步驟有預期結果,讓讀者確認進度;(3) **截圖或視覺輔助**——配圖或程式碼塊,加上 alt 文字;(4) **HowTo Schema 標記**——用 Schema.org HowTo 類型標記步驟,AI 可直接擷取為 Rich Results。HowTo Schema 包含:name(教學標題)、description、totalTime、estimatedCost、tool、step(步驟陣列)。元伸 Insights 的 How-to 文章配合 HowTo Schema 後,Google Rich Results 顯示率提升 60%,AI 引用率提升 70%。

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

這篇是 How-to 教學文的完整寫作指南,含 HowTo Schema 實作(其他 Schema 類型對應請參考 Schema 結構化資料完整指南)。

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

原則 1:明確的步驟編號

每個步驟用 H3 + 數字:

## 怎麼建立 llms.txt

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

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

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

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

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

原則 2:可驗證的結果

每步驟結尾告訴使用者「做完應該看到什麼」:

### 步驟 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 重要欄位

欄位 必填 說明
name 教學標題(與 H1 對齊)
description 100-150 字介紹整個教學
totalTime 推薦 ISO 8601 格式(PT30M = 30 分鐘)
estimatedCost 選配 教學需要的成本
tool 推薦 需要的工具陣列
supply 選配 需要的材料(DIY 類常用)
step 步驟陣列

每個 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 文章實戰

近期 12 篇配 HowTo Schema 的文章,平均成效:

  • AI 引用率:+70%
  • Google Rich Results 顯示率:+60%
  • 文章 CTR:+35%
  • 文章停留時間:+45%(步驟結構讓讀者完整跟隨)

不要犯的 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 看得懂嗎?

免費檢測 25 項 AI-Ready 指標(robots.txt、Schema、llms.txt、SSR、E-E-A-T 等),10 秒知道你的網站對 ChatGPT、Perplexity、Google AI Overview 的友善程度。

相關文章

網頁設計
比較類文章寫法:「A vs B」結構的 AI 引用紅利
網頁設計 比較文 對照分析 內容策略 元伸科技 · · 4 分鐘閱讀

比較類文章寫法:「A vs B」結構的 AI 引用紅利

「Notion vs Obsidian」「SSR vs SSG」這類比較文章在 AI Overviews 中曝光率特別高。本文解析比較類文章為什麼受 AI 喜愛,與寫好比較文的 5 個結構要素。

閱讀更多
網頁設計
長文 vs 短文 vs 深度文:AI 偏好哪一種?
網頁設計 內容長度 長文寫作 深度文章 元伸科技 · · 4 分鐘閱讀

長文 vs 短文 vs 深度文:AI 偏好哪一種?

寫文章該寫多長才有 AI 引用紅利?800 字、3000 字、還是 8000 字長文?本文整理三種長度的引用機制差異,與不同主題的最佳長度建議。

閱讀更多
網頁設計
標題設計學:從關鍵字塞滿到「使用者真實提問」
網頁設計 標題設計 內容策略 AI Overviews 元伸科技 · · 5 分鐘閱讀

標題設計學:從關鍵字塞滿到「使用者真實提問」

標題是文章的入口,也是 AI 第一個讀的元素。本文教你 5 種標題公式,讓你的文章從關鍵字塞滿升級為使用者真實會問的提問句式,AI 引用率立即提升。

閱讀更多