ハウツー（HowTo）の構造化データ

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

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

構造化データを追加する方法

構造化データは、ページに関する情報を提供し、ページ コンテンツを分類するための標準化されたデータ形式です。構造化データを初めて使用する場合は、構造化データの仕組みについてをご覧ください。

構造化データの作成、テスト、リリースの概要は次のとおりです。ウェブページに構造化データを追加するための手順ガイドについては、構造化データの Codelab をご覧ください。

  1. 必須プロパティを追加します。使用している形式に基づいて、ページ上の構造化データを挿入する場所をご確認ください。
  2. ガイドラインに従います。
  3. リッチリザルト テストでコードを検証し、重大なエラーを修正します。ツールで報告される重大ではない問題の修正も検討してください。構造化データの品質向上に役立ちます（ただし、リッチリザルトの対象となるために必ずしも必要というわけではありません）。
  4. 構造化データが含まれているページを数ページ導入し、URL 検査ツールを使用して、Google でページがどのように表示されるかをテストします。Google がページにアクセスでき、robots.txt ファイル、noindex タグ、ログイン要件によってページがブロックされていないことを確認します。ページが正常に表示されたら、Google に URL の再クロールを依頼できます。
  5. 今後の変更について Google に継続して情報を提供するために、サイトマップを送信することをおすすめします。これは、Search Console Sitemap API で自動化できます。

機能の提供状況

ハウツーのリッチリザルトは現在、Google 検索を利用できるすべての言語と国で表示されています。また、この機能はモバイル デバイスとパソコンでご利用いただけます。

例

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

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

Google 検索の標準的なハウツーのリッチリザルト
JSON-LD

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


<html>
  <head>
    <title>How to tile a kitchen backsplash</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "HowTo",
      "name": "How to tile a kitchen backsplash",
      "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": "tiles"
        }, {
          "@type": "HowToSupply",
          "name": "thin-set mortar"
        }, {
          "@type": "HowToSupply",
          "name": "tile grout"
        }, {
          "@type": "HowToSupply",
          "name": "grout sealer"
        }
      ],
      "tool": [
        {
          "@type": "HowToTool",
          "name": "notched trowel"
        }, {
          "@type": "HowToTool",
          "name": "bucket"
        },{
          "@type": "HowToTool",
          "name": "large sponge"
        }
      ],
      "step": [
        {
          "@type": "HowToStep",
          "url": "https://example.com/kitchen#step1",
          "name": "Prepare the surfaces",
          "itemListElement": [{
            "@type": "HowToDirection",
            "text": "Turn off the power to the kitchen and then remove everything that is on the wall, such as outlet covers, switchplates, and any other item in the area that is to be tiled."
          }, {
            "@type": "HowToDirection",
            "text": "Then clean the surface thoroughly to remove any grease or other debris and tape off the area."
          }],
          "image": {
            "@type": "ImageObject",
            "url": "https://example.com/photos/1x1/photo-step1.jpg",
            "height": "406",
            "width": "305"
          }
        }, {
          "@type": "HowToStep",
          "name": "Plan your layout",
          "url": "https://example.com/kitchen#step2",
          "itemListElement": [{
            "@type": "HowToTip",
            "text": "The creases created up until this point will be guiding lines for creating the four walls of your planter box."
          }, {
            "@type": "HowToDirection",
            "text": "Lift one side at a 90-degree angle, and fold it in place so that the point on the paper matches the other two points already in the center."
          }, {
            "@type": "HowToDirection",
            "text": "Repeat on the other side."
          }],
          "image": {
            "@type": "ImageObject",
            "url": "https://example.com/photos/1x1/photo-step2.jpg",
            "height": "406",
            "width": "305"
          }
        }, {
          "@type": "HowToStep",
          "name": "Prepare your and apply mortar (or choose adhesive tile)",
          "url": "https://example.com/kitchen#step3",
          "itemListElement": [{
            "@type": "HowToDirection",
            "text": "Follow the instructions on your thin-set mortar to determine the right amount of water to fill in your bucket. Once done, add the powder gradually and make sure it is thoroughly mixed."
          }, {
            "@type": "HowToDirection",
            "text": "Once mixed, let it stand for a few minutes before mixing it again. This time do not add more water. Double check your thin-set mortar instructions to make sure the consistency is right."
          }, {
            "@type": "HowToDirection",
            "text": "Spread the mortar on a small section of the wall with a trowel."
          }, {
            "@type": "HowToTip",
            "text": "Thinset and other adhesives set quickly so make sure to work in a small area."
          }, {
            "@type": "HowToDirection",
            "text": "Once it's applied, comb over it with a notched trowel."
          }],
          "image": {
            "@type": "ImageObject",
            "url": "https://example.com/photos/1x1/photo-step3.jpg",
            "height": "406",
            "width": "305"
          }
        }, {
          "@type": "HowToStep",
          "name": "Add your tile to the wall",
          "url": "https://example.com/kitchen#step4",
          "itemListElement": [{
            "@type": "HowToDirection",
            "text": "Place the tile sheets along the wall, making sure to add spacers so the tiles remain lined up."
          }, {
            "@type": "HowToDirection",
            "text": "Press the first piece of tile into the wall with a little twist, leaving a small (usually one-eight inch) gap at the countertop to account for expansion. use a rubber float to press the tile and ensure it sets in the adhesive."
          }, {
            "@type": "HowToDirection",
            "text": "Repeat the mortar and tiling until your wall is completely tiled, Working in small sections."
          }],
          "image": {
            "@type": "ImageObject",
            "url": "https://example.com/photos/1x1/photo-step4.jpg",
            "height": "406",
            "width": "305"
          }
        }, {
          "@type": "HowToStep",
          "name": "Apply the grout",
          "url": "https://example.com/kitchen#step5",
          "itemListElement": [{
            "@type": "HowToDirection",
            "text": "Allow the thin-set mortar to set. This usually takes about 12 hours. Don't mix the grout before the mortar is set, because you don't want the grout to dry out!"
          }, {
            "@type": "HowToDirection",
            "text": "To apply, cover the area thoroughly with grout and make sure you fill all the joints by spreading it across the tiles vertically, horizontally, and diagonally. Then fill any remaining voids with grout."
          }, {
            "@type": "HowToDirection",
            "text": "Then, with a moist sponge, sponge away the excess grout and then wipe clean with a towel. For easier maintenance in the future, think about applying a grout sealer."
          }],
          "image": {
            "@type": "ImageObject",
            "url": "https://example.com/photos/1x1/photo-step5.jpg",
            "height": "406",
            "width": "305"
          }
        }
      ],
      "totalTime": "P2D"
    }
    </script>
  </head>
  <body>
  </body>
