操作說明

使用 HowTo 結構化資料就是在明確告訴 Google,您的內容是操作說明。操作說明的目的是讓使用者能夠按照一系列步驟成功完成某件事,例如教人「如何打領帶」或「如何安裝廚房後擋板」,其中可包含影片、圖片和文字。如果您的操作說明需要依照順序完成每一個步驟,使用 HowTo 結構化資料對您的內容就有加分效果。如果網頁主要用於描述操作說明,就相當適合採用 HowTo 結構化資料。

只要為操作說明網頁加入適當標記,Google 就能為它顯示複合式搜尋結果,而且您可以運用 Google 助理的操作說明動作,讓網站更容易觸及合適的使用者。

功能適用情況

只要 Google 搜尋適用於您所在的國家地區,您目前可在行動裝置上以英文使用操作說明複合式搜尋結果。這項功能並不適用於桌機。

範例

以下列舉一些內容形式各異的操作說明複合式搜尋結果範例。如果您的操作說明包含各步驟的圖片,以及整個程序完成的圖片,則呈現的內容可能更具有視覺張力。請儘可能多多加入必要屬性和建議屬性,讓您的操作說明能在 Google 搜尋結果中展現最理想的效果。

標準操作說明複合式搜尋結果

標準 How-to 複合式搜尋結果的圖片
JSON-LD

以下示範的是以 JSON-LD 格式呈現文字操作說明網頁,其中只有一張展示操作說明最後成果的圖片。使用者可以從這個搜尋結果中預覽一些步驟的內容。

微資料

以下示範的是以微資料格式呈現文字操作說明網頁,其中只有一張展示操作說明最後成果的圖片。使用者可以從這個搜尋結果中預覽一些步驟的內容。

附步驟圖片的操作說明複合式搜尋結果

附圖 How-to 複合式搜尋結果的圖片
JSON-LD

以下示範的是以 JSON-LD 格式呈現附步驟圖片的操作說明網頁。當每個步驟都有示意圖時,使用者可以在輪轉介面中預覽圖片。

微資料

以下示範的是以微資料格式呈現附步驟圖片的操作說明網頁。當每個步驟都有示意圖時,使用者可以在輪轉介面中預覽圖片。

附影片的操作說明複合式搜尋結果

JSON-LD

以下示範的是以 JSON-LD 格式呈現由文字、圖片和短片構成的操作說明網頁。

微資料

以下示範的是以微資料格式呈現由文字、圖片和短片構成的操作說明網頁。

規範

如果想讓您的網頁顯示操作說明複合式搜尋結果,以及提供 Google 助理的操作說明動作,請務必遵循下列指南:

內容指南

  • 廣告:HowTo 結構化資料不可用於廣告目的。
  • 不適用的內容:有些內容可能無法顯示操作說明複合式搜尋結果,例如猥褻、不雅用語、煽情露骨內容、暴力圖像、鼓吹危險或不法活動,或是使用仇恨或騷擾言詞。
  • 來源:必須讓瀏覽來源網頁的使用者能看到所有 HowTo 內容。操作說明應該是來源網頁的主要重點。請勿在單一網頁上加入多個 HowTo
  • 材料和工具:為作業需要用到的所有材料和工具新增結構化資料。
  • 步驟:每個 HowToStep 必須包含來源步驟的完整內容。請勿將不屬於步驟的資料 (例如摘要或簡介部分) 標記為步驟。
  • 步驟圖片:如果用圖片說明步驟的效果最好,請務必為這些步驟中的圖片加上個別 HowToStep 標記。只須標記各步驟專屬的說明圖片即可,請勿將單一圖片用於同一份操作說明中的多個步驟。您應該選用與網頁內容相對應的圖片,而不是無法忠實反映操作說明內容的圖片。此外,請勿透過不同圖片測試複合式搜尋結果的最佳做法。
  • 最終圖片:如有能夠精準呈現最終結果的圖片,請務必在網頁上顯示該圖片,並確認 HowTo 標記應透過 image 屬性納入圖片。這張圖片可與最後一個步驟標記的圖片相同。
  • 內容:請勿將 HowTo 標記用於食譜,食譜應該採用 Recipe structured data。文章和通用建議內容必須是特定一組操作說明,才適合使用 HowTo 標記。

結構化資料類型定義

您必須加入內容所需要的屬性,才能顯示複合式搜尋結果。您也可以加入建議屬性來為結構化資料補充更多資訊,創造更優質的使用者體驗。

如要驗證及預覽您的結構化資料,請使用 Google 的複合式搜尋結果測試

HowTo

HowTo 的完整定義列於 schema.org/HowTo

HowTo 類型代表網頁上有操作說明。每個網頁都需要有一個 HowTo 類型定義。

