ハウツー

HowTo 構造化データは、コンテンツがハウツーであることを Google に明示するために使用します。ハウツーとは、あるタスクを正しく完了するための一連のステップを、順を追ってユーザーに説明するもので、動画、画像、テキストを利用できます。例として、「ネクタイの結び方」や「キッチンの壁にタイルを張る方法」などが挙げられます。ハウツーのステップを一つずつ順番に読んでもらう必要がある場合には、HowTo 構造化データの使用をおすすめします。ハウツーがページの主な重点項目である場合は、HowTo 構造化データが適切です。

ハウツーのページを適切にマークアップすると、検索結果にリッチリザルトを表示したり、Google アシスタントのハウツー アクションで対応したりできるようになります。これにより、想定するユーザーにリーチしやすいサイトになります。

機能の提供状況

ハウツーのリッチリザルトは現在、Google 検索を利用できるすべての国において英語で表示されています。この機能はモバイル デバイスでのみ利用でき、デスクトップでは利用できません。

ここでは、ハウツーのリッチリザルトでのコンテンツ表示例をいくつかご紹介します。ハウツーに完了時の画像とステップごとの画像を含めると、より細かい変化の様子を視覚的に表現できます。必須プロパティに加え推奨プロパティをできるだけ多く追加すると、Google 検索でハウツー コンテンツをより効果的に表示できます。

標準的なハウツーのリッチリザルト

標準的なハウツーのリッチリザルトの画像
JSON-LD

これは、テキストベースのハウツーページを JSON-LD で記述した例です。この例に含まれる画像は、ハウツーの完了時の状態を示すもの 1 つだけです。このリッチリザルトから、ユーザーはコンテンツのプレビューとしていくつかのステップを見ることができます。

microdata

これは、テキストベースのハウツーページを microdata で記述した例です。この例に含まれる画像は、ハウツーの完了時の状態を示すもの 1 つだけです。このリッチリザルトから、ユーザーはコンテンツのプレビューとしていくつかのステップを見ることができます。

ステップごとの画像を含むハウツーのリッチリザルト

視覚的なハウツーのリッチリザルトの画像
JSON-LD

これは、ステップごとの画像を含むハウツーページを JSON-LD で記述した例です。各ステップの画像がある場合、ユーザーは画像のカルーセルを含んだプレビューを見ることができます。

microdata

これは、ステップごとの画像を含むハウツーページを microdata で記述した例です。各ステップの画像がある場合、ユーザーは画像のカルーセルを含んだプレビューを見ることができます。

動画を含むハウツーのリッチリザルト

JSON-LD

これは、テキスト、画像、動画クリップの組み合わせを含むハウツーページを、JSON-LD で記述した例です。

microdata

これは、テキスト、画像、動画クリップの組み合わせを含むハウツーページを、microdata で記述した例です。

ガイドライン

ページをハウツーのリッチリザルトや Google アシスタントのハウツー アクションで表示できるようにするためには、以下のガイドラインに準拠する必要があります。

コンテンツ ガイドライン

  • 広告: HowTo 構造化データを広告目的に使用しないでください。
  • 不適格なコンテンツ: ハウツーのリッチリザルトが表示されない可能性のあるコンテンツとして、猥褻または冒涜的なコンテンツ、露骨な性表現を含むコンテンツ、暴力的な描写を含むコンテンツ、危険または違法な行為を助長するコンテンツ、差別や中傷にあたるコンテンツが挙げられます。
  • 参照元: すべての HowTo コンテンツは、参照元のページでユーザーに表示されなければなりません。ハウツーは参照元のページの主な重点項目にする必要があります。特定のページに複数の HowTo を含めないでください。
  • 原材料と道具: タスクを完了するために必要なすべての原材料と道具に構造化データを追加してください。
  • ステップ:HowToStep には、参照元のステップのコンテンツ全体を含める必要があります。ステップ以外のデータ(サマリーや紹介セクションなど)をステップとしてマークアップしないでください。
  • ステップの画像: 画像がある方がわかりやすいステップについては、各 HowToStep で該当する画像をマークアップしてください。各ステップに固有のステップ画像で手順を示すもののみをマークアップし、1 つのハウツー内の異なるステップに同じ画像を使用しないでください。ページのコンテンツに対応する画像を共通して使用してください。ハウツー コンテンツを反映していない画像やさまざまな画像を使用してリッチリザルトを最適化しないようにしてください。
  • 最終画像: 画像を使用して最終結果を的確に表現できる場合は、必ずその画像をページに表示し、image プロパティを使用して HowTo マークアップに含めてください。この画像は、最後のステップでマークアップするものと同じものになります。
  • コンテンツ: レシピに HowTo マークアップを使用しないでください。代わりに Recipe structured data を使用する必要があります。特定の手順ではない記事や一般的なアドバイスのコンテンツに HowTo マークアップは適していません。

構造化データタイプの定義

コンテンツがリッチリザルトとして表示されるようにするには、必須プロパティを含める必要があります。また、推奨プロパティを使用することで構造化データにより多くの情報を追加でき、ユーザー エクスペリエンスを向上させることができます。

構造化データの検証とプレビューには、Google のリッチリザルト テストをご利用ください。

HowTo

HowTo の定義の全文は schema.org/HowTo で確認できます。

HowTo タイプは、ページにハウツーが含まれていることを示します。ページごとに 1 つの HowTo タイプを定義する必要があります。