</html>
microdata

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


<html>
<head>
<title>How to tile a kitchen backsplash</title>
</head>
<body>
<div itemscope itemtype="https://schema.org/HowTo">
  <b><span itemprop="name">How to tile a kitchen backsplash</span></b>
  <div>About <span itemprop="estimatedCost" itemscope itemtype="https://schema.org/MonetaryAmount">
    <meta itemprop="currency" content="USD"/>
    <meta itemprop="value" content="100"/>
    $100
  </span>
  </div>
  <div>About <span itemprop="totalTime" content="P2D">2 days</span></div>
  <div>Necessary Items:</div>
  <div itemprop="supply" itemscope itemtype="https://schema.org/HowToSupply">
    <a itemprop="url" href="https://example.com/supplies?id=1">
      <span itemprop="name">tiles</span>
    </a>
    <img alt="Blue kitchen tiles with scalloped edges" itemprop="image" src="https://example.com/photos/1x1/photo.jpg"/>
  </div>
  <div itemprop="supply" itemscope itemtype="https://schema.org/HowToSupply">
    <a itemprop="url" href="https://example.com/supplies?id=2">
      <span itemprop="name">thin-set mortar</span>
    </a>
    <img alt="Thin-set mortar" itemprop="image"
         src="https://example.com/photos/1x1/photo.jpg"/>
  </div>
  <div itemprop="supply" itemscope itemtype="https://schema.org/HowToSupply">
    <a itemprop="url" href="https://example.com/supplies?id=3">
      <span itemprop="name">tile grout</span>
    </a>
    <img alt="White tile grout" itemprop="image"
         src="https://example.com/photos/1x1/photo.jpg"/>
  </div>
  <div itemprop="supply" itemscope itemtype="https://schema.org/HowToSupply">
    <a itemprop="url" href="https://example.com/supplies?id=4">
      <span itemprop="name">grout sealer</span>
    </a>
    <img alt="Grout sealer" itemprop="image"
         src="https://example.com/photos/1x1/photo.jpg"/>
  </div>
  <div itemprop="tool" itemscope itemtype="https://schema.org/HowToTool">
    <a itemprop="url" href="https://example.com/supplies?id=5">
      <span itemprop="name">notched trowel</span>
    </a>
    <img alt="Notched trowel with a red handle" itemprop="image"
         src="https://example.com/photos/1x1/photo.jpg"/>
  </div>
  <div itemprop="tool" itemscope itemtype="https://schema.org/HowToTool">
    <a itemprop="url" href="https://example.com/tools?id=6">
      <span itemprop="name">bucket</span>
    </a>
    <img alt="Medium-sized blue bucket" itemprop="image" src="https://example.com/photos/1x1/photo.jpg"/>
  </div>
  <div itemprop="tool" itemscope itemtype="https://schema.org/HowToTool">
    <a itemprop="url" href="https://example.com/tools?id=7">
      <span itemprop="name">large sponge</span>
    </a>
    <img alt="Large yellow sponge" itemprop="image"
         src="https://example.com/photos/1x1/photo.jpg"/>
  </div>
  <div itemprop="step" itemscope itemtype="https://schema.org/HowToStep">
    <link itemprop="url" href="https://example.com/example#step1" />
    <div itemprop="name">Preparation</div>
    <img itemprop="image" alt="image showing preparation"
         src="https://example.com/photos/1x1/photo-step1.jpg"/>
    <div itemprop="itemListElement" itemscope itemtype="https://schema.org/HowToDirection">
      <div itemprop="text">Turn off the power to the kitchen and then remove
        everything that is on the wall, such as outlet covers, switchplates, and any other item in
        the area that is to be tiled. Then clean the surface thoroughly to remove any grease or
        other debris and tape off the area.
      </div>
    </div>
  </div>
  <div itemprop="step" itemscope itemtype="https://schema.org/HowToStep">
    <link itemprop="url" href="https://example.com/example#step2" />
    <div itemprop="name">Plan your Layout</div>
    <img itemprop="image" alt="image showing layout planning"
           src="https://example.com/photos/1x1/photo-step2.jpg"/>
    <div itemprop="itemListElement" itemscope itemtype="https://schema.org/HowToDirection">
      <div itemprop="text">Lay out your tile horizontally below the wall where you're going to
        place it. This makes it easy to ensure that your pattern will fit in the space provided.
        Also it helps you double check that you have enough tile and know exactly where each piece
        will go.
      </div>
    </div>
    <div itemprop="itemListElement" itemscope itemtype="https://schema.org/HowToDirection">
      <div itemprop="text">Spread the mortar on a small section of the wall with a trowel. Thinset
        and other adhesives set quickly so make sure to work in a small area. Once it's applied,
        comb over it with a notched trowel.
      </div>
    </div>
  </div>
  <div itemprop="step" itemscope itemtype="https://schema.org/HowToStep">
    <link itemprop="url" href="https://example.com/example#step3" />
    <div itemprop="name">Add your tile to the wall</div>
    <img itemprop="image" alt="image grout application"
         src="https://example.com/photos/1x1/photo-step3.jpg"/>
    <div itemprop="itemListElement" itemscope itemtype="https://schema.org/HowToDirection">
      <div itemprop="text">Place the tile sheets along the wall, making sure to add spacers so the
        tiles remain lined up. Press the first piece of tile into the wall with a little twist,
        leaving a small (usually one-eight inch) gap at the countertop to account for expansion.
        use a rubber float to press the tile and ensure it sets in the adhesive. Repeat the mortar
        and tiling until your wall is completely tiled, working in small sections.
      </div>
    </div>
  </div>
  <div itemprop="step" itemscope itemtype="https://schema.org/HowToStep">
    <link itemprop="url" href="https://example.com/example#step4" />
    <div itemprop="name">Apply the grout</div>
    <img itemprop="image" alt="image grout application"
         src="https://example.com/photos/1x1/photo-step4.jpg"/>
    <div itemprop="itemListElement" itemscope itemtype="https://schema.org/HowToDirection">
      <div itemprop="text">Allow the thin-set mortar to set. This usually takes about 12 hours.
        Don't mix the grout before the mortar is set, because you don't want the grout to dry out!
        To apply, cover the area thoroughly with grout and make sure you fill all the joints by
        spreading it across the tiles vertically, horizontally, and diagonally. Then fill any
        remaining voids with grout.
      </div>
    </div>
    <div itemprop="itemListElement" itemscope itemtype="https://schema.org/HowToDirection">
      <div itemprop="text">Then, with a moist sponge, sponge away the excess grout and then wipe
        clean with a towel. For easier maintenance in the future, think about applying a grout
        sealer.
      </div>
    </div>
  </div>
