FAQとHow-toの構造化データをマークアップする方法

【Googleリッチリザルト】 FAQとHow-toの構造化データに関して解説

最終更新日:2021年9月24日

小関拓弥

2019年5月8日にGoogleが導入を発表した新しいタイプのリッチリザルト構造化データ『FAQ』と『How-to』。2021年現在、Googleがページコンテンツを認識するために使用している構造化データは、このFAQやHow-toなどのリッチリザルトタイプをはじめ、約30種類公開されています。

その中から当ページではまず、FAQとHow-toの構造化データがどのようなものかわかりやすく説明し、実際にFAQとHow-toをリッチリザルトとして表示するための具体的なマークアップ方法をご紹介します。

加えて、当社が持つメディアで実際にFAQ、How-toの構造化データマークアップを実装してわかった独自データも公開しますので、是非最後までご覧ください。

※リッチリザルトとリッチスニペットは同義。これまでリッチスニペットやリッチカードと呼ばれていたものを統一した名称がリッチリザルトです。詳しくはこちら
※2021年1月29日以降、Googleでリッチリザルトを機能させるにはschema.orgでのマークアップが必要となります（data-vocabulary.orgはサポート終了）。

1 FAQとHow-toの構造化データとは？
- 1.1 FAQ型（よくある質問）リッチリザルトとは
- 1.2 How-to型（ハウツー）リッチリザルトとは
2 FAQ構造化データのマークアップ方法を解説
- 2.1 FAQ構造化データマークアップ完了後は必ずテストしてから実装する
3 How-toリッチリザルトのマークアップ方法は？
- 3.1 How-toリッチリザルト構造化データ実装方法
4 実際に、FAQとHow-toの構造化データをマークアップしてみてわかったこと。
5 まとめ：構造化データマークアップでリッチリザルトを表示させよう

FAQとHow-toの構造化データとは？

構造化データとは、Googleなどの検索エンジンがページコンテンツを認識しやすいようにHTMLタグに記述する特殊なコードのことです。構造化データで記述することで、検索結果にリッチリザルトが表示されるようになり、ユーザーの目に触れやすくなります。

以前からサポートしていたレビューやレシピのリッチリザルト構造化データに加え、2019年5月から新たに『FAQ（よくある質問）』と『How-to（ハウツー）』2タイプのリッチリザルトをサポートしたことになります。

では、FAQとHow-toの構造化データが、検索結果でどのようなリッチリザルトになるのか見ていきましょう。

FAQ型（よくある質問）リッチリザルトとは

FAQ（Frequently Asked Questionsの略）とは「よくある質問」のことで、以下のように質問と回答の一覧がリッチリザルトとして表示されます。

FAQ型のリッチスニペットはパソコンとモバイルの両方で表示されます。

FAQとQAの違い

GoogleはFAQ型の他に、2018年よりQA型（Q&A）の構造化データを導入していました。一見似ているこの2タイプですが、FAQとQAには以下のように大きな違いがあります。

	質問の個数	回答者
FAQ	複数可	ページ作成者
QA	1つのみ	ユーザー

このように、FAQは1ページ内で複数の質問（とその回答）を掲載できるのに対して、QAでは1ページにつき1つの質問しか掲載できません。

また、FAQでは回答の作成者＝ページ作成者である必要があるので、FAQページではユーザーによる回答の投稿ができない状態にしなければなりません。一方、QAページでは1つ質問に対する回答を複数のユーザーが投稿できるコンテンツであることが必要です。

How-to型（ハウツー）リッチリザルトとは

How-to型は、「〜のやり方」「〜する方法」などをステップごとに解説した構造化データです。「ネクタイの結び方」や「キッチンの壁にタイルを張る方法」といったものが例として挙げられます。

このように、テキストのみならず、画像や動画も利用できるのが特徴です。

参照：https://developers.google.com/search/docs/data-types/how-to

こちらのHow-to型リッチリザルトは、FAQ型と違って、モバイルのみに対応しています。

レシピとの使い分け

料理や飲み物の作り方もステップを追って解説するものですが、レシピコンテンツにはHow-to型構造化データを使用してはいけません。

レシピコンテンツはレシピ型の構造化データを使用してマークアップすることをGoogleは推奨しています。

FAQ構造化データのマークアップ方法を解説

FAQとHow-to構造化データの基礎情報がおわかりいただけたところで、続いてはそのマークアップ方法を解説していきます。まずはFAQのマークアップ方法からご紹介しましょう。

