searchclose

HowTo｜HowTo検索の構造化データマークアップ方法

カテゴリー
SEO
タグ
ハウツー
HowTo検索
Webクリエイター
Webクリエイター
2020.02.26

HowTo｜HowTo検索の構造化データマークアップ方法

みなさんこんにちは。WEB改善事例記事担当です。
普段、何かについて調べるとき、「○○の方法」「○○で○○する方法」など「方法」を付けて検索することが多いことかと思います。

Googleは2019年9月にそれらの「方法」によって表示されるリッチリザルト「How-to リッチリザルト」を日本でリリースいたしました。また、Googleの発表によると英語圏のGoogleにおいては、Googleアシスタントにも対応しているようですので、今後日本語圏のGoogle検索においても音声検索に対応されることが期待できる機能となります。

引用元：New in structured data: FAQ and How-to
https://webmasters.googleblog.com/2019/05/new-in-structured-data-faq-and-how-to.html

GoogleアシスタントでHowToリッチリザルトが表示されているイメージ

目次

リッチリザルトとは

リッチリザルトとは、ユーザーが検索エンジンで検索した際に、いつもの検索結果とは異なる少しリッチな検索結果のことです。お店であれば、「ローカルビジネス」、映画であれば「映画カルーセル」、求人情報であれば「しごと検索」のように、様々なニーズに応えるような検索結果が表示されます。

「ケーキ 作り方」で検索したときのリッチリザルトイメージ

リッチリザルトが表示される仕組みとしては主にJSON-LDなどの構造化データを対象のページに記述することが条件となります。リッチリザルトの種類によって構造化データは異なるので用途に合わせた構造化データを記述することが必要になります。

今回この記事で紹介する「HowTo リッチリザルト」では「○○する方法」など、何かをするための方法を検索した際に表示されます。ただし、料理の作り方に関しては「HowToリッチリザルト」ではなく「レシピ」の構造化データになるので気をつけましょう。

HowToリッチリザルトの表示イメージ

HowToリッチリザルトを実装するとこのように表示されます。

HowToリッチリザルトの表示イメージ

HowToリッチリザルトはスマホでのみ表示されます。パソコンでは表示されないので確認の際は注意が必要です。また、HowToリッチリザルトは「テキストのみのHowTo」と「テキストと画像のHowTo」、そして「テキストと動画のHowTo」の3種類あり、実装するページに合わせて構造化データを書き分ける必要があります。

HowToリッチリザルトの構造化データ

以下、HowToリッチリザルト構造化データの主なルールをGoogle検索 デベロッパーガイド ハウツー検索から抜粋いたしました。。

  • HowTo 構造化データを広告目的に使用しないでください。
  • すべての HowTo コンテンツは、参照元のページの主な重点項目にする必要があります。特定のページに複数の HowTo を含めないでください。
  • タスクを完了するために必要なすべての原材料と道具に構造化データを追加してください。
  • 画像を使用して最終結果を的確に表現できる場合は、必ずその画像をページに表示し、image プロパティを使用して HowTo マークアップに含めてください。
  • レシピに HowTo マークアップを使用しないでください。代わりに Recipe structured data を使用する必要があります。
  • 特定の手順ではない記事や一般的なアドバイスのコンテンツに HowTo マークアップは適していません。

HowTo 構造化データ 必須、推奨プロパティ

タイププロパティ概要任意/必須
HowTonameハウツーのタイトル。たとえば、「ネクタイの結び方」など。必須
HowTostepハウツーの手順全体を構成する HowToStep 要素の配列。必須
HowTodescriptionハウツーの説明。推奨
HowToestimatedCost手順の実施で使用する原材料の概算コスト。推奨
HowToimageハウツーの完了時の画像。推奨
HowTosupply手順や指示の実施で使用する原材料。推奨
HowTotool手順や指示の実施で使用する（ただし消費はしない）もの。推奨
HowTototalTime手順や指示をすべて実施するのに必要な時間（原材料を用意する時間も含む）。推奨
HowTovideoハウツーの動画。推奨
HowToSectionitemListElementこのセクションに含まれる詳細なステップのリスト。必須
HowToSectionnameセクションの名前。必須
HowToStepitemListElement指示やヒントなど、詳細なサブステップのリスト。必須
HowToSteptextこのステップの手順を完全に説明するテキスト。必須
HowToStepimageステップを説明するための画像。推奨
HowToStepnameステップを要約した単語または短いフレーズ（「回線に接続して投稿する」や「調べる」など）推奨
HowToStepurlステップに直接リンクする URL（ある場合）。推奨
HowToStepvideoこのステップを説明するための動画または動画クリップ。推奨
HowToSupply、HowToToolname原材料または道具の名前。必須
HowToSupply、HowToToolimage原材料または道具の画像。推奨
HowToDirection、HowToTiptext指示またはヒントのテキスト。必須

HowToリッチリザルトの構造化データテンプレート

以下の記述がHowToリッチリザルトの主なJSON-LDの記述となります。