</div>
</body>
</html>

ステップごとの画像を含む How-to リッチリザルト

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

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


<html>
  <head>
    <title>How to tie a tie</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "HowTo",
      "image": {
        "@type": "ImageObject",
        "url": "https://example.com/1x1/photo.jpg"
      },
      "name": "How to tie a tie",
      "totalTime": "PT2M",
      "video": {
        "@type": "VideoObject",
        "name": "Tie a Tie",
        "description": "How to tie a four-in-hand knot.",
        "thumbnailUrl": "https://example.com/photos/photo.jpg",
        "contentUrl": "https://www.example.com/videos/123_600x400.mp4",
        "embedUrl": "https://www.example.com/videoplayer?id=123",
        "uploadDate": "2019-01-05T08:00:00+08:00",
        "duration": "P1MT10S"
      },
      "supply": [
        {
          "@type": "HowToSupply",
          "name": "A tie"
        }, {
          "@type": "HowToSupply",
          "name": "A collared shirt"
        }
      ],
      "tool": [
        {
          "@type": "HowToTool",
          "name": "A mirror"
        }
      ],
      "step":[
        {
          "@type": "HowToStep",
          "name": "Preparations",
          "text": "Button your shirt how you'd like to wear it, then drape the tie around your neck. Make the thick end about 1/3rd longer than the short end. For formal button down shirts, it usually works best with the small end of the tie between 4th and 5th button.",
          "image": "https://example.com/1x1/step1.jpg",
          "url": "https://example.com/tie#step1"
        }, {
          "@type": "HowToStep",
          "name": "Crossing once",
          "text": "Cross the long end over the short end. This will form the basis for your knot.",
          "image": "https://example.com/1x1/step2.jpg",
          "url": "https://example.com/tie#step2"
        }, {
          "@type": "HowToStep",
          "name": "Second crossing",
          "text": "Bring the long end back under the short end, then throw it back over the top of the short end in the other direction.",
          "image": "https://example.com/1x1/step3.jpg",
          "url": "https://example.com/tie#step3"
        }, {
          "@type": "HowToStep",
          "name": "Loop in",
          "text": "Now pull the long end through the loop near your neck, forming another loop near your neck.",
          "image": "https://example.com/1x1/step4.jpg",
          "url": "https://example.com/tie#step4"
        }, {
          "@type": "HowToStep",
          "name": "Pull and tighten",
          "text": "Pull the long end through that new loop and tighten to fit!",
          "image": "https://example.com/1x1/step5.jpg",
          "url": "https://example.com/tie#step5"
        }
      ]
    }
    </script>
  </head>
  <body>
  </body>
</html>
Microdata

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


