構造化データとは

appleのmacbookについて説明したいけど、、

appleのmacbookの情報をWebページで紹介しようとした時、人間の目ではりんごとmacbookの区別がつきますが、
検索エンジンが理解する言語は人と異なるため、別途説明がないと、りんごに関する情報のWebページだと認識するかもしれません。

もちろんmetadata等に明確に情報が明記されていれば、検索エンジンもコンテンツの内容を把握してくれると思いますが、
そうではない場合は意図したように認識してくるない可能性があります。

ページ名	説明したい内容
appleMacbook.html
apple.html

検索結果にもっと情報を入れ込むことができるんだったら？

"タコ焼き作り方"とgoogle検索すると下のようにタコ焼きの写真、レシピ、かかる時間まで色んな情報が出力されます。

構造化データとは、ページに関する情報を提供し、そのコンテンツ（たとえば、レシピページの場合は材料、加熱時間と加熱温度、カロリーなど）を分類するために標準化されたデータ形式です。

コンテンツに構造化データを付与する場合、上のタコ焼きの作り方のような豊富な検索結果を提供することができ、これは検索をするユーザーが該当Webページを選択する可能性が高まります。

構造化データはどう作成するのか。

schema.org

2011年6月2日にgoogle,bing,yahoo等、当時世界最大検索エンジンの運営陣が集まり、Webページで構造化データのためのschema.orgを発表します。
Schema.orgはWebページの情報を構造化し、検索エンジンがもっと正確に分析することができるようにしたものです。

構造化データの作成のための形式

schema.orgを活用して、構造化データを付与するのにはMicrodata、RDFa、JSON-LDの３つの言語形式があります。
googleの場合はJSON-LDを推奨しています。

ページのheadや本文のタグ内に入れ込むJS表記です。

<html>
  <head>
    <title>Party Coffee Cake</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "Recipe",
      "name": "Party Coffee Cake",
      "author": {
        "@type": "Person",
        "name": "Mary Stone"
      },
      "datePublished": "2018-03-10",
      "description": "This coffee cake is awesome and perfect for parties.",
      "prepTime": "PT20M"
    }
    </script>
  </head>
  <body>
    <h2>Party coffee cake recipe</h2>
    <p>
      <i>by Mary Stone, 2018-03-10</i>
    </p>
    <p>
      This coffee cake is awesome and perfect for parties.
    </p>
    <p>
      Preparation time: 20 minutes
    </p>
  </body>
</html>

レシピサイトでの構造化データ使用例

cookpadさんのタコ焼きレシピのheadタグを見ますと、ガッツリJSON-LD形式でレシピ情報が書いていいることが分かります。

そしたら簡単にcookpadさんのようにレシピサイトを運営すると仮定し、構造化データの作成方法について調べてみましょう。

1.schema.orgに飛びます。
2.検索欄でrecipeを検索します。

構造化データ作成のためにはtypeとpropertyの値を定義します。ここではrecipeがtypeです。
typeはPerson,Product,Organization等色々ありますので、作成しようとしているWebページの特性に合わせて指定してあげればいいです。　

3.下のようにproperty別に説明がありますので、参考して、作成を行います。

<script type="application/ld+json">   
{
    "@context": "http://schema.org/",   //コンテキスト(必須)
    "@type": "Recipe",                  //type : ページの特性に合わせて      
    "name(property)": "タコ焼き！", //ページタイトル 
    "image(property)": [
        "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2350392/0dc1436f-1dc4-0765-9eba-4e5c25935cf4.png",  //ページで使用したイメージ
    ],
    "author(property)": {  //登録者情報 , 一つのpropertyの内には別のtypeが入れる。
        "@type": "Person", //propertyに含まれたtype
        "name(property)": "worldwidepark"  //登録者
    },
    "datePublished(property)": "2022-11-28T23:52:01+09:00", //登録日にち
    "description(property)": "おいしいタコ焼きの作り方です！", //詳細説明
        "aggregateRating": {
        "@type": "AggregateRating", //Rating種類
        "ratingValue(property)": "5",   //評価点数
        "reviewCount(property)": "16"  //レビュー数
    },
            "totalTime(property)": "PT20M", //調理時間
            "recipeYield(property)": "2 servings", //何人前か
        "recipeInstructions(property)": " 小麦粉入れる、混ぜる、焼く、お好み焼き完成！ "}  //レシピ詳細
</script>

Railsでの作成

全部手打ちで入力しましたが、railsですと,JB等JSONを生成するgemがありますので、活用して頂ければと思います。
JBを活用して、データベースからデータを持ってきて、下記のように代入することができますので、テンプレートを作成して、簡単にページ毎に構造化データを作成することができます。

    "author(property)": {  //登録者情報 , 一つのpropertyの内には別のtypeが入れる。
        "@type": "Person", //propertyに含まれたtype
        "name(property)": @user.name  //手打ちしないでデータベースから持ってくる！
    }

以上になります。

誤記や指摘事項等ございましたら、教えてください。
最後まで読んでいただき、本当にありがとうございます！

参考サイト