パンくずリストの構造化データをJSON-LD形式で実装する

パンくずリストの構造化データをJSON-LD形式で実装する

2025年04月04日

WordPressでブログやサイトを作っている場合であれば、テーマ自体にパンくずリストを表示する機能が標準で付いていることがほとんどです。

さらに、Googleなどの検索エンジンがページの内容を理解できるように構造化データを実装しているものもあります。

Googleでは「JSON-LD」「microdata」「RDFa」といった3つの形式でマークアップされた構造化データをサポートしており、その中でも実装と管理が容易という点で「JSON-LD」形式でのマークアップを推奨しています。

WordPressのテーマでもまれに、構造化データが実装されていないものや、パンくずリストが表示されないものもあったりします。

そこで、今回はJSON-LD形式での構造化データ実装例を解説したいと思います。

目次

JSON-LD形式でのパンくずリスト記述例

以下は、JSON-LDを使用したパンくずリストの記述例です。


<script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
      {
        "@type": "ListItem",
        "position": 1,
        "name": "top",
        "item": "トップページのurl"
      },
      {
        "@type": "ListItem",
        "position": 2,
        "name": "カテゴリー名",
        "item": "カテゴリーページのurl"
      },
      {
        "@type": "ListItem",
        "position": 3,
        "name": "記事タイトル",
        "item": "記事のurl"
      }
    ]
  }
</script>

基本はこの形となります。このJSON-LD形式でマークアップされた構造化データが<head>タグ内に記述されていればOKです。

WordPressでJSON-LD形式のマークアップ

まずは投稿ページが表示されている際のパンくずリストの構造化データを作成します。

function schema_org_single(){
  global $post;

  $title = get_the_title($post->ID);
  $url = get_permalink($post->ID);
  $categories = get_the_category($post->ID);

  if(!empty($categories)){
    $count = count($categories);

    if($count == 1){
      $cat_name = $categories[0]->name;
      $cat_id = $categories[0]->term_id;
      $cat_url = get_category_link($cat_id);

      $cat_list = <<<EOF
      {
        "@type": "ListItem",
        "position": 2,
        "name": "{$cat_name}",
        "item": "{$cat_url}"
      },
      {
        "@type": "ListItem",
        "position": 3,
        "name": "{$title}",
        "item": "{$url}"
      }
EOF
;
    }else{
      foreach($categories as $category){
        $parent = $category->parent;
        if($parent != 0){
          $child_id = $category->term_id;
          $child_name = $category->name;
          $child_link = get_category_link($child_id);
          
          $child_cat = <<<EOF
      {
        "@type": "ListItem",
        "position": 3,
        "name": "{$child_name}",
        "item": "{$child_link}"
      }
EOF
;
        }else{
          $parent_id = $cat->term_id;
          $parent_name = $cat->name;
          $parent_link = get_category_link($parent_id);

          $parent_cat = <<<EOF
      {
        "@type": "ListItem",
        "position": 2,
        "name": "{$parent_name}",
        "item": "{$parent_link}"
      }
EOF
;
        }
      }

      $cat_list = <<<EOF
      {$parent_cat},
      {$child_cat},
      {
        "@type": "ListItem",
        "position": 4,
        "name": "{$title}",
        "item": "{$url}"
      }
EOF
;
    }

  $home = home_url();

  $single_json = <<<EOF
[  
  {
    "@context": "http://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
      {
        "@type": "ListItem",
        "position": 1,
        "name": "top",
        "item": "{$home}"
      },
      {$cat_list}
    ]
  }
]
EOF
;

    return $single_json;
  }
}

ソースコードが少し長くなったので、どのような流れでマークアップしているかをざっくり説明します。

投稿ページの情報を取得

global $post;

$title = get_the_title($post->ID);
$url = get_permalink($post->ID);
$categories = get_the_category($post->ID);

まず、投稿ページの「タイトル」「url」「紐づけされたカテゴリー」を取得しています。

