前端工程文件

Appearance

HowTo 步驟教學標記：欄位寫法與適用情境 ​

HowTo 步驟教學標記：欄位寫法與適用情境

HowTo 用來描述一份 逐步完成某件事 的教學。它曾經能在搜尋結果中呈現帶步驟縮圖的區塊，但現況需要先講清楚。

現況：已停止顯示複合式結果 ​

Google 於 2023 年停止顯示 HowTo 複合式結果

搜尋結果中那個帶步驟縮圖與展開清單的區塊 已經看不到了。這是官方的產品決策，不是標記寫錯。

和 FAQPage 的收斂不同，FAQPage 至少還在權威網站上顯示，HowTo 是全面停止。

那還剩下什麼？

剩下什麼說明
標記仍然合法通過驗證，Schema.org 的定義沒有變
語意仍然存在明確描述這一頁是一份步驟教學
但沒有視覺回報搜尋結果不會有任何特殊呈現

這個型別現在屬於低優先項目

如果時間有限，把它跳過。同樣的時間拿去改 標題 、內容品質或 載入速度 ，回報明顯更高。

本篇仍完整說明它的寫法，一方面是為了系列的完整性，另一方面是 Schema.org 的型別會被其他系統（不只搜尋引擎）使用。

什麼內容適合 ​

適合不適合
安裝流程觀念解說
設定步驟比較文章
組裝說明清單式整理
操作教學名詞解釋

判斷標準：步驟有沒有先後順序

HowTo 的核心是 依序執行。如果讀者可以跳著看、順序無關，那就不是 HowTo。

以這個系列來說：robots.txt 怎麼寫 是說明性質的（不是步驟），Search Console 的驗證流程 才比較接近 HowTo。

基本結構 ​

json
{
  "@context": "https://schema.org",
  "@type": "HowTo",
  "name": "如何在網站加上 robots.txt",
  "description": "三個步驟完成爬蟲規則的設定。",
  "totalTime": "PT10M",
  "step": [
    {
      "@type": "HowToStep",
      "position": 1,
      "name": "建立檔案",
      "text": "在網站根目錄建立名為 robots.txt 的純文字檔案。",
      "url": "https://example.com/guide#step-1"
    },
    {
      "@type": "HowToStep",
      "position": 2,
      "name": "寫入規則",
      "text": "填入 User-agent 與 Allow 或 Disallow 指令。",
      "url": "https://example.com/guide#step-2"
    },
    {
      "@type": "HowToStep",
      "position": 3,
      "name": "驗證",
      "text": "在瀏覽器輸入網域加上斜線 robots.txt 確認內容正確。",
      "url": "https://example.com/guide#step-3"
    }
  ]
}
欄位必要性說明
name必填這份教學的標題
step必填HowToStep 的陣列
description建議教學的摘要
totalTime選填總耗時，ISO 8601 期間格式
supply選填需要的材料
tool選填需要的工具
image選填成果的圖片
estimatedCost選填預估花費

totalTime 的格式 ​

用 ISO 8601 的 期間格式（Duration），不是時間點：

寫法意義
PT10M10 分鐘
PT1H30M1 小時 30 分
P1D1 天
PT2H2 小時

記法

P 開頭表示 Period，T 之後是時間部分。所以「10 分鐘」是 PT10M，沒有 T 的話 P10M 會被解讀成 10 個月。

HowToStep 的欄位 ​

json
{
  "@type": "HowToStep",
  "position": 1,
  "name": "步驟標題",
  "text": "這個步驟要做什麼的完整說明。",
  "url": "https://example.com/guide#step-1",
  "image": "https://example.com/step-1.png"
}
欄位說明
position第幾步，從 1 開始且連續
name步驟的簡短標題
text步驟的完整說明
url指向頁面上這個步驟的錨點
image這個步驟的圖片（絕對網址）

position 的規則和麵包屑相同

從 1 開始、連續、不重複。跳號會讓整組標記無效，詳見 麵包屑標記 。

url 建議搭配頁面上的標題錨點：

html
<h2 id="step-1">步驟一：建立檔案</h2>

supply 與 tool ​

兩者的差別是 會不會被消耗：

型別意義例
HowToSupply材料，會被消耗掉螺絲、油漆、食材
HowToTool工具，可重複使用螺絲刀、瀏覽器、編輯器
json
{
  "@context": "https://schema.org",
  "@type": "HowTo",
  "name": "組裝書架",
  "supply": [
    { "@type": "HowToSupply", "name": "木板 6 片" },
    { "@type": "HowToSupply", "name": "螺絲 24 顆" }
  ],
  "tool": [
    { "@type": "HowToTool", "name": "電鑽" },
    { "@type": "HowToTool", "name": "十字螺絲刀" }
  ],
  "step": []
}

