MENU
はっち
30代の2児のパパ。上場企業のWebマーケティング部署にて累計1,000以上のSEO施策を実行。SEO対策のセカンドオピニオンとして、躍動中。伴走型のコンサルも並行しています。

Howto(ハウツー)の構造化データでWebサイト構造を伝達!概要と実装方法

Howto(ハウツー)の構造化データでWebサイト構造を伝達!概要と実装方法

Howto(ハウツー)構造化は、構造化する内容が手順やステップを表すもので、段階を踏んで次の状態・内容へいく取扱声明書のようなものです!

レシピや作り方といった内容はテキストや見出しだけでなく、構造化データとして構築することで、Googleにより理解してもらいやすくなります。ただし、後述するように動画のほうが分かりやすいとGoogleが判断すれば検索結果上では動画が優先的に表示されます。

まずは概要を知った上で、実装していきましょう。

書いてあること

Howto(ハウツー)構造化データとは

Howto(ハウツー)とは、あるタスクを正しく完了するための一連のステップを、順を追ってユーザーに説明するもので、動画・画像・テキストを組み合わせながら表現します。


検索結果では、横スライドで表示されることがあります。

しかし、近年では表示内容を読むより目と耳で理解しやすい「動画」のほうが検索結果で表示されることが多いです。

2023年では動画のほうが表示されやすい

コンバージョンまでの距離が近いキーワード、かつ、ステップや作り方をメインに紹介する場合は、Howto構造化よりもYoutubeやその他動画での訴求が効果的かもしれません。

全ての構造化データに共通して言えることですが、記述方法は主に3つあります。

  1. JSON-LD (Googleが推奨)
  2. microdata
  3. RDFa

なお、当サイトにおける構造化データは、Googleが推奨している「JSON-LD」を紹介します。

Howto(ハウツー)構造化データの記述方法

Howto(ハウツー)は性質上、複数のパターンに分かれます。

ステップごとの画像を含む場合

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "HowTo",
  "image": {
    "@type": "ImageObject",
    "url": "ココにイメージ画像URLを設置する"
  },
  "name": "Howto(ハウツー)名を入力する 例:◯◯の作り方",
  "totalTime": "ココに手順を完遂するまでのそう時間を記載。※手順または指示をすべて実施するのに必要な時間(原材料を用意する時間も含む)。ISO 8601 時間形式で指定する必要があります※",
  "video": {
    "@type": "VideoObject",
    "name": "動画があれば動画のタイトルを記載する",
    "description": "動画の概要・要約を記載する。",
    "thumbnailUrl": "イメージとなる画像URLを記載する",
    "contentUrl": "ココに動画URLを設置する",
    "embedUrl": "https://www.example.com/videoplayer?id=123",
    "uploadDate": "アップロードした時刻を記載する",
    "duration": "手順または指示をすべて実施するのに必要な時間(原材料を用意する時間も含む)を記載する。ISO 8601 時間形式で指定します。"
  },
  "supply": [
    {
      "@type": "HowToSupply",
      "name": "材料があれば記載する"
    }, {
      "@type": "HowToSupply",
      "name": "材料があれば記載する"
    }
  ],
  "tool": [
    {
      "@type": "HowToTool",
      "name": "使用するツール・道具があれば記載する"
    }
  ],
  "step":[
    {
      "@type": "HowToStep",
      "name": "ステップを要約した単語または短いフレーズを記載する。(例:ネット環境に繋がっているか確認する)",
      "text": "詳しい説明文を記載する",
      "image": "対象となるメイン画像のURLを記載する",
      "url": "該当箇所のURLを記載する。(例:https://testtest.com/#step1)"
    }, {
      "@type": "HowToStep",
      "name": "ステップを要約した単語または短いフレーズを記載する。(例:パソコンの電源を入れる)",
      "text": "詳しい説明文を記載する",
      "image": "対象となるメイン画像のURLを記載する",
      "url": "該当箇所のURLを記載する。(例:https://testtest.com/#step2)"
    }, {
      "@type": "HowToStep",
      "name": "ステップを要約した単語または短いフレーズを記載する。(例:検索ブラウザを立ち上げてキーワード入力する)",
      "text": "詳しい説明文を記載する",
      "image": "対象となるメイン画像のURLを記載する",
      "url": "該当箇所のURLを記載する。(例:https://testtest.com/#step3)"
    }, {
      "@type": "HowToStep",
      "name": "ステップを要約した単語または短いフレーズを記載する。(例:検索結果が表示されたら気になるタイトルをクリックする)",
      "text": "詳しい説明文を記載する",
      "image": "対象となるメイン画像のURLを記載する",
      "url": "該当箇所のURLを記載する。(例:https://testtest.com/#step4)"
    }
  ]
}
</script>