必要屬性
name

Text

操作說明的標題,例如:「如何打領帶」。

step HowToStepHowToSection

構成操作說明完整指示的 HowToStep 元素陣列,每個 step 元素都必須分別對應操作說明中的某個步驟。請勿透過這個屬性標記不屬於步驟的資料,例如摘要或簡介部分。舉例來說:

  • 您可以指定各步驟的完整文字,只要設定每個 HowToSteptext 即可。建議您採用 imageurl 以及表示步驟名稱的 name,因為這些選用屬性可讓搜尋結果呈現更豐富的內容。
  • 如果步驟很複雜,您可以提供步驟 name,並使用 HowToDirectionHowToTip 列出每個子步驟。

構成這個 HowTo 完整指示的 HowToSection 元素陣列,例如:

建議屬性
description

Text

操作說明簡介。

estimatedCost MonetaryAmountText

依操作說明作業的預計耗材成本。

image ImageObjectURL

作業完成示意圖。其他圖片規範:

  • 圖片網址必須可供檢索和建立索引
  • 圖片必須代表加上標記的內容。
  • 圖片必須採 .jpg、.png 或 .gif 格式。
supply HowToSupplyText

執行操作說明或指示所耗費的材料。

tool HowToToolText

執行操作說明或指示時會用到的物件 (非消耗品)。

totalTime Duration

執行所有操作說明或指示總計需要的時間 (含消耗品準備時間),採用 ISO 8601 時間長度格式。

video VideoObject

操作說明影片。接在必要和建議的影片屬性清單之後。影片步驟須加上 hasPart 標記。

HowToSection

HowToSection 的完整定義列於 schema.org/HowToSection

HowToSection 類型定義的是單一操作說明的其中一個環節,其中可包含一或多個步驟。請勿將 HowToSection 用來定義對於某件事的不同解決方案,HowToSection 應用來呈現單一解決方案的一部分。如要提供多種做法,請使用 HowTo 物件。舉例來說,您可以將更換爆胎的多種做法分別用多個 HowTo 物件呈現,而非使用 HowToSection 物件。

必要屬性
itemListElement HowToStep

該環節的詳細步驟清單。

name Text

環節名稱。

HowToStep

HowToStep 的完整定義列於 schema.org/HowToStep

HowToStep 類型定義的是操作說明中的簡易文字步驟,可能含有圖片。

必要屬性
itemListElement HowToDirectionHowToTip

詳細子步驟清單,包括指示或提示。

如果已使用 text,這個屬性則變成選用屬性。

text Text

這個步驟的指示全文。

如果已使用 itemListElement,這個屬性則變成選用屬性。其他規範:

  • 只能包含操作說明文字,不可包含「指引」、「觀看影片」、「步驟 1」等其他文字,因為這些詞組不應列在已加上標記的屬性中。
建議屬性
image ImageObjectURL

步驟圖片。其他圖片規範:

  • 圖片網址必須可供檢索和建立索引
  • 圖片必須代表加上標記的內容。
  • 圖片必須採 .jpg、.png 或 .gif 格式。
name Text

說明步驟摘要的文字或詞組,例如「將金屬線接到柱子上」或「挖掘」。請勿使用非敘述性的文字 (例如「步驟 1:<文字>) 或其他形式的步驟編號 (例如「1. <文字>」)。

url URL

步驟的直接連結 URL (如果有),例如錨定連結片段。

video VideoObjectClip

這個步驟的影片或影片剪輯。

如果使用 VideoObject,這個屬性應接在必要和建議的影片屬性清單之後。

為操作說明步驟加上 hasPart 標記。範例如下:

{
  "@type": "HowToStep",
  "video": {
    "@id": "Clip1"
  }
}

HowToSupply、HowToTool

HowToSupplyHowToTool 的完整定義分別列於 schema.org/HowToSupplyschema.org/HowToTool

HowToSupplyHowToTool 的作用是讓 HowTo 內容更加完備。 兩者有同樣的必要屬性和建議屬性。

必要屬性
name Text

消耗品或工具的名稱。

建議屬性
image ImageObjectURL

消耗品或工具的圖片。其他圖片規範:

  • 圖片網址必須可供檢索和建立索引
  • 圖片必須代表加上標記的內容。
  • 圖片必須採 .jpg、.png 或 .gif 格式。

HowToDirection、HowToTip

HowToDirectionHowToTip 的完整定義分別列於 schema.org/HowToDirectionschema.org/HowToTip

HowToDirectionHowToTip 的作用是提供指示或提示。 兩者有同樣的必要屬性和建議屬性。

必要屬性
text Text

指示或提示文字。

傳送您對下列選項的寶貴意見...

這個網頁