FAQリッチリザルトを表示させるためには、以下の4つの必須プロパティーをマークアップする必要があります。

FAQ構造化データの必須プロパティ

mainEntity
acceptedAnswer
name
text

具体的には次の箇所（太字とアンダーバーが引かれているところ）に情報を入れます。

<head>
<title>〇〇〇〇</title>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [{
   "@type": "Question",
   "name": "質問",
   "acceptedAnswer": {
    "@type": "Answer",
    "text": "回答<a href='リンクのURL>アンカーテキスト</a>"
    }
   },
{
   "@type": "Question",
   "name": "質問",
   "acceptedAnswer": {
    "@type": "Answer",
    "text": "回答<a href='リンクのURL>アンカーテキスト</a>"
    }
   },
]
}
</script>
</head>
<body>
</body>

質問と回答を増やす場合は、グレーで色付けされている箇所をコピー＆ペーストして、追加していただければと思います。

FAQ構造化データマークアップ完了後は必ずテストしてから実装する

FAQ構造化データのマークアップが完了したら、Googleが提供しているリッチリザルトテストツールを使ってエラーがないか必ずテストしてから実装しましょう。

How-toリッチリザルトのマークアップ方法は？

では、FAQリッチリザルトの構造化データマークアップ方法に続いて、How-to構造化データのマークアップ方法についてもご紹介…といきたいところなのですが、How-toリッチリザルトのマークアップ方法はFAQと比べると少々複雑。

以下のように複数の構造化データタイプが存在し、それぞれ主要プロパティに加え推奨プロパティが用意されています。

How-to構造化データの必須/推奨プロパティ
構造化データタイプ	必須/推奨	プロパティ	概要
HowTo	必須	name	ハウツーのタイトル。(例)「ネクタイの結び方」など。
	必須	step	ハウツーの手順全体を構成する HowToStep 要素の配列。
	推奨	description	ハウツーの説明。
		estimatedCost	手順の実施で使用する原材料の概算コスト。
		image	ハウツーの完了時の画像。
		supply	手順や指示の実施で使用する原材料。
		tool	手順や指示の実施で使用する（ただし消費はしない）もの。
		totalTime	手順や指示をすべて実施するのに必要な時間（原材料を用意する時間も含む）。※ISO 8601 時間長形式
		video	ハウツーの動画。
		video.hasPart	動画全体から一部を抽出した動画クリップ。
		video.hasPart.endOffset	動画の先頭からの秒数で表したクリップの終了時間。
		video.hasPart.name	クリップの名前。（紐の結び方と解き方を示すクリップの名前の場合は「結び方と解き方」とする）
		hasPart.startOffset	動画の先頭からの秒数で表したクリップの開始時間。
		video.hasPart.url	クリップの開始時間へのリンク。
HowToSection	必須	itemListElement	1つのセクションに含まれるより詳細なステップのリスト。
HowToSection	必須	name	セクションの名前。
HowToStep	必須	itemListElement	指示やヒントなど、詳細なサブステップのリスト。※text を使用する場合は省略可能
	必須	text	ステップの手順を完全に説明するテキスト。※itemListElement を使用する場合は省略可能
	推奨	image	ステップを説明するための画像。
		name	ステップを要約した単語または短いフレーズ。(例)「回線に接続して投稿する」「調べる」など。
		url	ステップに直接リンクする URL（ある場合）。
		video	ステップを説明するための動画または動画クリップ。
HowToSupply /HowToTool	必須	name	原材料または道具の名前。
HowToSupply /HowToTool	推奨	image	原材料または道具の画像。
HowToDirection /HowToTip	必須	text	指示またはヒントのテキスト。

参照元：https://developers.google.com/search/docs/data-types/how-to

以上のように、How-toコンテンツをリッチリザルトとして表示するためには、必ず各構造化データタイプごとの「必須プロパティ」は含めなければなりません。

また「推奨プロパティ」の使用は必須ではありませんが、推奨プロパティを使用することでHow-to構造化データにより多くの情報追加が可能となり、リッチリザルトにおけるUXを向上させることができるのでおすすめです。

では、実際にHow-toリッチリザルトを表示するための構造化データマークアップ方法を確認してみましょう。

How-toリッチリザルト構造化データ実装方法

ここでは、上でも紹介したステップごとの画像を含む場合のHow-toリッチリザルトの構造化データマークアップの例でご紹介します。

例：ステップごとの画像を含むHow-toリッチリザルト（JSON-LD）の場合