動画を含む場合

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "HowTo",
  "image": {
    "@type": "ImageObject",
    "url": "ココにイメージ画像URLを設置する"
  },
  "name": "Howto(ハウツー)名を入力する 例:◯◯の作り方",
  "totalTime": "ココに手順を完遂するまでのそう時間を記載。※手順または指示をすべて実施するのに必要な時間(原材料を用意する時間も含む)。ISO 8601 時間形式で指定する必要があります※",
  "video": {
    "@type": "VideoObject",
    "name": "動画があれば動画のタイトルを記載する",
    "description": "動画の概要・要約を記載する。",
    "thumbnailUrl": "イメージとなる画像URLを記載する",
    "contentUrl": "ココに動画URLを設置する",
    "embedUrl": "https://www.example.com/videoplayer?id=123",
    "uploadDate": "アップロードした時刻を記載する",
    "duration": "手順または指示をすべて実施するのに必要な時間(原材料を用意する時間も含む)を記載する。ISO 8601 時間形式で指定します。",
    "hasPart": [
      {
        "@type": "Clip",
        "@id": "Clip1",
        "name": "ステップを要約した単語または短いフレーズを記載する。(例:ネット環境に繋がっているか確認する)",
        "startOffset": 動画の先頭からの秒数で表したクリップの開始時間。(例:29),
        "endOffset": 動画の先頭からの秒数で表したクリップの終了時間時間。(例:36),
        "url": "動画で表す開始時間(例:https://www.youtube.com/watch?v=XXXXXXXXX;t=29"
      },
      {
        "@type": "Clip",
        "@id": "Clip2",
        "name": "ステップを要約した単語または短いフレーズを記載する。(例:パソコンの電源を入れる)",
        "startOffset": 動画の先頭からの秒数で表したクリップの開始時間。(例:36),
        "endOffset": 動画の先頭からの秒数で表したクリップの終了時間時間。(例:45),
        "url": "動画で表す開始時間(例:https://www.youtube.com/watch?v=XXXXXXXXX;t=36"
      },
      {
        "@type": "Clip",
        "@id": "Clip3",
        "name": "ステップを要約した単語または短いフレーズを記載する。(例:検索ブラウザを立ち上げてキーワード入力する)",
        "startOffset": 動画の先頭からの秒数で表したクリップの開始時間。(例:45),
        "endOffset": 動画の先頭からの秒数で表したクリップの終了時間時間。(例:65),
        "url": "動画で表す開始時間(例:https://www.youtube.com/watch?v=XXXXXXXXX;t=45"
      },
      {
        "@type": "Clip",
        "@id": "Clip4",
        "name": "ステップを要約した単語または短いフレーズを記載する。(例:検索結果が表示されたら気になるタイトルをクリックする)",
        "startOffset": 動画の先頭からの秒数で表したクリップの開始時間。(例:65),
        "endOffset": 動画の先頭からの秒数で表したクリップの終了時間時間。(例:135),
        "url": "動画で表す開始時間(例:https://www.youtube.com/watch?v=XXXXXXXXX;t=65"
      }
    ]
  },
  "step":[
    {
      "@type": "HowToStep",
      "name": "ステップを要約した単語または短いフレーズを記載する。(例:ネット環境に繋がっているか確認する)",
      "text": "詳しい説明文を記載する",
      "image": "対象となるメイン画像のURLを記載する",
      "url": "該当箇所のURLを記載する。(例:https://testtest.com/#step1)"
    }, {
      "@type": "HowToStep",
      "name": "ステップを要約した単語または短いフレーズを記載する。(例:パソコンの電源を入れる)",
      "text": "詳しい説明文を記載する",
      "image": "対象となるメイン画像のURLを記載する",
      "url": "該当箇所のURLを記載する。(例:https://testtest.com/#step2)"
    }, {
      "@type": "HowToStep",
      "name": "ステップを要約した単語または短いフレーズを記載する。(例:検索ブラウザを立ち上げてキーワード入力する)",
      "text": "詳しい説明文を記載する",
      "image": "対象となるメイン画像のURLを記載する",
      "url": "該当箇所のURLを記載する。(例:https://testtest.com/#step3)"
    }, {
      "@type": "HowToStep",
      "name": "ステップを要約した単語または短いフレーズを記載する。(例:検索結果が表示されたら気になるタイトルをクリックする)",
      "text": "詳しい説明文を記載する",
      "image": "対象となるメイン画像のURLを記載する",
      "url": "該当箇所のURLを記載する。(例:https://testtest.com/#step4)"
    }
  ]
}
</script>

準備ができたらコードが正しく反映されるか確認する

例文をもとにHowto(ハウツー)構造化が正しく読み込まれるか、Schema-orgでテスト確認します。

schemaorgで構造化チェック

schema-orgでテストする

「コードスニペット」をクリックし、

shemaorgのコードスニペットをクリック

「コード貼り付け」欄にコピペして「テストを実行」をクリック。

成功すると、下記のように「Howto(ハウツー)」の構造化が表示されます。

Howto構造化が正しく表示されるか確認
Howto構造化が正しく表示されるか確認

表示速度改善のため、おすすめの設置場所は、</body>の直前です。(※JSON-LDの場合)

よかったらシェアしてね!
  • URLをコピーしました!
書いてあること