<html>
<head>
<title>How to tie a tie</title>
</head>
<body>
<div itemscope itemtype="https://schema.org/HowTo">
  <b><span itemprop="name">How to tie a tie</span></b>
  <div>About <span itemprop="totalTime" content="PT2M">2 minutes</span></div>
  <div itemprop="video" itemscope itemtype="https://schema.org/VideoObject">
    <meta itemprop="name" content="Tie a Tie" />
    <meta itemprop="description" content="How to tie a four-in-hand knot." />
    <link itemprop="thumbnailUrl" content="https://example.com/photos/photo.jpg" />
    <link itemprop="contentUrl" content="https://www.example.com/videos/123_600x400.mp4" />
    <link itemprop="embedUrl" content="https://www.example.com/videoplayer?id=123" />
    <meta itemprop="duration" content="P1MT10S" />
    <meta itemprop="uploadDate" content="2019-01-05T08:00:00+08:00" />
    <video>...</video>
  </div>
  <div>Necessary Items:</div>
  <div itemprop="supply" itemtype="https://schema.org/HowToSupply">A tie</div>
  <div itemprop="supply" itemtype="https://schema.org/HowToSupply">A collared Shirt</div>
  <div itemprop="tool" itemtype="https://schema.org/HowToTool">A mirror</div>
  <div>
    <div itemprop="step" itemscope itemtype="https://schema.org/HowToStep">
      <div itemprop="name">Preparations</div>
      <div itemprop="text">Button your shirt how you'd like to wear it, then drape the tie around your neck. Make the thick end about 1/3rd longer than the short end. For formal button down shirts, it usually works best with the small end of the tie between 4th and 5th button.</div>
      <div itemprop="image">https://example.com/1x1/photo1.jpg</div>
      <meta itemprop="url" content="https://example.com/tie#step1" />
    </div>

    <div itemprop="step" itemscope itemtype="https://schema.org/HowToStep">
      <div itemprop="name">Crossing once</div>
      <div itemprop="text">Cross the long end over the short end. This will form the basis for your knot.</div>
      <div itemprop="image">https://example.com/1x1/photo2.jpg</div>
      <meta itemprop="url" content="https://example.com/tie#step2" />
    </div>

    <div itemprop="step" itemscope itemtype="https://schema.org/HowToStep">
      <div itemprop="name">Second crossing</div>
      <div itemprop="text">Bring the long end back under the short end, then throw it back over the top of the short end in the other direction.</div>
      <div itemprop="image">https://example.com/1x1/photo3.jpg</div>
      <meta itemprop="url" content="https://example.com/tie#step3" />
    </div>

    <div itemprop="step" itemscope itemtype="https://schema.org/HowToStep">
      <div itemprop="name">Loop in</div>
      <div itemprop="text">Now pull the long end through the loop near your neck, forming another loop near your neck.</div>
      <div itemprop="image">https://example.com/1x1/photo4.jpg</div>
      <meta itemprop="url" content="https://example.com/tie#step4" />
    </div>

    <div itemprop="step" itemscope itemtype="https://schema.org/HowToStep">
      <div itemprop="name">Pull and tighten</div>
      <div itemprop="text">Pull the long end through that new loop and tighten to fit!</div>
      <div itemprop="image">https://example.com/1x1/photo5.jpg</div>
      <meta itemprop="url" content="https://example.com/tie#step5" />
    </div>
  </div>
</div>
</body>
</html>

動画を含む How-to リッチリザルト

JSON-LD

これは、テキスト、画像、動画クリップの組み合わせを含むハウツーページを、JSON-LD で記述した例です。この例には 1 件のハウツーの動画が含まれており、動画のステップが Clip 構造化データでマークアップされています。


<html>
  <head>
    <title>How to create a Trivia action</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "HowTo",
      "image": {
        "@type": "ImageObject",
        "url": "https://example.com/1x1/photo.jpg"
      },
      "name": "How to create a Trivia action",
      "totalTime": "PT2M",
      "video": {
        "@type": "VideoObject",
        "name": "Build a Trivia Game for the Google Assistant with No Code",
        "description": "Learn how to create a Trivia action for Assistant within minutes.",
        "thumbnailUrl": "https://example.com/photos/photo.jpg",
        "contentUrl": "https://www.youtube.com/watch?v=4AOI1tZrgMI",
        "embedUrl": "https://www.youtube.com/embed/4AOI1tZrgMI",
        "uploadDate": "2019-01-05T08:00:00+08:00",
        "duration": "P1MT10S",
        "hasPart": [
          {
            "@type": "Clip",
            "@id": "Clip1",
            "name": "Open Actions on Google Console",
            "startOffset": 29,
            "endOffset": 36,
            "url": "https://www.youtube.com/watch?v=4AOI1tZrgMI&amp;t=29"
          },
          {
            "@type": "Clip",
            "@id": "Clip2",
            "name": "Select Trivia Template",
            "startOffset": 36,
            "endOffset": 45,
            "url": "https://www.youtube.com/watch?v=4AOI1tZrgMI&amp;t=36"
          },
          {
            "@type": "Clip",
            "@id": "Clip3",
            "name": "Choose a Personality",
            "startOffset": 45,
            "endOffset": 65,
            "url": "https://www.youtube.com/watch?v=4AOI1tZrgMI&amp;t=45"
          },
          {
            "@type": "Clip",
            "@id": "Clip4",
            "name": "Feed your content",
            "startOffset": 65,
            "endOffset": 154,
            "url": "https://www.youtube.com/watch?v=4AOI1tZrgMI&amp;t=65"
          },
          {
            "@type": "Clip",
            "@id": "Clip5",
            "name": "Create the action",
            "startOffset": 154,
            "endOffset": 172,
            "url": "https://www.youtube.com/watch?v=4AOI1tZrgMI&amp;t=154"
          },
          {
            "@type": "Clip",
            "@id": "Clip6",
            "name": "Test your action",
            "startOffset": 172,
            "endOffset": 212,
            "url": "https://www.youtube.com/watch?v=4AOI1tZrgMI&amp;t=172"
          },
          {
            "@type": "Clip",
            "@id": "Clip7",
            "name": "Submit your action",
            "startOffset": 212,
            "endOffset": 285,
            "url": "https://www.youtube.com/watch?v=4AOI1tZrgMI&amp;t=212"
          }
        ]
      },
      "step": [
        {
          "@type": "HowToStep",
          "name": "Open Actions on Google Console",
          "text": "Navigate to https://console.actions.google.com to get started.",
          "image": "https://example.com/1x1/step1.jpg",
          "url": "https://example.com/tie#step1",
          "video": {
            "@id": "Clip1"
          }
        },
        {
          "@type": "HowToStep",
          "name": "Select Trivia Template",
          "text": "Create a new project and select Templates | You have a choice to select between Trivia, Flashcard or Personality Quiz.",
          "image": "https://example.com/1x1/step2.jpg",
          "url": "https://example.com/tie#step2",
          "video": {
            "@id": "Clip2"
          }
        },
        {
          "@type": "HowToStep",
          "name": "Choose a Personality",
          "text": "Select one of the three personalities- Mr, Montgomery, Regal Queen, or the Trivia Bot.",
          "image": "https://example.com/1x1/step3.jpg",
          "url": "https://example.com/tie#step3",
          "video": {
            "@id": "Clip3"
          }
        },
        {
          "@type": "HowToStep",
          "name": "Feed your content",
          "itemListElement": [
            {
              "@type": "HowToDirection",
              "text": "Make a copy of our pre-filled sheet and replace with your content."
            },
            {
              "@type": "HowToDirection",
              "text": "Ensure you make the sheet publicly accessible. Copy the URL of the sheet and paste it into the Console."
            }
          ],
          "image": "https://example.com/1x1/step4.jpg",
          "url": "https://example.com/tie#step4",
          "video": {
            "@id": "Clip4"
          }
        },
        {
          "@type": "HowToStep",
          "name": "Create the action",
          "text": "Create the action. Once content is successfully uploaded, it will take couple of minutes to create the action.",
          "image": "https://example.com/1x1/step5.jpg",
          "url": "https://example.com/tie#step5",
          "video": {
            "@id": "Clip5"
          }
        },
        {
          "@type": "HowToStep",
          "name": "Test your action",
          "text": "Navigate to the Simulator to test your action and simulate various surfaces, locations and locales.",
          "image": "https://example.com/1x1/step6.jpg",
          "url": "https://example.com/tie#step6",
          "video": {
            "@id": "Clip6"
          }
        },
        {
          "@type": "HowToStep",
          "name": "Submit your action",
          "text": "Once you complete directory information and invocation names, submit your action for all Assistant users to see and use your action.",
          "image": "https://example.com/1x1/step7.jpg",
          "url": "https://example.com/tie#step7",
          "video": {
            "@id": "Clip7"
          }
        }
      ]
    }
    </script>
  </head>
  <body>
  </body>
