【ITニュース解説】breadcrumblist JSON-LD Synchronization and Maintenance

ウェブサイトを利用する際、「ホーム > 記事 > この記事のタイトル」のように、今見ているページがサイト全体のどこに位置するのかを示す表示を見たことがあるだろう。これが「パンくずリスト」と呼ばれるものだ。パンくずリストは、ユーザーがサイト内で迷子になるのを防ぎ、現在の場所を直感的に把握できるようにする重要なナビゲーション要素だ。しかし、この目に見えるパンくずリストと、検索エンジンがウェブサイトの内容を理解するために使う「JSON-LD」という形式の構造化データが食い違うと、様々な問題が発生する可能性がある。

ニュース記事では、このパンくずリストの視覚的な表示とJSON-LD形式の構造化データが時間とともに「乖離（かいり）」してしまうことが大きな問題だと指摘している。乖離とは、簡単に言えば、両者の内容がずれてしまうことだ。例えば、ユーザーの目には「ホーム > 製品 > スマートフォン」と表示されているのに、検索エンジンに伝えるJSON-LDデータでは「ホーム > デバイス > スマートフォン」となっているようなケースだ。このような食い違いがあると、Googleなどの検索エンジンがウェブページの内容を正確に理解できなくなり、その結果、検索結果にパンくずリストが正しく表示されなかったり、サイト全体の評価が下がってしまったりする可能性がある。これは、サイトの「信頼性」を損なうことにもつながる。

この問題を解決するための最も手軽で効果的な方法は、「単一のデータ源から両方を生成する」というものだ。具体的には、ウェブサイトのテンプレート内で、パンくずリストの各項目を記述した一つの配列（リストのようなデータ構造）を定義し、その配列を使って、ユーザーが見るHTMLのパンくずリストと、検索エンジンに伝えるJSON-LDのスクリプトタグの両方を生成するというアプローチだ。

例えば、以下のようなJSON-LDのデータ構造を考える。これは、ウェブページがパンくずリストを持っていることを検索エンジンに伝えるための標準的な形式だ。

Copy
1{
2  "@context": "https://schema.org",
3  "@type": "BreadcrumbList",
4  "itemListElement": [
5    {
6      "@type": "ListItem",
7      "position": 1,
8      "name": "Home",
9      "item": "https://example.com/"
10    },
11    {
12      "@type": "ListItem",
13      "position": 2,
14      "name": "Articles",
15      "item": "https://example.com/articles/"
16    }
17  ]
18}

この例では、「itemListElement」という部分に、パンくずリストの各項目が順序立てて配列として格納されている。それぞれの項目には、それがリストの何番目かを示す「position」、表示する名前を示す「name」、そしてその項目が指すページのURLを示す「item」が含まれている。この配列を一つ用意し、これをもとにHTMLもJSON-LDも生成すれば、両者の内容が食い違うことはなくなる。

なぜ乖離が発生しやすいかというと、多くのウェブアプリケーションでは、ユーザーに見せるHTMLと、検索エンジン向けのJSON-LDをそれぞれ別々に手動で定義している場合があるからだ。開発者がカテゴリページのURLをHTML上で変更しても、JSON-LDの定義を更新し忘れると、すぐに矛盾が生じてしまう。検索エンジンは、ウェブページを巡回（クローリング）して内容を解析する際、両方の情報源を確認する。もし目に見えるパンくずリストとJSON-LDが示す階層が異なっていたら、検索エンジンはどちらが正しいか判断できず、最終的に検索結果でのパンくずリストの表示を完全にやめてしまう可能性がある。

この矛盾を解消するには、ウェブサイトのナビゲーションに関するデータを、一つの場所、つまり一つのデータ構造やテンプレート変数に集約することが非常に重要だ。例えば、サイトのカテゴリやページの情報を保持する中心的な配列データがあったとする。その配列をループ処理して、視覚的なHTMLリストの項目を生成し、同時に、同じ配列からJSON-LDペイロードを生成する。こうすることで、手作業による重複や、それによって発生する更新忘れを根本的になくすことができる。もしカテゴリ名やURLが変更された場合でも、この中心となる配列を一度更新するだけで、ユーザーインターフェースと検索エンジンが読み取る機械的なマークアップの両方に、変更が自動的に反映される仕組みだ。

パンくずリストの項目を構成する際には、厳密なルールに従う必要がある。「itemListElement」配列内の各項目には、必ず「position」というプロパティを含めなければならない。これはホームページを「1」として始まり、そこから順番に2、3と、途切れることなく連続する整数を指定する必要がある。途中のディレクトリレベルを飛ばしたり、番号を逆転させたりすると、検索エンジンはそれを無効な構造と判断し、受け付けない可能性がある。

具体的な項目としては、「ルート（Home）」が常にリストの最初の要素であり、「position: 1」でサイトの絶対的な根（トップページ）を指す必要がある。これを省略すると、ウェブサイトの直接的なパスが途切れてしまう。次に、「中間カテゴリ」は、多階層のディレクトリ構造を持つサイトで必要となる。もし途中の階層をスキップすると、サイトのツリー構造が分断されてしまうため、すべての親ディレクトリが項目として存在するようにすることが重要だ。そして、リストの最後に来るのが「現在のページ」だ。この項目が指すURLは、相対パスや正規ではないURLではなく、そのページの「絶対的な正規URL（Canonical URL）」を使う必要がある。正規URLとは、そのページのもっとも代表的なURLのことで、重複する内容を持つ複数のURLが存在する場合に、どれを公式とみなすかを検索エンジンに伝えるためのものだ。もし正規ではないURLを使ってしまうと、検索エンジンが混乱し、不一致の原因となる。

また、パンくずリストのURLには、ページネーションのパラメータ（例: ?page=2）、ユーザーセッションの識別子、トラッキング用のクエリ文字列など、動的なパラメータを絶対に入れてはならない。パンくずリスト内のすべてのURLは、クリーンで、正規化された、検索エンジンが信頼してインデックスできる宛先を指す必要がある。

ページの正規URLが変わることも考えられる。例えば、サイトの移行、URLパラメータの除去、複数のページ内容の統合などによって、URLが変わる場合がある。このような時、パンくずリストは、新しい正規の宛先を正確に反映する必要がある。Googleのガイドラインでも、正規URLを示すrel=canonicalタグと構造化データの間に矛盾するシグナルがあると、検索エンジンのインデックス作成プロセスが混乱し、新しいURL構造の発見が遅れる可能性があると述べられている。

実装を検証するためには、最終的なListItemの「item」プロパティに含まれるURLが、そのページの<head>セクションにあるrel=canonicalリンク要素のURLと一致するかを確認することが重要だ。もし両者が異なる場合は、パンくずリストの項目を更新して、正規URLと一致させる必要がある。また、リダイレクトがHTMLのパンくずリストとJSON-LDスクリプトの間に隠れた不一致を生み出していないか、ルーティングロジックも確認する必要がある。

最後に、正しく実装されていることを確認するためのチェックリストを挙げる。第一に、JSON-LD配列のposition順序が、視覚的なHTMLのパンくずリストの表示順序と完全に一致することを確認する。第二に、すべてのリンクが意図した正規の宛先に解決され、予期せぬリダイレクトが発生しないことを検証する。第三に、代表的なページの出力を構造化データ検証ツールなどでテストし、必要なプロパティが欠けていないか、エラーがないかを確認する。そして最後に、HTMLとJSON-LDペイロードのいずれにおいても、中間的なパンくずリストのレベルがスキップされていないことを確認する。これらの確認を通じて、ユーザーと検索エンジンの両方にとって、明確で一貫性のあるナビゲーションを提供できる。