<head>
<title>〇〇〇〇</title>
<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "HowTo",
  "image": {
    "@type": "ImageObject",
    "url": "https://example.com/1x1/photo.jpg" //ハウツーの完了時の画像
  },
  "name": "ネクタイの結び方", //ハウツーのタイトル
  "description": "どんなシーンにも映えるフォアインハンドノット（プレーンノット）。フォーマルなスーツからカジュアルなジャケットやネクタイまで、簡単に素早く素敵に見せることができます。一度マスターしてしまえば、1分で結べるので、ピンチの時にも便利です。", //ハウツーの説明
  "totalTime": "PT2M", //手順や指示をすべて実施するのに必要な時間（原材料を用意する時間も含む）。※ISO 8601 時間長形式
  "video": { //ハウツーの動画
    "@type": "VideoObject",
    "name": "ネクタイを結ぶ", //ハウツー動画のタイトル
    "description": "フォアインハンドノットの結び方", //ハウツー動画の説明
    "thumbnailUrl": "https://example.com/photos/photo.jpg", //関連するサムネイル画像
    "contentUrl": "http://www.example.com/videos/123_600x400.mp4", //画像ファイルや動画ファイルなどのメディアオブジェクト
    "embedUrl": "http://www.example.com/videoplayer?id=123", //特定の動画のプレーヤを指すURL
    "uploadDate": "2019-01-05T08:00:00+08:00", //メディアオブジェクトをサイトにアップロードした日付
    "duration": "P1MT10S" //ハウツー動画の時間※ISO 8601 時間長形式
  },
  "supply": [ //手順や指示の実施で使用する原材料
    {
      "@type": "HowToSupply",
      "name": "ネクタイ" //原材料の名前
    }, {
      "@type": "HowToSupply",
      "name": "襟付きシャツ" //原材料の名前
    }
  ],
  "tool": [ //手順や指示の実施で使用する（ただし消費はしない）もの
    {
      "@type": "HowToTool",
      "name": "鏡" //道具の名前
    }
  ],
  "step":[ //ハウツーの手順全体を構成する HowToStep 要素の配列
    {
      "@type": "HowToStep",
      "name": "準備", //ステップ1を要約した単語または短いフレーズ
      "text": "好きなシャツを着てボタンを留め、ネクタイを首にかけます。太い方(大剣)の端を細い方(小剣)の端よりも約1/3長くします。フォーマルなボタンダウンシャツの場合、通常、4番目のボタンと5番目のボタンの間に細い方(小剣)の端が来るようにすると丁度いいです。", //ステップ1の手順を完全に説明するテキスト
      "image": "https://example.com/1x1/step1.jpg", //ステップ1を説明するための画像
      "url": "https://example.com/tie#step1" //ステップ1に直接リンクするURL（ある場合）
    }, {
      "@type": "HowToStep",
      "name": "1回交差する", //ステップ2を要約した単語または短いフレーズ
      "text": "長い方(大剣)の端を短い方(小剣)の上から交差させます。これが結び目の基本となります。", //ステップ2の手順を完全に説明するテキスト
      "image": "https://example.com/1x1/step2.jpg", //ステップ2を説明するための画像
      "url": "https://example.com/tie#step2" //ステップ2に直接リンクするURL（ある場合）
    }, {
      "@type": "HowToStep",
      "name": "2回目の交差をする", //ステップ3を要約した単語または短いフレーズ
      "text": "長い方(大剣)の端を短い方(小剣)の下に持ってきて（ぐるっと潜らせ）、短い方(小剣)の上から戻します。", //ステップ3の手順を完全に説明するテキスト
      "image": "https://example.com/1x1/step3.jpg", //ステップ3を説明するための画像
      "url": "https://example.com/tie#step3" //ステップ3に直接リンクするURL（ある場合）
    }, {
      "@type": "HowToStep",
      "name": "輪っかに通す", //ステップ4を要約した単語または短いフレーズ
      "text": "長い方(大剣)の端を首の周りにできた輪っかに下から通して引き上げます。", //ステップ4の手順を完全に説明するテキスト
      "image": "https://example.com/1x1/step4.jpg", //ステップ4を説明するための画像
      "url": "https://example.com/tie#step4" //ステップ4に直接リンクするURL（ある場合）
    }, {
      "@type": "HowToStep",
      "name": "引っ張って締める", //ステップ5を要約した単語または短いフレーズ
      "text": "長い方(大剣)の端を結び目の輪っかに通し、フィットするように引っ張って締めましょう！", //ステップ5の手順を完全に説明するテキスト
      "image": "https://example.com/1x1/step5.jpg", //ステップ5を説明するための画像
      "url": "https://example.com/tie#step5" //ステップ5に直接リンクするURL（ある場合）
    }
  ]
}
</script>
</head>
<body>
</body>