</html>
Microdata

これは、テキスト、画像、動画クリップの組み合わせを含むハウツーページを、microdata で記述した例です。この例には 1 件のハウツーの動画が含まれており、動画のステップが Clip 構造化データでマークアップされています。


<html>
<head>
<title>How to create a Trivia action</title>
</head>
<body>
<div itemscope itemtype="https://schema.org/HowTo">
  <b><span itemprop="name">How to create a Trivia action</span></b>
  <div>About <span itemprop="totalTime" content="PT2M">2 minutes</span></div>
  <div itemprop="video" itemscope itemtype="https://schema.org/VideoObject">
    <meta itemprop="name" content="Tie a Tie" />
    <meta itemprop="description" content="How to tie a four-in-hand knot." />
    <link itemprop="thumbnailUrl" content="https://example.com/photos/photo.jpg" />
    <link itemprop="contentUrl" content="https://www.example.com/videos/123_600x400.mp4" />
    <link itemprop="embedUrl" content="https://www.example.com/videoplayer?id=123" />
    <meta itemprop="duration" content="P1MT10S" />
    <meta itemprop="uploadDate" content="2019-01-05T08:00:00+08:00" />
    <div>
      <div itemprop="hasPart" itemscope itemtype="https://schema.org/Clip" itemid="Clip1">
        <div itemprop="name">Open Actions on Google Console</div>
        <div itemprop="startOffset">29</div>
        <div itemprop="endOffset">36</div>
        <div itemprop="url">https://www.youtube.com/watch?v=4AOI1tZrgMI&amp;t=29</div>
      </div>
      <div itemprop="hasPart" itemscope itemtype="https://schema.org/Clip" itemid="Clip2">
        <div itemprop="name">Select Trivia Template</div>
        <div itemprop="startOffset">36</div>
        <div itemprop="endOffset">45</div>
        <div itemprop="url">https://www.youtube.com/watch?v=4AOI1tZrgMI&amp;t=36</div>
      </div>
      <div itemprop="hasPart" itemscope itemtype="https://schema.org/Clip" itemid="Clip3">
        <div itemprop="name">Choose a Personality</div>
        <div itemprop="startOffset">45</div>
        <div itemprop="endOffset">65</div>
        <div itemprop="url">https://www.youtube.com/watch?v=4AOI1tZrgMI&amp;t=45</div>
      </div>
      <div itemprop="hasPart" itemscope itemtype="https://schema.org/Clip" itemid="Clip4">
        <div itemprop="name">Feed your content</div>
        <div itemprop="startOffset">65</div>
        <div itemprop="endOffset">154</div>
        <div itemprop="url">https://www.youtube.com/watch?v=4AOI1tZrgMI&amp;t=65</div>
      </div>
      <div itemprop="hasPart" itemscope itemtype="https://schema.org/Clip" itemid="Clip5">
        <div itemprop="name">Create the action</div>
        <div itemprop="startOffset">154</div>
        <div itemprop="endOffset">172</div>
        <div itemprop="url">https://www.youtube.com/watch?v=4AOI1tZrgMI&amp;t=154</div>
      </div>
      <div itemprop="hasPart" itemscope itemtype="https://schema.org/Clip" itemid="Clip6">
        <div itemprop="name">Test your action</div>
        <div itemprop="startOffset">172</div>
        <div itemprop="endOffset">212</div>
        <div itemprop="url">https://www.youtube.com/watch?v=4AOI1tZrgMI&amp;t=172</div>
      </div>
      <div itemprop="hasPart" itemscope itemtype="https://schema.org/Clip" itemid="Clip7">
        <div itemprop="name">Submit your action</div>
        <div itemprop="startOffset">212</div>
        <div itemprop="endOffset">285</div>
        <div itemprop="url">https://www.youtube.com/watch?v=4AOI1tZrgMI&amp;t=212</div>
      </div>
    </div>
    <video>...</video>
  </div>
  <div itemprop="step" itemscope itemtype="https://schema.org/HowToStep">
    <div itemprop="name">Open Actions on Google Console</div>
    <div itemprop="text">Navigate to https://console.actions.google.com to get started.</div>
    <div itemprop="image">https://example.com/1x1/photo1.jpg</div>
    <meta itemprop="url" content="https://example.com/tie#step1" />
    <link itemprop="video" href="Clip1" />
  </div>
  <div itemprop="step" itemscope itemtype="https://schema.org/HowToStep">
    <div itemprop="name">Select Trivia Template</div>
    <div itemprop="text">Create a new project and select Templates | You have a choice to select between Trivia, Flashcard or Personality Quiz.</div>
    <div itemprop="image">https://example.com/1x1/photo2.jpg</div>
    <meta itemprop="url" content="https://example.com/tie#step2" />
    <link itemprop="video" href="Clip2" />
  </div>
  <div itemprop="step" itemscope itemtype="https://schema.org/HowToStep">
    <div itemprop="name">Choose a Personality</div>
    <div itemprop="text">Select one of the three personalities- Mr, Montgomery, Regal Queen, or the Trivia Bot.</div>
    <div itemprop="image">https://example.com/1x1/photo3.jpg</div>
    <meta itemprop="url" content="https://example.com/tie#step3" />
    <link itemprop="video" href="Clip3" />
  </div>
  <div itemprop="step" itemscope itemtype="https://schema.org/HowToStep">
    <div itemprop="name">Feed your content</div>
    <div itemprop="itemListElement" itemscope itemtype="https://schema.org/HowToDirection">
      <div itemprop="text">Make a copy of our pre-filled sheet and replace with your content.</div>
    </div>
    <div itemprop="itemListElement" itemscope itemtype="https://schema.org/HowToDirection">
      <div itemprop="text">Ensure you make the sheet publicly accessible. Copy the URL of the sheet and paste it into the Console.</div>
    </div>
    <div itemprop="image">https://example.com/1x1/photo4.jpg</div>
    <meta itemprop="url" content="https://example.com/tie#step4" />
    <link itemprop="video" href="Clip4" />
  </div>
  <div itemprop="step" itemscope itemtype="https://schema.org/HowToStep">
    <div itemprop="name">Create the action</div>
    <div itemprop="text">Create the action. Once content is successfully uploaded, it will take couple of minutes to create the action.</div>
    <div itemprop="image">https://example.com/1x1/photo5.jpg</div>
    <meta itemprop="url" content="https://example.com/tie#step5" />
    <link itemprop="video" href="Clip5" />
  </div>
  <div itemprop="step" itemscope itemtype="https://schema.org/HowToStep">
    <div itemprop="name">Test your action</div>
    <div itemprop="text">PNavigate to the Simulator to test your action and simulate various surfaces, locations and locales.</div>
    <div itemprop="image">https://example.com/1x1/photo6.jpg</div>
    <meta itemprop="url" content="https://example.com/tie#step6" />
    <link itemprop="video" href="Clip6" />
  </div>
  <div itemprop="step" itemscope itemtype="https://schema.org/HowToStep">
    <div itemprop="name">Submit your action</div>
    <div itemprop="text">Once you complete directory information and invocation names, submit your action for all Assistant users to see and use your action.</div>
    <div itemprop="image">https://example.com/1x1/photo7.jpg</div>
    <meta itemprop="url" content="https://example.com/tie#step7" />
    <link itemprop="video" href="Clip7" />
  </div>
