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

公開日 2020/02/26 11:51

更新日 2023/08/30 15:08

SEO対策

普段、何かについて調べるとき、「○○の方法」「○○で○○する方法」など「方法」を付けて検索することが多いことかと思います。

Googleは2019年9月にそれらの「方法」によって表示されるリッチリザルト「How-to リッチリザルト」を日本でリリースいたしました。

また、Googleの発表によると英語圏のGoogleにおいては、Googleアシスタントにも対応しているようですので、今後日本語圏のGoogle検索においても音声検索に対応されることが期待できる機能となります。

引用元：New in structured data: FAQ and How-to

リッチリザルトとは

リッチリザルトとは、ユーザーが検索エンジンで検索した際に、いつもの検索結果とは異なる少しリッチな検索結果のことです。

お店であれば、「ローカルビジネス」、映画であれば「映画カルーセル」、求人情報であれば「しごと検索」のように、様々なニーズに応えるような検索結果が表示されます。

リッチリザルトが表示される仕組みとしては主にJSON-LDなどの構造化データを対象のページに記述することが条件となります。

リッチリザルトの種類によって構造化データは異なるので用途に合わせた構造化データを記述することが必要になります。

今回この記事で紹介する「HowTo リッチリザルト」では「○○する方法」など、何かをするための方法を検索した際に表示されます。

ただし、料理の作り方に関しては「HowToリッチリザルト」ではなく「レシピ」の構造化データになるので気をつけましょう。

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

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

HowToリッチリザルトはスマホでのみ表示されます。パソコンでは表示されないので確認の際は注意が必要です。

また、HowToリッチリザルトは「テキストのみのHowTo」と「テキストと画像のHowTo」、そして「テキストと動画のHowTo」の3種類あり、実装するページに合わせて構造化データを書き分ける必要があります。

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

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

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

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

タイプ	プロパティ	概要	任意/必須
HowTo	name	ハウツーのタイトル。たとえば、「ネクタイの結び方」など。	必須
HowTo	step	ハウツーの手順全体を構成する HowToStep 要素の配列。	必須
HowTo	description	ハウツーの説明。	推奨
HowTo	estimatedCost	手順の実施で使用する原材料の概算コスト。	推奨
HowTo	image	ハウツーの完了時の画像。	推奨
HowTo	supply	手順や指示の実施で使用する原材料。	推奨
HowTo	tool	手順や指示の実施で使用する（ただし消費はしない）もの。	推奨
HowTo	totalTime	手順や指示をすべて実施するのに必要な時間（原材料を用意する時間も含む）。	推奨
HowTo	video	ハウツーの動画。	推奨
HowToSection	itemListElement	このセクションに含まれる詳細なステップのリスト。	必須
HowToSection	name	セクションの名前。	必須
HowToStep	itemListElement	指示やヒントなど、詳細なサブステップのリスト。	必須
HowToStep	text	このステップの手順を完全に説明するテキスト。	必須
HowToStep	image	ステップを説明するための画像。	推奨
HowToStep	name	ステップを要約した単語または短いフレーズ（「回線に接続して投稿する」や「調べる」など）	推奨
HowToStep	url	ステップに直接リンクする URL（ある場合）。	推奨
HowToStep	video	このステップを説明するための動画または動画クリップ。	推奨
HowToSupply、HowToTool	name	原材料または道具の名前。	必須
HowToSupply、HowToTool	image	原材料または道具の画像。	推奨
HowToDirection、HowToTip	text	指示またはヒントのテキスト。	必須

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 検索デベロッパーガイド：ハウツー検索