【SEO対策】パンくずリストの構造化データを作成する

Last updated at 2023-12-12Posted at 2023-12-11

この記事はミライトデザイン Advent Calendar 2023 の 11 日目の記事です。

前日の記事はFrozenVoiceさんの「目覚めるとHHKB Studioのポッチから霊圧が消えていた」でした。

私もキーボードは HHKB を使っていて、

職場：HHKB Professional HYBRID Type-S
- 静音タイプ
自宅：HHKB Professional HYBRID
- 非静音タイプ

といった感じなのですが、個人的には非静音タイプの方が打鍵感が好みです。
HHKB Studio にも興味あるのでいつか使ってみたいです。

はじめに

最近「パンくずリストの構造化データを作成する」というタスクを行ったのですが、
そもそも「構造化データって何？」という状態だったのでこの記事を通して整理したいと思います。

構造化データとは

ウェブページに関する情報をさまざまなサイトで活用できるように標準化したデータ形式のことです。
構造化データを作成することで、検索エンジンがページの情報を正確に理解できるようになります。

今回は「パンくずリスト」の情報を検索エンジンが理解できるような形式にしてあげるということですね。

パンくずリスト以外にも構造データの種類はあるため興味ある方は以下を見てみてください。
https://developers.google.com/search/docs/appearance/structured-data/search-gallery?hl=ja

パンくずリストの構造化データを作成すると何がいいの？

検索エンジンのクローラーがサイト構造を理解してくれることで、
以下のように検索結果画面にパンくずリストのリッチリザルトが表示されるようになるようです。
（Google 天気予報の例です）

検索結果に表示される情報が増えることで、
「構造化データのない」ページと比べて以下ようなSEO効果が期待できます（一例です）

ページのクリック率が増加する
ページのアクセス数が増加する

*リッチリザルトとは

通常の検索結果だとページタイトルやURL、説明文等が表示されますが、
画像やレビュー情報などの付加情報を表示されたものです

上記はパンくずリストの例ですが以下は画像などが表示される例です

パンくずリスト構造化データを作ってみる

形式としては3つあるようですが Google 検索では「JSON-LD」を推奨しているようです。

形式
JSON-LD（推奨）	JSON for Linking Dataの略。HTMLページの head および body 要素の script タグ内に埋め込まれるJavaScript 表記
microdata	HTML コンテンツ内に構造化データをネストするために使用される、オープンコミュニティの HTML 仕様
REFa	検索エンジンに伝えたいユーザー表示コンテンツに対応する HTML タグ属性を追加することによってリンクデータをサポートする HTML5 の拡張機

今回は「JSON-LD」形式で作成しました。
他の形式に興味ある方は各形式名にリンクを貼っておくので見てみてください。

既存のコードには「microdata」形式で書かれているものあったのですが、
今回の構造データ作成範囲については推奨となっている「JSON-LD」へ書き換えることにしました。

以下のパンくずリストを例に作成します
- ホーム > パン屋 > メロンパン

【完成形】

<script type="application/ld+json">
  {
  "@context": "https://schema.org", 
  "@type": "BreadcrumbList", // 構造化データのタイプ：パンくずリスト
    "itemListElement": [{
      "@type": "ListItem",
      "position": 1, // パンくずリスト内のパンくずの位置
      "name": "ホーム", // パンくずのタイトル
      "item": "https://example.com" // パンくずを表すウェブページのURL
    },{
      "@type": "ListItem",
      "position": 2,
      "name": "パン屋",
      "item": "https://example.com/bakery"
    },{
      "@type": "ListItem",
      "position": 3,
      "name": "メロンパン",
      "item": "https://example.com/bakery/melonbread"
    }]
  }
</script>