</div>
</body>
</html>

ガイドライン

ページをハウツーのリッチリザルトに表示したり、Google アシスタントのハウツー アクションで対応したりできるようにするには、以下のガイドラインに従ってください。

コンテンツ ガイドライン

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

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

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

HowTo

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

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

Google がサポートするプロパティは、次のとおりです。

必須プロパティ
name

Text

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

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

  • 各 HowToStep の text を設定することで、各ステップに対するすべてのテキストを指定できます。image、name（手順タイトルを指定）、url は省略可能ですが、オプションのプロパティによって検索結果をリッチ形式で表現できるため、使用することを推奨します。 
    
"step":[
  {
    "@type": "HowToStep",
    "text": "Button your shirt how you'd like to wear it, then drape the tie around your neck. Make the thick end about 1/3rd longer than the short end. For formal button down shirts, it usually works best with the small end of the tie between 4th and 5th button.",
    "image": "https://example.com/1x1/photo.jpg"
  }, {
    "@type": "HowToStep",
    "text": "Cross the long end over the short end. This will form the basis for your knot.",
    "image": "https://example.com/1x1/photo.jpg"
  }, {
    "@type": "HowToStep",
    "text": "Bring the long end back under the short end, then throw it back over the top of the short end in the other direction. ",
    "image": "https://example.com/1x1/photo.jpg"
  }, {
    "@type": "HowToStep",
    "text": "Now pull the long and through the loop near your neck, forming another loop near your neck.",
    "image": "https://example.com/1x1/photo.jpg"
  }, {
    "@type": "HowToStep",
    "text": "Pull the long end through that new loop and tighten to fit! ",
    "image": "https://example.com/1x1/photo.jpg"
  }
]
  • 複雑なステップの場合は、1 つのステップに name を設定し、HowToDirection や HowToTip を使用して個々のサブステップをリストできます。 
    
