パンくずリストを構造化してJSONで効果的に活用する方法

はじめに

この章では、この記事の目的と読者層、進め方をやさしく説明します。

目的

Web制作やブログ運営、SEO対策でパンくずリストを正しく検索エンジン向けに伝えるため、JSON-LD形式による構造化データの基本と実装方法を分かりやすく解説します。実務で使えるサンプルや注意点を中心に扱います。

対象読者

・サイト運営者やブロガー
・コーディング経験があるWeb制作者
・SEO担当者
初心者の方でも理解できるよう、専門用語は必要最小限に留めます。

本記事の構成と読み方

第2章で基本概念、第3章でJSON-LDの具体的な書き方、第4章で設置場所や検証方法、第5章でWordPressでの動的出力例を順に解説します。まずは全体像をつかんでから、実装パートに進むと理解が早まります。

なぜ重要か

パンくずは利用者の利便性を高め、検索結果での表示改善につながる可能性があります。JSON-LDで正しくマークアップすることで、検索エンジンにページ構造を明確に伝えられます。

パンくずリストと構造化データの基本

パンくずリストとは

パンくずリストは、現在のページがサイト階層のどこにあるかを示すナビゲーションです。典型的には「ホーム > カテゴリ > 記事」のように表示され、ユーザーが今どこにいるか把握しやすくします。視覚的な位置情報を与え、戻る操作を簡単にします。

ユーザーとSEOへの効果

• ユーザービリティの向上：訪問者がサイト内を迷わず移動できます。
• サイト構造の明示：検索エンジンがページの関係性を理解しやすくなります。
• 検索結果での表示：検索結果にパンくずが表示されるとCTRが高まることがあります。
• 内部リンク効果：クローラの回遊を助け、重要ページへリンクを集めやすくします。

構造化データの役割

構造化データは、検索エンジンにパンくずの意味を伝えるための仕組みです。主な記法はJSON-LD、microdata、RDFaの3種類です。GoogleはJSON-LDを推奨しており、HTMLから独立して管理できるため変更や保守が楽になります。

基本の作り方（実務上の注意）

• 最初は必ず「ホーム」を含める。順序はサイト階層に合わせる。
• 表示ラベルは短く分かりやすくする。長文は避ける。
• 表示と構造は一致させる。表示と実際のリンクが違うと混乱を招きます。
• 同一ページに複数のパンくずを設置しない。SEOとユーザー双方に好ましくありません。

次の章では、JSON-LDでの具体的なマークアップ構造を取り上げます。

JSON-LDでマークアップするパンくずリストの基本構造

全体像

パンくずリストはschema.orgのBreadcrumbList型で表現します。@contextに”https://schema.org”、@typeに”BreadcrumbList”を指定し、itemListElementにListItemの配列を入れます。ListItemは順序を示すpositionと、item（@idでURL、nameで表示名）を持ちます。

基本構造（骨組み）

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "item": {"@id": "https://example.com/", "name": "ホーム"}
    }
  ]
}

具体例

ホーム → ブログ → 記事 の場合:

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {"@type":"ListItem","position":1,"item":{"@id":"https://example.com/","name":"ホーム"}},
    {"@type":"ListItem","position":2,"item":{"@id":"https://example.com/blog/","name":"ブログ"}},
    {"@type":"ListItem","position":3,"item":{"@id":"https://example.com/blog/post","name":"記事タイトル"}}
  ]
}

注意点

• positionは1から始めて連番にします。重複は避けます。
• itemはオブジェクト形式で@id（絶対URL）とnameを入れるのが一般的です。
• @contextや@typeを省略すると正しく解釈されない可能性があります。
• 表示名はユーザー向けの短いラベルにします。

この基本形をもとに、サイトの階層に合わせて順番やURLを整えてください。

JSON-LDの設置場所と基本的な書き方

設置場所（headを推奨）

構造化データは一般的にHTMLのheadタグ内に置きます。検索エンジンのガイドや多くの解説がhead内設置を推奨します。body内でも動作しますが、表示と構造化データの役割を分けるためheadに置く方が分かりやすく、クローラーの処理も安定します。

基本的な書き方

内に以下のようにでJSONを記述します。必ずJSONとして正しい構文にしてください。

<script type="application/ld+json">
{
  "@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/category/"}
  ]
}
</script>

HTML表示との整合

HTMLで表示するパンくずの階層とJSON-LDの階層は一致させます。HTMLはユーザー向け、JSON-LDは検索エンジン向けに別管理するのが一般的です。URLは必ず絶対パスを使い、positionは1から順に付けます。

注意点

• JSONを文字列としてエスケープしない。改行や余分なカンマに注意。
• 動的に後から挿入する場合、レンダリングタイミングで反映されないことがあります。検証ツールで確認してください。

WordPressでJSON-LDパンくずリストを出力する方法

概要

WordPressでJSON-LDのパンくずを出すには主に2つの方法があります。1つは投稿情報を取得して文字列連結でJSONを作る方法、もう1つはPHP配列を組み立ててjson_encodeで安全に出力する方法です。ここではそれぞれの手順と注意点を説明します。

方法1：文字列連結で出力（簡易）

functions.phpにフックを入れて投稿タイトルやURL、カテゴリ名を取得し、文字列でJSONを組みます。簡単ですが手作業でエスケープが必要です。

例：

add_action('wp_head', function(){
 if(!is_single()) return;
 $title = esc_html(get_the_title());
 $url = esc_url(get_permalink());
 $cat = get_the_category();
 $cat_name = $cat? esc_html($cat[0]->name): '';
 echo '<script type="application/ld+json">';
 echo '{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[';
 echo '{"@type":"ListItem","position":1,"name":"ホーム","item":"'.home_url().'"},';
 echo '{"@type":"ListItem","position":2,"name":"'. $cat_name .'","item":"'. get_category_link($cat[0]->term_id) .'"},';
 echo '{"@type":"ListItem","position":3,"name":"'. $title .'","item":"'. $url .'"}';
 echo ']}';
 echo '</script>';
});

方法2：配列を組み立ててjson_encodeで出力（推奨）

配列で構造を作ればエスケープや文字化け対策が楽になります。

例：

add_action('wp_head', function(){
 if(!is_single()) return;
 $items = [];
 $items[] = ['@type'=>'ListItem','position'=>1,'name'=>'ホーム','item'=>home_url()];
 $cat = get_the_category();
 if($cat){ $items[] = ['@type'=>'ListItem','position'=>2,'name'=>$cat[0]->name,'item'=>get_category_link($cat[0]->term_id)]; }
 $items[] = ['@type'=>'ListItem','position'=>3,'name'=>get_the_title(),'item'=>get_permalink()];
 $data = ['@context'=>'https://schema.org','@type'=>'BreadcrumbList','itemListElement'=>$items];
 echo '<script type="application/ld+json">'.json_encode($data, JSON_UNESCAPED_UNICODE|JSON_UNESCAPED_SLASHES).'</script>';
});

設置場所と注意点

• テーマのfunctions.phpか機能プラグインに追加します。wp_headフックかheaderテンプレートが一般的です。
• is_single()やis_page()で出力条件を制御してください。
• json_encodeを使う方法は文字列の手動エスケープを減らし安全です。
• 出力後はGoogleのリッチリザルトテストなどで検証してください。