表示されているパンくずリスト、本当に構造化データと一致していますか？

WordPressサイトで見落とされがちな「見た目と裏側」の整合性とSEOへの影響

はじめに：表と裏が一致しないパンくずは、SEO上の“損失”につながる

パンくずリスト（Breadcrumb）は、Webサイトのユーザビリティ向上とSEO強化の両方に寄与する重要な要素です。
特に、Googleなどの検索エンジンがページ構造を理解するために利用するのが、構造化データ（JSON-LD）による BreadcrumbList の記述です。

しかし、表示されているHTMLのパンくずと、構造化データが一致していないサイトが非常に多く、これがSEO的なリッチリザルト非表示や評価損失を引き起こすことも珍しくありません。

表示と構造化データのズレ：よくある例

なぜ「整合性」が重要なのか？

• 人間の目に正しくても、Googleには別の意味で解釈されることがある
• 表示と構造化データに差異があると、Googleがパンくずをリッチリザルトとして表示しない可能性がある
• 特にカスタム投稿タイプや階層付き固定ページでは、実装ミスが起きやすい

表示と構造化データの一致確認：チェックリスト

表示用パンくずの確認

<nav> や <ul class="breadcrumb"> の内容。ラベル・順序・リンク先を確認。

JSON-LDの確認

<script type="application/ld+json"> に出力されている BreadcrumbList の内容をチェック。

一致のチェックポイント

• 表示されている順序とJSON-LDの順序が一致しているか？
• リンク先が一致しているか？
• 表示ラベル（カテゴリ名・投稿タイプ名）が同じか？

実例：投稿ページのパンくずと構造化データ

表示上のパンくず

<nav class="breadcrumb">
  <a href="/">ホーム</a> ＞ <a href="/news/">お知らせ</a> ＞ <span>記事タイトル</span>
</nav>

構造化データ（JSON-LD）

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "ホーム",
      "item": "https://example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "お知らせ",
      "item": "https://example.com/news/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "記事タイトル",
      "item": "https://example.com/news/sample-article/"
    }
  ]
}

構造化データの検証に使える公式ツール

構造化データの実装状況は、以下のGoogle公式ツールで誰でも無料で確認できます。

リッチリザルトテスト

構造化データがリッチリザルトとして有効かどうかを検証可能。
URLまたはコードを入力するだけで簡単に判定できます。

Schema Markup Validator

構文やデータ構造の正しさを検証。Googleに限定されず、Schema.org の仕様に準拠しているかを確認できます。

WordPressプラグインとの連携例：Yoast SEO / Breadcrumb NavXT

✅ Yoast SEO

• 管理画面「検索での見え方」→「パンくず」→ 有効化
• テーマ内に <?php yoast_breadcrumb(); ?> を挿入
• JSON-LDは自動で出力されるが、表示内容と一致しているかは必ず確認

✅ Breadcrumb NavXT

• 表示には [bcn_display] または bcn_display() を使用
• 構造化データは別途出力設定が必要（管理画面でON）
• カスタム投稿タイプなどでは階層ずれが起こる可能性あり
  → bcn_after_fill フィルターなどで調整を加える必要がある場合も

JSON-LDの自動生成：実装コード例（PHP）

表示用のパンくず配列 $breadcrumbs を基に、構造化データを生成する例です。

function generate_breadcrumb_jsonld( $breadcrumbs ) {
    if ( empty( $breadcrumbs ) ) return;

    $listItems = [];
    $position = 1;

    foreach ( $breadcrumbs as $crumb ) {
        $listItems[] = [
            '@type'    => 'ListItem',
            'position' => $position++,
            'name'     => $crumb['label'],
            'item'     => $crumb['url'],
        ];
    }

    $jsonld = [
        '@context'         => 'https://schema.org',
        '@type'            => 'BreadcrumbList',
        'itemListElement'  => $listItems,
    ];

    echo '<script type="application/ld+json">' . json_encode( $jsonld, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES ) . '</script>';
}

利用方法

この関数を header.php や該当テンプレート内に配置し、
表示用と同じ構造で $breadcrumbs を渡すことで、表示と構造化データの完全一致が可能になります。

よくある実装ミスと対策

まとめ：構造化データも「裏側の設計」です

パンくずリストは、ユーザーにとっての道しるべであると同時に、Googleにとっての構造認識情報でもあります。
表示と構造化データの整合性は、ロジック設計の質そのものです。

裏側にあるロジックの丁寧な設計こそが、正確な構造・評価・検索表示を支える基盤になります。

WordPressサイトのロジック設計を、もっと正確に。

株式会社一針一歩では、WordPressサイトにおけるパンくず設計・構造化データ最適化・テンプレートロジック構築を一貫してご支援しております。

• 自作テーマのSEO整備
• 表示とJSON-LDの整合性チェック
• カスタム投稿タイプや階層構造への対応設計

見た目ではなく、構造・整合性・正しさを支える裏側の設計をご希望の方は、ぜひご相談ください。