How-to

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

只要為操作說明網頁適當加入標記,就可能在 Google 搜尋上以複合式結果顯示,並提供 Google 助理 How-to 動作,讓網站更容易觸及合適的使用者。

功能適用情況

只要 Google 搜尋支援您的語言且適用於您所在的國家/地區,即可使用 How-to 複合式搜尋結果。這項功能僅能在行動裝置使用,並不適用於電腦。

範例

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

標準 How-to 複合式搜尋結果

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

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

微資料

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

附步驟圖片的 How-to 複合式搜尋結果

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

schema.org/HowTo 內提供 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 標記。

video.hasPart

Clip

整部影片的一部分剪輯。

video.hasPart.endOffset

Number

剪輯結束時間 (以從影片開頭算起的秒數表示)。

video.hasPart.name

Text

剪輯名稱。舉例來說,如果是示範繫緊領帶步驟的剪輯,就可以命名為「繫緊領帶」。

hasPart.startOffset

Number

剪輯開始時間 (以從影片開頭算起的秒數表示)。

video.hasPart.url

URL

剪輯開始時間的連結。開始時間必須與 video.hasPart.startOffset 中設定的值相同。例如:


"startOffset": 30,
"endOffset": 45,
"url": "http://www.example.com/example&t=30"

HowToSection

schema.org/HowToSection 內提供 HowToSection 的完整定義。

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

必要屬性
itemListElement HowToStep

該環節的詳細步驟清單。

name Text

環節名稱。

HowToStep

schema.org/HowToStep 內提供 HowToStep 的完整定義。

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

必要屬性
itemListElement HowToDirectionHowToTip

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

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

text Text

這個步驟的指示全文。

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

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

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

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

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

url URL

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

video VideoObjectClip

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

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

HowToSupply、HowToTool

schema.org/HowToSupply schema.org/HowToTool 內分別提供 HowToSupplyHowToTool 的完整定義。

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

必要屬性
name Text

消耗品或工具的名稱。

建議屬性
image ImageObjectURL

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

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

HowToDirection、HowToTip

schema.org/HowToDirectionschema.org/HowToTip 內分別提供 HowToDirectionHowToTip 的完整定義。

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

必要屬性
text Text

指示或提示文字。