必須プロパティ
name

Text

ハウツーのタイトル。たとえば、「ネクタイの結び方」など。

step HowToStep または HowToSection

ハウツーの手順全体を構成する HowToStep 要素の配列。各 step 要素は、手順の個々のステップに対応する必要があります。このプロパティを使用して、ステップ以外のデータ(サマリーや紹介セクションなど)をマークアップしないでください。 次に例を示します。

  • HowToSteptext を設定することで、各ステップに対するすべてのテキストを指定できます。imagename(手順タイトルを指定)、url は省略可能ですが、オプションのプロパティによって検索結果をリッチ形式で表現できるため、使用することを推奨します。
  • 複雑なステップの場合は、1 つのステップに name を設定し、HowToDirectionHowToTip を使用して個々のサブステップをリストできます。

この HowTo の手順全体を構成する HowToSection 要素の配列。例:

推奨プロパティ
description

Text

ハウツーの説明。

estimatedCost MonetaryAmount または Text

手順の実施で使用する原材料の概算コスト。

image ImageObject または URL

ハウツーの完了時の画像。画像に関するその他のガイドライン:

  • 画像の URL は、クロールやインデックス登録に対応できる必要があります。
  • 画像はマークアップされたコンテンツを表している必要があります。
  • 画像の形式は、.jpg、.png、.gif のいずれかである必要があります。
supply HowToSupply または Text

手順や指示の実施で使用する原材料。

tool HowToTool または Text

手順や指示の実施で使用する(ただし消費はしない)もの。

totalTime Duration

手順や指示をすべて実施するのに必要な時間(原材料を用意する時間も含む)。ISO 8601 時間長形式。

video VideoObject

ハウツーの動画。必須および推奨の動画プロパティのリストを使用してください。hasPart で動画のステップをマークしてください。

HowToSection

HowToSection の定義の全文は schema.org/HowToSection で確認できます。

HowToSection タイプは、1 つのハウツー内の一部分(セクション)を定義するもので、1 つ以上のステップを含みます。HowToSection を使用して、タスクを完了するための別の方法を定義しないでください。HowToSection は、あくまでも 1 つの方法の一部分を定義するものです。タスクを完了するための方法を複数挙げる場合は、複数の HowTo オブジェクトを使用してください。たとえば、パンクしたタイヤを交換するための複数の方法は、HowToSection オブジェクトではなく、複数の HowTo オブジェクトとしてリストします。

必須プロパティ
itemListElement HowToStep

このセクションに含まれる詳細なステップのリスト。

name Text

セクションの名前。

HowToStep

HowToStep の定義の全文は schema.org/HowToStep で確認できます。

HowToStep タイプは、ハウツー内のステップをテキストというシンプルな形式で定義するもので、画像を 1 つ含めることができます。

必須プロパティ
itemListElement HowToDirection または HowToTip

指示やヒントなど、詳細なサブステップのリスト。

text を使用する場合は省略可能です。

text Text

このステップの手順を完全に説明するテキスト。

itemListElement を使用する場合は省略可能です。その他のガイドライン:

  • 手順を説明するテキストのみを含め、それ以外のテキスト(「方法」、「動画を見る」、「ステップ 1」など)は含めないでください。手順説明以外のテキストは、マークアップされたプロパティの外側で指定してください。
推奨プロパティ
image ImageObject または URL

ステップを説明するための画像。画像に関するその他のガイドライン:

  • 画像の URL は、クロールやインデックス登録に対応できる必要があります。
  • 画像はマークアップされたコンテンツを表している必要があります。
  • 画像の形式は、.jpg、.png、.gif のいずれかである必要があります。
name Text

ステップを要約した単語または短いフレーズです(「回線に接続して投稿する」や「調べる」など)。説明のないテキスト(「ステップ 1: [テキスト]」など)やその他の形式のステップ番号(「1. [テキスト]」など)は使用しないでください。

url URL

ステップに直接リンクする URL(ある場合)。たとえば、アンカーリンク フラグメントなど。

video VideoObject または Clip

このステップを説明するための動画または動画クリップ。

VideoObject については、動画の必須プロパティと推奨プロパティのリストを使用してください。

hasPart でハウツーのステップをマークしてください。次の例をご覧ください。


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

HowToSupply、HowToTool

HowToSupplyHowToTool の定義の全文は、それぞれ schema.org/HowToSupplyschema.org/HowToTool で確認できます。

HowToSupplyHowToTool は、HowTo を完了するために使用されるものです。どちらも同じ必須プロパティと推奨プロパティを持ちます。

必須プロパティ
name Text

原材料または道具の名前。

推奨プロパティ
image ImageObject または URL

原材料または道具の画像。画像に関するその他のガイドライン:

  • 画像の URL は、クロールやインデックス登録に対応できる必要があります。
  • 画像はマークアップされたコンテンツを表している必要があります。
  • 画像の形式は、.jpg、.png、.gif のいずれかである必要があります。

HowToDirection、HowToTip

HowToDirectionHowToTip の定義の全文は、それぞれ schema.org/HowToDirectionschema.org/HowToTip で確認できます。

HowToDirectionHowToTip を使用して指示やヒントを記述します。どちらも同じ必須プロパティと推奨プロパティを持ちます。

必須プロパティ
text Text

指示またはヒントのテキスト。