LoginSignup
3
1

More than 1 year has passed since last update.

構造化データについてもっと詳しくなりたいんじゃ

Posted at

聞いたことあるけど、案件でガッツリ対応したことはない「構造化データ」。
今回はいい機会と捉え、少しでも理解を深めるために(サッと撫でる程度ですが)まとめたいと思います。

構造化データってなんですの

構造化データを提供してもらうと、Google はそのページをより正確に理解できるようになります。
構造化データとは、ページに関する情報を提供し、そのコンテンツ(たとえば、レシピページの場合は材料、加熱時間と加熱温度、カロリーなど)を分類するために標準化されたデータ形式です。

とのことで、要は検索エンジンがそのページを理解しやすいように、
ページ情報を構造化したデータのことですね。

構造化すると何か良いことあるの

検索結果でリッチスニペットが表示できる!

構造化する最大の目的ではないでしょうか。
リッチスニペットとはこういう検索結果表示のことです↓
riotsongblog_pic 2021-10-13 1.47.19.jpg

よく見かけると思います。
ちなみにこちらは「渋谷 ランチ」で検索したときに表示されたものです。
他にもページタイトル名の上に階層が表示されていたりするのも見かけるのではないでしょうか。

なぜこれらがメリットになるのかというと、
検索時に目を引くので競合他サイトよりクリック(アクセス)率アップが期待できるからです。

逆にデメリットってあるの

特に無し!工数かかるくらい?

構造化データをまとめること自体にデメリットは、おそらく無いはずです。
ただし、構造化データを設定しても必ずリッチスニペット表示されるわけでは無いようなので、
工数をかけて対応するかを検討する必要があります。

表示される条件みたいなものも、ザッと探しましたが見つかりませんでした。。

構造化データの設定方法

Schema.orgにある「ボキャブラリ」と呼ばれる構造化データ用のタグを利用して設定します。

Schema.orgは、インターネット、Webページ、電子メールメッセージなどで構造化データのスキーマを作成、維持、および促進することを使命とする共同のコミュニティ活動です。
https://schema.org/

構造化データの形式

まず形式ですが、下記の3つがあります。
特別な仕様がなければ使うのは推奨されているJSON-LDになるかと思います。
- JSON-LD(推奨)
- microdata
- RDFa

書き方サンプル

下記はJSON-LD形式で構造化したデータのスニペットです。
レシピページにて、レシピのタイトルやレシピの作成者などの詳細情報を記述できます。
(引用:構造化データの仕組みについて | Google 検索セントラル

  <head>
    <title>Apple Pie by Grandma</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "Recipe",
      "name": "Apple Pie by Grandma",
      "author": "Elaine Smith",
      "image": "http://images.edge-generalmills.com/56459281-6fe6-4d9d-984f-385c9488d824.jpg",
      "description": "A classic apple pie.",
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "4.8",
        "reviewCount": "7462",
        "bestRating": "5",
        "worstRating": "1"
      },
      "prepTime": "PT30M",
      "totalTime": "PT1H30M",
      "recipeYield": "8",
      "nutrition": {
        "@type": "NutritionInformation",
        "calories": "512 calories"
      },
      "recipeIngredient": [
        "1 box refrigerated pie crusts, softened as directed on box",
        "6 cups thinly sliced, peeled apples (6 medium)"
      ]
    }
    </script>
  </head>
  <body>
  </body>
</html>

表示結果↓

このように、構造化タグを使用して情報をまとめて設定することで、
検索エンジンがページの内容を詳しく理解し、リッチスニペットとして結果ページに表示してくれます。

構造化データの検証方法

こちらを使って正しく記述できているかを確認できます。
構造化データ記載したページURLか、記述自体をコピペして検証可能…!
https://validator.schema.org/

構造化データ マークアップ支援ツールもあるよ

これを使って設問に答えていくだけでタグを生成できます。
あくまで支援ツールなので、細かいカスタマイズには対応していませんが、
簡易的な対応でよければこれで十分かと思います。
https://www.google.com/webmasters/markup-helper/u/0/

他にもデータハイライターなるものもあるよ

こちらも支援ツールで、手軽に構造化データを設定できます。

データ ハイライターはウェブマスター ツールの 1 つで、ウェブサイトの構造化データのパターンを Google に伝えるものです。

結び

とまあ、ほんとに表面を軽くなでただけですが、
こういう設定もあるんだな〜と心の引き出しにしまっておきたいですね。
案件でもたまにガイドラインに構造化データの設定が含まれていたりしますので、
検証ページ用意して、色々触って慣れておいたほうが良いのでは…!?
以上です〜

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1