参照元：https://developers.google.com/search/docs/data-types/how-to

以上のような、ステップごとの画像を含む場合にHow-toリッチリザルトの構造化データマークアップを実装すると、ユーザーは各ステップを画像のカルーセルを含んだプレビューを見ることが可能となります。

ご紹介したようにHow-toリッチリザルトの構造化データマークアップは少々複雑ですので、詳しくはGoogleの公式ページを参照してみてください。

実際に、FAQとHow-toの構造化データをマークアップしてみてわかったこと。

当社EXIDEAではメディアを複数運営しておりますので、実際にFAQの構造化データをマークアップしてみました。ここでは、その実体験から学んだこと、FAQやHow-toの新リッチリザルトが出る条件を紹介いたします。

１ページ目にいる必要がある

そもそも検索結果の１ページ目にいないとFAQやHow-toの構造化データでマークアップしても、リッチリザルトは表示されないようです。

そのため、リッチリザルトを表示させるにはまず、検索結果で上位表示（10位以内）させることが必要になります。

メインコンテンツ内の情報と基本的に一致している必要がある

構造化データは、そもそも本文に書いてある情報をGoogleの検索エンジンにもわかりやすくマークアップするものです。

そのため、メインコンテンツ内にも同様のFAQコンテンツを用意している必要があります。でも問題は、メインコンテンツとFAQ構造化データは完全一致している必要があるのかと言うこと。

当社のメディアで実際に、構造化データをマークアップした結果から言いますと、基本的には一致している必要があると言うのが結論です。メインコンテンツと完全一致している必要はありませんが、9割程度は一致していることが望ましいと思われます。

モバイルの場合は、FAQとHow-to、パソコンはFAQのみが表示される

モバイルはFAQとHow-toのどちらかを表示することができますが、パソコンはHow-toに対応していません。つまり、パソコンで確認できるのはFAQのみとなっています。

そのため、モバイル・PC両方でリッチリザルトを表示させたい方は、FAQの構造化データマークアップがおすすめと言えます。

以上のように、SEO対策のためにFAQやHow-toのリッチリザルトを表示させたいと思っても、そもそもページが上位表示していることが必要なようです。

よって、FAQやHow-toのリッチリザルトの構造化データマークアップもSEO対策の1つと考え、その他様々なSEO対策も合わせて実施していきましょう。SEO対策方法については、下記のページで詳しく解説していますのでぜひご覧ください。

さらに詳しいSEO対策はこちら

まとめ：構造化データマークアップでリッチリザルトを表示させよう

今回は、新しいリッチリザルトとしてGoogle検索に導入されたFAQとHow-toの構造化データに関して解説してきましたが、いかがでしたか？

このページをご覧のみなさんがサイトを運営されているのであれば、構造化データでマークアップすることで、よりユーザーに対しての露出を増やすことができますので、積極的に試していただければと思います。

とはいえ、FAQやHow-toのリッチリザルトを表示するためには、SEO対策で上位表示（10位以内）させることが必要になります。

SEO対策をやっているけれど、なかなか成果が見られない…何がダメなんだろう
これからオウンドメディアの集客はもっとSEOを意識していきたい
自サイトのSEOは何ができていて、これからどんな対策をしていけば良いのか知りたい

このようにお考えの方は、当サイトがSEOやコンテンツマーケティングに関する情報をまとめた資料「SEO対策チェックリスト(ebook)」をぜひご覧ください。

「SEO対策チェックリスト(ebook)」は、経営陣が13年以上Webマーケティングをやっている中で手に入れたノウハウをチェックリスト形式でわかりやすくまとめたもので、当社が実際に試して本当に効果があるもののみを厳選した、10カテゴリー全137項目の最新のSEO対策ノウハウとなっています。

完全無料で公開していますので、ぜひダウンロードしてSEO対策にご活用ください！

この記事を書いた人

小関拓弥

EmmaTools blog編集長。Googleのアルゴリズムの動向を日々研究するSEOマニアであり、三度の飯よりSEOが好き。「最高の１ページを溢れさせる」をミッションとする株式会社EXIDEAのWebメディア事業部のマネージャーを兼任。