{
	"@context": "http://schema.org",
	"@type": "HowTo",
	"name": "※※ハウツーのタイトル※※", //ハウツーのタイトル
	"description": "※※ハウツーの説明※※", //ハウツーの説明
	"image": {
		"@type": "ImageObject",
		"url": "https://example.com/photos/1x1/photo.jpg", //ハウツー完了時の画像
		"height": "406",
		"width": "305"
	},

//原材料の概算コスト
	"estimatedCost": {
		"@type": "MonetaryAmount", //テキストでの記述も可能
		"currency": "USD", //通貨単位
		"value": "100" //金額(数字のみ)
	},

//手順の実施で使用する原材料
	"supply": [
		{
			"@type": "HowToSupply",
			"name": "※※原材料1※※"
		}, {
			"@type": "HowToSupply",
			"name": "※※原材料2※※"
		}
	],
	"tool": [
		{
			"@type": "HowToTool",
			"name": "※※手順で使用するもの※※"
		}, {
			"@type": "HowToTool",
			"name": "※※手順で使用するもの2※※"
		}
	],

//ハウツーの手順を構成するステップ要素
	"step": [
		{
			"@type": "HowToStep",
			"url": "https://example.com/sample#step1", //ステップへのアンカーリンク
			"name": "※※ステップの名前※※",
			"itemListElement": [{
				"@type": "HowToDirection", //サブステップ
				"text": "※※サブステップ説明文※※" //サブステップ説明文
			}, {
				"@type": "HowToDirection",
				"text": "※※サブステップ説明文2※※" //サブステップ説明文
			}],
			"image": {
				"@type": "ImageObject",
				"url": "https://example.com/img/sample-step1.jpg", //ハウツー完了時の画像
				"height": "406",
				"width": "305"
			}
		}, {
			"@type": "HowToStep",
			"name": "※※ステップの名前※※",
			"url": "https://example.com/sample#step2", //ステップへのアンカーリンク
			"itemListElement": [{
				"@type": "HowToDirection",
				"text": "※※ステップ説明文※※"
			}, {
				"@type": "HowToDirection", //サブステップ
				"text": "※※サブステップ説明文※※" //サブステップ説明文
			}, {
				"@type": "HowToDirection",
				"text": "※※サブステップ説明文2※※" //サブステップ説明文
			}],
			"image": {
				"@type": "ImageObject",
				"url": "https://example.com/img/sample-step2.jpg", //ハウツー完了時の画像
				"height": "406",
				"width": "305"
			}
		}
	],
	"totalTime": "P2D" //手順や指示をすべて実施するのに必要な時間（原材料を用意する時間も含む）
}

参考：Google 検索デベロッパー ガイド：ハウツー検索
https://developers.google.com/search/docs/data-types/how-to?hl=ja

HowToリッチリザルトの実装方法

ここではHowToリッチリザルトの実装方法を案内していきます。

準備するもの

  • パソコン
  • HTMLを編集できるツール

JSON-LDで構造化データをマークアップしているイメージ
1. 構造化データを実装するページにマークアップ
必須項目、推奨項目に気をつけてHTMLのbody内に構造化データをマークアップします。
構造化データテストツールでエラーのチェックをしているイメージ
2. 構造化データテストツールで確認
実装ページのURLまたは構造化データの記述を構造化データテストツールで検証し、エラーが出ないかを確認します。
スマートフォンで実際にリッチリザルトが表示されているかを確認しているイメージ
3. スマートフォンで表示確認
実際に「site:※※実装ページURL※※※※」などで検索し、リッチリザルトが表示されるかを確認します。問題なく表示されたら完了となります。

これでHowToリッチリザルトの実装は完了となります。

HowToリッチリザルト実装後のGoogleサーチコンソールによる比較

今回この記事ではHowToリッチリザルトの構造化マークアップ実装方法についてご紹介いたしました。実際に当社で実装したところ、同日にアップロードした3記事をサーチコンソールで見比べてみるとこのような変化がありました。

Google サーチコンソールで見た「HowTo｜Google サーチコンソールでクロール申請する方法」のページのデータ

HowTo｜Google サーチコンソールでクロール申請する方法
https://xn--web-oi9du9bc8tgu2a.com/howto-sc-crawl/

Google サーチコンソールで見た「HowTo｜Google アナリティクスアカウントでGoogle サーチコンソールのプロパティを作成する方法」のページのデータ

HowTo｜Google アナリティクスアカウントでGoogle サーチコンソールのプロパティを作成する方法
https://xn--web-oi9du9bc8tgu2a.com/howto-sc-property/

Google サーチコンソールで見た「HowTo｜Google サーチコンソールで共有設定する方法」のページのデータ

HowTo｜Google サーチコンソールで共有設定する方法
https://xn--web-oi9du9bc8tgu2a.com/howto-sc-share/

これらの3記事はすべて同日に投稿しており、HowToの構造化データも記述しています。
「HowTo｜Google サーチコンソールで共有設定する方法」に関しては動画のHowToも記述しており、他の2つと比べるとクリック数や表示回数に大きな差が出ていることが分かりました。動画のHowToが数字の変化に大きく関係していると断言はできませんが、数字として大きな差がでているので今後も引き続き調査していきたいところです。

まとめ

いかがでしたでしょうか。HowToの構造化データは現状、スマートフォンにしか対応していないうえに実装のルールも少々複雑です。しかしながら、実際に検索画面でリッチリザルトが表示されると目を引くのは間違いないでしょう。これを機会にHowToリッチリザルトを実装してみてはいかがでしょうか。


関連記事

関連する記事はございません。

PAGE TOP