紐づけられたカテゴリーの処理

if(!empty($categories)){
    $count = count($categories);

    if($count == 1){
      $cat_name = $categories[0]->name;
      $cat_id = $categories[0]->term_id;
      $cat_url = get_category_link($cat_id);

      $cat_list = <<<EOF
      {
        "@type": "ListItem",
        "position": 2,
        "name": "{$cat_name}",
        "item": "{$cat_url}"
      },
      {
        "@type": "ListItem",
        "position": 3,
        "name": "{$title}",
        "item": "{$url}"
      }
EOF
;
    }else{
      foreach($categories as $category){
        $parent = $category->parent;
        if($parent != 0){
          $child_id = $category->term_id;
          $child_name = $category->name;
          $child_link = get_category_link($child_id);
          
          $child_cat = <<<EOF
      {
        "@type": "ListItem",
        "position": 3,
        "name": "{$child_name}",
        "item": "{$child_link}"
      }
EOF
;
        }else{
          $parent_id = $cat->term_id;
          $parent_name = $cat->name;
          $parent_link = get_category_link($parent_id);

          $parent_cat = <<<EOF
      {
        "@type": "ListItem",
        "position": 2,
        "name": "{$parent_name}",
        "item": "{$parent_link}"
      }
EOF
;
        }
      }

      $cat_list = <<<EOF
      {$parent_cat},
      {$child_cat},
      {
        "@type": "ListItem",
        "position": 4,
        "name": "{$title}",
        "item": "{$url}"
      }
EOF
;
    }

get_the_category()で取得したカテゴリーの情報を確認します。

カテゴリーの情報は配列で返されるのでcount関数で配列の要素数を調べます。

配列の要素数が「1」であれば、ここまでソースコードが長くなることはないのですが、カテゴリーに親子関係があった場合は少しアプローチを考えないといけなくなります。

foreachを使って配列の各要素内の情報を確認していきます。

get_the_category()で取得したカテゴリーはスラッグ順で返ってくるので、1番目の要素が「親」なのか「子」なのかを調べてやる必要があります。

$category->parentで取得した値が「0」以外の場合であれば「子カテゴリー」として処理し、「0」の場合は「親カテゴリー」として処理します。

その後、記事のタイトル・urlとトップ（ホーム）ページのurlの構造化データを組み込めば完成です。

これをis_single()で分岐してheadタグ内に記述するようにすればOKです。

親子関係があるカテゴリーページのマークアップ

投稿ページのパンくずリストのマークアップと考え方は同じで、親カテゴリーが存在するかどうかを確認して処理を分けていきます。

function schema_org_cat(){
  $home = home_url();
  $cat_info = get_queried_object();
  $parent = $cat_info->parent;
  $cat_name = $cat_info->name;
  $cat_id = $cat_info->term_id;
  $cat_url = get_category_link($cat_id);

  if($parent != 0){
    $parent_name = get_cat_name($parent);
    $parent_url = get_category_link($parent);

    $cat_list = <<<EOF
      {
        "@type": "ListItem",
        "position": 2,
        "name": "{$parent_name}",
        "item": "{$parent_url}"
      },
      {
        "@type": "ListItem",
        "position": 3,
        "name": "{$cat_name}",
        "item": "{$cat_url}"
      }
EOF
;
  }else{
    $cat_list = <<<EOF
      {
        "@type": "ListItem",
        "position": 2,
        "name": "{$cat_name}",
        "item": "{$cat_url}"
      }
EOF
;
  }

  $cat_json = <<<EOF
  [
    {
      "@context": "http://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "position": 1,
          "name": "top",
          "item": "{$home}"
        },
        {$cat_list}
      ]
    }
  ]
EOF
;
  return $cat_json;
}

ここまでのソースコードを部分的に変更すれば、ページ内に表示するパンくずリストも作れるかと思います。デザイン面も自分で自由に変更もできるので興味がある方は挑戦してみてはいかがでしょうか。