"step": [
  {
    "@type": "HowToStep",
    "name": "Prepare the surfaces",
    "itemListElement": [{
      "@type": "HowToDirection",
      "text": "First please turn off the power to the kitchen and then remove everything that is on the wall, such as outlet covers, switchplates, and any other item in the area that is to be tiled."
    }, {
      "@type": "HowToDirection",
      "text": "Then clean the surface thoroughly to remove any grease or other debris and tape off the area."
    }],
    "image": {
      "@type": "ImageObject",
      "url": "https://example.com/photos/1x1/photo.jpg",
      "height": "406",
      "width": "305"
    }
  }, {
    "@type": "HowToStep",
    "name": "Plan your layout",
    "itemListElement": [{
      "@type": "HowToTip",
      "text": "The creases created up until this point will be guiding lines for creating the four walls of your planter box."
    }, {
      "@type": "HowToDirection",
      "text": "Lift one side at a 90-degree angle, and fold it in place so that the point on the paper matches the other two points already in the center."
    }, {
      "@type": "HowToDirection",
      "text": "Repeat on the other side."
    }],
    "image": {
      "@type": "ImageObject",
      "url": "https://example.com/photos/1x1/photo.jpg",
      "height": "406",
      "width": "305"
    }
  }, {
    "@type": "HowToStep",
    "name": "Prepare your and apply mortar (or choose adhesive tile)",
    "itemListElement": [{
      "@type": "HowToDirection",
      "text": "Follow the instructions on your thin-set mortar to determine the right amount of water to fill in your bucket. Once done, add the powder gradually and make sure it is thoroughly mixed."
    }, {
      "@type": "HowToDirection",
      "text": "Once mixed, let it stand for a few minutes before mixing it again. This time don't add more water. Double check your thin-set mortar instructions to make sure the consistency is right."
    }, {
      "@type": "HowToDirection",
      "text": "Spread the mortar on a small section of the wall with a trowel."
    }, {
      "@type": "HowToTip",
      "text": "Thinset and other adhesives set quickly so make sure to work in a small area."
    }, {
      "@type": "HowToDirection",
      "text": "Once it's applied, comb over it with a notched trowel."
    }],
    "image": {
      "@type": "ImageObject",
      "url": "https://example.com/photos/1x1/photo.jpg",
      "height": "406",
      "width": "305"
    }
  }, {
    "@type": "HowToStep",
    "name": "Add your tile to the wall",
    "itemListElement": [{
      "@type": "HowToDirection",
      "text": "Place the tile sheets along the wall, making sure to add spacers so the tiles remain lined up."
    }, {
      "@type": "HowToDirection",
      "text": "Press the first piece of tile into the wall with a little twist, leaving a small (usually one-eight inch) gap at the countertop to account for expansion. use a rubber float to press the tile and ensure it sets in the adhesive."
    }, {
      "@type": "HowToDirection",
      "text": "Repeat the mortar and tiling until your wall is completely tiled, Working in small sections."
    }],
    "image": {
      "@type": "ImageObject",
      "url": "https://example.com/photos/1x1/photo.jpg",
      "height": "406",
      "width": "305"
    }
  }, {
    "@type": "HowToStep",
    "name": "Apply the grout",
    "itemListElement": [{
      "@type": "HowToDirection",
      "text": "Allow the thin-set mortar to set. This usually takes about 12 hours. Don't mix the grout before the mortar is set, because you don't want the grout to dry out!"
    }, {
      "@type": "HowToDirection",
      "text": "To apply, cover the area thoroughly with grout and make sure you fill all the joints by spreading it across the tiles vertically, horizontally, and diagonally. Then fill any remaining voids with grout."
    }, {
      "@type": "HowToDirection",
      "text": "Then, with a moist sponge, sponge away the excess grout and then wipe clean with a towel. For easier maintenance in the future, think about applying a grout sealer."
    }],
    "image": {
      "@type": "ImageObject",
      "url": "https://example.com/photos/1x1/photo.jpg",
      "height": "406",
      "width": "305"
    }
  }
]

この HowTo の手順全体を構成する HowToSection 要素の配列。次に例を示します。 


"step":[
  {
    "@type": "HowToSection",
    "name": "Choose a Tie",
    "itemListElement": [
      {
        "@type": "HowToStep",
        "name": "Choose a color",
        "text": "Pick a tie that matches your shirt color. Contrasting colors can be fun!"
      },
      {
        "@type": "HowToStep",
        "name": "Choose a pattern",
        "text": "A tie with a pattern can add flare to your outfit. Make sure the pattern is not
                 too noisy against your shirt"
      }
    ]
  },
  {
    "@type": "HowToSection",
    "name": "Put on the Tie",
    "itemListElement": [
      {
        "@type": "HowToStep",
        "name": "Arrange the Tie",
        "text": "Stand in front of the mirror with the tie around your neck."
      },
      {
        "@type": "HowToStep",
        "name": "Tie the Tie",
        "text": "Use your hands to tie the tie into a neat knot around your neck. Looking sharp!"
      }
    ]
  }
]
推奨プロパティ
estimatedCost MonetaryAmount または Text

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

image ImageObject または URL

ハウツーの完了時の画像。

画像に関するその他のガイドライン:

  • すべてのページに画像を少なくとも 1 つ含める必要があります。Google は、アスペクト比と解像度に基づいて、検索結果に表示する最適な画像を選択します。
  • 画像の URL は、クロールやインデックス登録に対応できる必要があります。ページに Google がアクセスできるかどうかは、URL 検査ツールで確認できます。
  • 画像はマークアップされたコンテンツを表している必要があります。
  • 画像は、Google 画像検索でサポートされているファイル形式である必要があります。
supply HowToSupply または Text

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

tool HowToTool または Text

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

totalTime Duration

手順または指示をすべて実施するのに必要な時間（原材料を用意する時間も含む）。ISO 8601 時間形式で指定します。

video VideoObject

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


{
  "@context": "https://schema.org",
  "@type": "HowTo",
  "video": {
    "@type": "VideoObject",
    "name": "Build a Trivia Game for the Google Assistant with No Code",
    "description": "Learn how to create a Trivia action for Assistant within minutes.",
    "thumbnailUrl": "https://example.com/photos/photo.jpg",
    "contentUrl": "https://www.youtube.com/watch?v=4AOI1tZrgMI",
    "embedUrl": "https://www.youtube.com/embed/4AOI1tZrgMI",
    "uploadDate": "2019-01-05T08:00:00+08:00",
    "duration": "P1MT10S",
    "hasPart": [
      {
        "@type": "Clip",
        "@id": "Clip1",
        "name": "Open Actions on Google Console",
        "startOffset": 29,
        "endOffset": 36,
        "url": "https://www.youtube.com/watch?v=4AOI1tZrgMI?t=29"
      },
      {
        "@type": "Clip",
        "@id": "Clip2",
        "name": "Select Trivia Template",
        "startOffset": 36,
        "endOffset": 45,
        "url": "https://www.youtube.com/watch?v=4AOI1tZrgMI?t=36"
      }
    ]
  }
}
video.hasPart

