はじめに
こんにちは。ご自身のWebサイトが検索結果でどのように表示されるか、一度は気になったことがあるのではないでしょうか。サイトの訪問者が今どこにいるのかを分かりやすく示し、同時に検索エンジンにもサイトの構造を正確に伝える。そんな役割を担ってくれるのが「パンくずリスト」です。
私も自分のサイトを運営する中で、どうすればもっとユーザーにとって親切で、検索エンジンにも好かれるサイトになるだろうかと試行錯誤してきました。その一つの答えが、パンくずリストへの構造化データ対応でした。
この記事では、私が学んだ構造化データ、特にGoogleが推奨するJSON-LD形式を使ったパンくずリストの実装方法を、手順を追ってご紹介します。よろしければ、ご覧ください。
構造化データとパンくずリストの基本
まず、「構造化データ」という言葉に馴染みがない方もいらっしゃるかもしれませんね。これは、Webページの内容を検索エンジンが理解しやすいように、標準化された形式で情報を伝えるためのデータのことです。
パンくずリストは、サイト内での現在地を示す道しるべのようなものです。このパンくずリストに構造化データを適用すると、Googleの検索結果画面でURLの代わりに、下のように階層構造が表示されることがあります。
graph LR A[検索結果] --> B(サイト名 > カテゴリ > ページ名);
構造化データによるパンくずリストの表示例
これは「リッチリザルト」と呼ばれ、ユーザーがページの内容を瞬時に理解しやすくなるため、クリック率の向上が期待できるんです。
なぜJSON-LDが推奨されるのか
パンくずリストの構造化データを記述する方法はいくつかありますが、GoogleはJSON-LD（ジェイソン・エルディー）という形式を推奨しています。
| 特徴 | JSON-LD (推奨) | Microdata |
|---|---|---|
| 記述方法 | <script>タグ内にJavaScriptオブジェクトとして記述 | HTMLタグに直接属性を追加 |
| 管理のしやすさ | コンテンツと分離しているため管理しやすい | HTMLと一体化しているため、変更が複雑になる場合がある |
| Googleの推奨 | 推奨している | サポートはしているが、JSON-LDを推奨 |
JSON-LDは、ユーザーに表示されるHTMLの見た目部分とは別に、<script>タグを使って情報を記述します。このおかげで、後から修正したり、管理したりするのがとても楽なんです。
JSON-LDによるパンくずリストの実装手順
それでは、具体的な実装手順を見ていきましょう。大きく分けて3つのステップで完了します。
graph LR A(HTMLでパンくずを用意) --> B(JSON-LDを作成); B --> C(HTMLに埋め込む);
実装のフロー
1. HTMLでパンくずリストを作成する
まず、ユーザーが見るためのパンくずリストをHTMLで作成します。一般的には、順序付きリスト<ol>タグを使うことが多いです。
<ol class="breadcrumb"> <li> <a href="https://example.com/">ホーム</a> </li> <li> <a href="https://example.com/web-dev/">Web開発</a> </li> <li>構造化データ</li></ol>2. JSON-LDのスクリプトを作成する
次に、検索エンジンに伝えるためのJSON-LDデータを作成します。これはschema.orgという共通の語彙集（ボキャブラリー）のルールに従って記述します。
パンくずリストでは、BreadcrumbListというタイプを使い、その中にitemListElementとして各階層の情報をListItemで並べていきます。
ListItemには、以下の4つの情報が基本的に必要です。
@type: “ListItem” を指定します。position: 階層の順番を 1から始まる数字 で指定します。name: パンくずとして表示するテキスト（例：「ホーム」）を指定します。item: その階層のページのURLを指定します。現在のページ（最後の項目）には不要です。
3. HTMLに埋め込む
最後に、作成したHTMLとJSON-LDを1つのファイルにまとめます。JSON-LDは<script>タグで囲み、ページの<head>内または<body>内に配置します。
パンくずリストのHTMLとJSON-LDの実装例
実行結果
重要なポイント
JSON-LDで記述するitemListElementの内容は、実際にページに表示されているパンくずリストの内容と一致させることが推奨されます。また、positionプロパティは必ず1から始めるのを忘れないようにしましょう。
実装後の確認方法
コードを実装したら、正しく認識されるかを確認することが大切です。
自分の実装した構造化データの問題がないか確認しておこうね！
確認には、Googleが提供している「リッチリザルトテスト」というツールが便利です。URLを入力するか、コードを直接貼り付けるだけで、構造化データに問題がないかをチェックしてくれます。
ヒント
テストで問題がなくても、すぐに検索結果に反映されるわけではありません。Googleのクローラーがページを再訪して初めて認識されます。反映状況は、Google Search Consoleで確認するのがおすすめです。
よくある質問
パンくずリストの最後の項目にリンクは必要ですか？
いいえ、最後の項目（現在のページ）には`item`プロパティ（URL）は不要です。`name`プロパティだけで十分とされています。
`position`の番号は0から始めても良いですか？
いいえ、`position`は必ず`1`から始める必要があります。これはschema.orgとGoogleのガイドラインで定められています。
構造化データはSEOに直接的なランキング効果がありますか？
直接的なランキング向上要因ではありません。しかし、リッチリザルトとして表示されることで検索結果の視認性が高まり、クリック率の向上が期待できます。これが間接的にSEOへ良い影響を与える可能性があります。
まとめ
今回は、構造化データを使ったパンくずリストの実装方法について、ご紹介しました。
- パンくずリストに構造化データを適用すると、検索結果の視認性が向上する可能性がある。
- 記述形式は、Google推奨のJSON-LDが管理しやすくておすすめ。
- 実装後はリッチリザルト テストツールで必ず確認する。
一見すると複雑に思えるかもしれませんが、一つひとつの手順はとてもシンプルです。この記事が、参考になれば嬉しいです。
公式リソース（Official Resources）
関連記事
専門用語が多くて少し戸惑うよね。。でも、一つひとつの意味を紐解いていくと、その仕組みは意外とシンプルだよ！