軟體教學的對應

軟體類的教學也可以用：HowToTool 放編輯器、終端機、瀏覽器；HowToSupply 放需要準備的檔案或帳號。不過這兩個欄位是選填的，一般技術文章不必特別加。

分組的步驟 ​

步驟很多時可以分成段落，用 HowToSection：

json
{
  "@context": "https://schema.org",
  "@type": "HowTo",
  "name": "設定 SEO 基礎",
  "step": [
    {
      "@type": "HowToSection",
      "name": "檔頭標籤",
      "itemListElement": [
        { "@type": "HowToStep", "text": "加上字元編碼宣告。" },
        { "@type": "HowToStep", "text": "加上可視範圍設定。" }
      ]
    },
    {
      "@type": "HowToSection",
      "name": "索引控制",
      "itemListElement": [
        { "@type": "HowToStep", "text": "建立爬蟲規則檔案。" },
        { "@type": "HowToStep", "text": "產生網站地圖。" }
      ]
    }
  ]
}

標記必須對應頁面內容 ​

這是唯一會招致問題的部分

標記八個步驟但頁面上只有五個，屬於 標記與內容不符 的違規行為。

本篇的範例全部只寫在程式碼區塊裡，這一頁的檔頭沒有真的注入 HowTo 標記，因為這一頁是說明性質的文章，不是一份步驟教學。標記一份不存在的教學正是要避免的事。

正確的順序永遠是：

  1. 頁面上先有真正的步驟內容（帶標題與錨點）。
  2. 再從那份內容產生標記。
js
// 從頁面的步驟標題產生標記，兩邊永遠一致
function buildHowTo(page, steps, domain) {
  return {
    '@context': 'https://schema.org',
    '@type': 'HowTo',
    name: page.title,
    step: steps.map((step, index) => ({
      '@type': 'HowToStep',
      position: index + 1,
      name: step.heading,
      text: step.text,
      url: `${domain}/${page.path}#${step.anchor}`,
    })),
  };
}

食譜要用 Recipe ​

食物相關的教學有專屬型別：

json
{
  "@context": "https://schema.org",
  "@type": "Recipe",
  "name": "料理名稱",
  "recipeIngredient": ["食材一 200g", "食材二 1 匙"],
  "recipeInstructions": [
    { "@type": "HowToStep", "text": "第一步。" }
  ],
  "cookTime": "PT30M",
  "recipeYield": "2 人份",
  "nutrition": {
    "@type": "NutritionInformation",
    "calories": "350 calories"
  }
}

Recipe 的複合式結果仍在正常顯示

這是它與 HowTo 最大的差別。食物相關的內容用 Recipe，還能拿到帶圖片、評分與烹調時間的搜尋結果呈現。

檢查清單 ​

項目標準
頁面上真的有這些步驟必備
標記的步驟數與頁面一致必備
position 從 1 開始且連續必備
totalTime 用期間格式（含 T）必備
圖片為絕對網址必備
內容真的是依序執行的教學必備
食譜改用 Recipe必備
認知到它已無複合式結果建議

常見問題 ​

HowTo 標記還有用嗎？

複合式搜尋結果已於 2023 年停止顯示，所以看不到那個帶步驟縮圖的區塊了。標記本身仍然合法且能描述頁面結構，但它現在屬於低優先項目，投入的時間拿去做標題與內容的品質回報更高。

什麼內容適合用 HowTo？

有明確先後順序、照著做就能完成一件事的教學，例如：安裝流程、設定步驟、組裝說明。純粹的觀念解說、比較文章、清單式整理都不適合，那些沒有必須依序執行的步驟。

HowTo 和 Recipe 有什麼關係？

食譜有專屬的型別，結構類似但欄位更豐富，包含份量、營養資訊與烹調時間。食物相關的教學應該用食譜型別，它的複合式搜尋結果仍在正常顯示。

步驟裡可以放圖片嗎？

可以，每個步驟都能有自己的圖片與網址。圖片必須是絕對網址且可被爬取。要注意的是這些圖片原本的用途是顯示在複合式結果的步驟縮圖，現在那個版位已經沒有了。

標記的步驟一定要和頁面上一樣嗎？

一定要。這是結構化資料的通則：標記必須描述頁面上使用者真正看得到的內容。標記八個步驟但頁面上只有五個，屬於標記與內容不符的違規行為。

延伸閱讀 ​

常見問答 FAQPage 標記 代表圖常見問答 FAQPage 標記JSON-LD 語法與驗證 代表圖JSON-LD 語法與驗證複合式搜尋結果測試 代表圖複合式搜尋結果測試結構化資料是什麼？ 代表圖結構化資料是什麼？

參考資料：Schema.org：HowTo

Copyright © 2025-Present