Clip

動画全体から一部を抽出した動画クリップ。

video.hasPart.endOffset

Number

動画の先頭からの秒数で表したクリップの終了時間。

video.hasPart.name

Text

クリップの名前。たとえば、紐の結び方と解き方を示すクリップの名前を「結び方と解き方」とします。

video.hasPart.startOffset

Number

動画の先頭からの秒数で表したクリップの開始時間。

video.hasPart.url

URL

クリップの開始時間へのリンク。開始時間は video.hasPart.startOffset に設定されている値と一致する必要があります。次に例を示します。 


"startOffset": 30,
"endOffset": 45,
"url": "https://www.youtube.com/watch?v=4AOI1tZrgMI&t=30"

HowToSection

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

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

Google がサポートするプロパティは、次のとおりです。

必須プロパティ
itemListElement HowToStep

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

セクションの名前。

HowToStep

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

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

Google がサポートするプロパティは、次のとおりです。

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

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

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

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

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

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

    非推奨例:

    
{
  "@type": "HowToStep",
  "text": "Step 1. Drape the tie around your neck."
}

    推奨例:

    
{
  "@type": "HowToStep",
  "text": "Drape the tie around your neck."
}
推奨プロパティ
image ImageObject または URL

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

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

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

url URL

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

video VideoObject または Clip

ハウツーの 1 ステップを説明するビデオ、またはハウツー全体を扱う 1 つの動画から一部を抽出したクリップ。

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

以下に VideoObject を使用した例を示します。


{
  "@type": "HowToStep",
  "video": {
    "name": "Drape the tie",
    "description": "Drape the tie.",
    "thumbnailUrl": "https://example.com/photos/photo.jpg",
    "contentUrl": "https://www.example.com/videos/123_600x400.mp4",
    "embedUrl": "https://www.example.com/videoplayer?id=123",
    "uploadDate": "2019-01-05T08:00:00+08:00",
    "duration": "PT12S"
  }
}

以下に Clip を使用した例を示します。


{
  "@context": "https://schema.org",
  "@type": "HowTo",
  "name": "Build a Trivia Game for the Google Assistant with No Code",
  "video": {
    "@type": "VideoObject",
    "name": "Build a Trivia Game for the Google Assistant with No Code",
    "description": "Learn how to create a Trivia action for Assistant within minutes.",
    "thumbnailUrl": "https://example.com/photos/photo.jpg",
    "contentUrl": "https://www.youtube.com/watch?v=4AOI1tZrgMI",
    "embedUrl": "https://www.youtube.com/embed/4AOI1tZrgMI",
    "uploadDate": "2019-01-05T08:00:00+08:00",
    "duration": "P1MT10S",
    "hasPart": [
      {
        "@type": "Clip",
        "@id": "Clip1",
        "name": "Open Actions on Google Console",
        "startOffset": 29,
        "endOffset": 36,
        "url": "https://www.youtube.com/watch?v=4AOI1tZrgMI?t=29"
      },
      {
        "@type": "Clip",
        "@id": "Clip2",
        "name": "Select Trivia Template",
        "startOffset": 36,
        "endOffset": 45,
        "url": "https://www.youtube.com/watch?v=4AOI1tZrgMI?t=36"
      }
    ]
  },
  "step": [
    {
      "@type": "HowToStep",
      "name": "Open Actions on Google Console",
      "video": { "@id": "Clip1" }
    },
    {
      "@type": "HowToStep",
      "name": "Select Trivia Template",
      "video": { "@id": "Clip2" }
    }
  ]
}

HowToSupply、HowToTool

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

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

必須プロパティ
name Text

材料または道具の名前。

HowToDirection、HowToTip

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

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

必須プロパティ
text Text

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

Search Console でリッチリザルトを監視する

Search Console は、Google 検索におけるページのパフォーマンスを監視できるツールです。Search Console に登録していなくても Google 検索結果に表示されますが、登録することにより、Google がサイトをどのように認識しているかを把握して改善できるようになります。次の場合は Search Console を確認することをおすすめします。

  1. 構造化データを初めてデプロイした後
  2. 新しいテンプレートをリリースした後やコードを更新した後
  3. トラフィックを定期的に分析する場合

構造化データを初めてデプロイした後

ページがインデックスに登録されたら、関連するリッチリザルトのステータス レポートを使用して、問題がないかどうかを確認します。有効な項目が増え、無効な項目が増えていない状態が理想的です。構造化データに問題が見つかった場合の手順は次のとおりです。

  1. 無効な項目を修正します。
  2. 一般公開 URL の検査を行い、問題が解決したかどうかを確認します。
  3. ステータス レポートを使用して検証をリクエストします。

新しいテンプレートをリリースした後やコードを更新した後

ウェブサイトに大幅な変更を加えた場合は、構造化データの無効な項目が増加しないかどうか監視します。
  • 無効な項目が増加した場合は、新しく公開したテンプレートが正常に機能していないか、既存のテンプレートの新しい操作方法に問題があると考えられます。
  • 有効な項目が減少している（無効な項目の増加と一致しない）場合は、ページに構造化データが埋め込まれていない可能性があります。URL 検査ツールを使用して問題の原因を特定します。

トラフィックを定期的に分析する場合

パフォーマンス レポートを使用して Google 検索のトラフィックを分析します。このデータから、検索でページがリッチリザルトとして表示される頻度、ユーザーがページをクリックする頻度、検索結果におけるページの平均掲載順位がわかります。この結果は、Search Console API を使用して自動的に取得することもできます。

トラブルシューティング

構造化データの実装またはデバッグで問題が発生した場合は、以下のリソースが参考になります。