[WordPress]JSON-LDでパンくずリストを構造化データマークアップする方法

まずはコードをご紹介：

これは、WordPressで作られたWebサイトのパンくずリストに「JSON-LD形式」で構造化データマークアップを行う方法です。

そもそも「構造化データマークアップってなに？」という方は、Google公式のドキュメントを参照してみてください。詳しく載っています。

上記、Googleの公式ドキュメント内で、端的にわかりやすい部分の引用をするとすれば、

構造化データを使用すると、Google がサイトのコンテンツを理解しやすくなり、ページに合わせて検索結果の特別な機能を有効にして表示できるようになります。

こちらの一文が、「構造化データマークアップ」について最もよく言い表していると感じました。

では早速、コードを見てみましょう。

<?php
$catarg = get_the_category();
$catname = $catarg[0]->name;
$catslug = $catarg[0]->slug;
?>
<script type="application/ld+json">
<?php if(is_archive()): ?>
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
		{
      "@type": "ListItem",
      "position": 1,
      "item": {
        "@id": "<?php echo site_url(); ?>",
        "name": "HOME"
      }
    }, {
      "@type": "ListItem",
      "position": 2,
      "item": {
        "@id": "<?php echo site_url().'/'.$catslug; ?>",
        "name": "<?php echo $catname; ?>"
      }
    }
  ]
}
<?php elseif(is_single()): ?>
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "item": {
        "@id": "<?php echo site_url(); ?>",
        "name": "HOME"
      }
    }
, {
      "@type": "ListItem",
      "position": 2,
      "item": {
        "@id": "<?php echo site_url().'/'.$catslug; ?>",
        "name": "<?php echo $catname; ?>"
      }
    }
, {
      "@type": "ListItem",
      "position": 3,
      "item": {
        "@id": "<?php echo post_permalink(); ?>",
        "name": "<?php echo get_the_title(); ?>"
      }
    }
  ]
}
<?php endif; ?>
</script>

各行の解説など

WordPressでパンくずリストの構造化データマークアップをする場合、いくつかの方法が考えられますので、上記はほんの一例にすぎません。
この例では、
7行目の if(is_archive()): でカテゴリ一覧ページやタグ一覧ページ等、何らかのアーカイブページの場合の分岐を、
29行目の elseif(is_single()): で単一記事ページに対するパンくずリストの構造化データの分岐をしています。

「アーカイブページ」の場合

では、さらに細かく見ていきましょう。
まず最初の2, 3, 4行目についてですが、

2行目では、get_the_category(); で現在の category の情報を取得して、それを変数に格納しています。
3行目では、2行目で取得した category の情報から、 $catarg[0]->name; として ‘name’ と言う key を持つ値を取り出して、変数に格納しています。（これはつまり「カテゴリ名」に相当する情報です）
4行目では、上記同様に、2行目で取得した category の情報から、 $catarg[0]->slug; として ‘slug’ と言う key を持つ値を取り出して、変数に格納しています。（これはつまり「slug名」に相当する情報で、これを後ほどurlと連結して利用します）
6行目の

<script type="application/ld+json">

から
61行目の

</script>

までが、今回の'JSON-LD'一式になります。
この部分の冒頭の
9, 10行目ですが、これはJSON-LD形式で構造化データを記述する際の定型文のようなものです。
さらに11行目も同様で、 "itemListElement" として、この中に breadcrumb（パンくずリスト）内の構造化データを記述していきます。

ではその内訳ですが、
12行目の { から
19行目の最初の }, までが第1階層目の記述になります。
続いて、
19行目の末尾の { から
26行目の } までが
第2階層目の記述になります。

この部分は、先ほども書いたとおり「アーカイブページ用」の構造化データマークアップですので、このような2階層分の記述になっています。
もちろん、子カテゴリ、孫カテゴリを持つような構造のWebサイトでは、その分の構造化データを追加してあげる必要があります。
その場合は、第1階層のみを固定で用意してあげて、それ以降は新たに WP_Query() を発行した上で、存在するカテゴリの階層分だけJSON-LDを吐き出すような foreach のループを書いてあげる等すれば良いでしょう。

「単一記事ページ」の場合

「単一記事ページ」の場合も、基本的には「アーカイブページ用」のものと似た構造でOKです。
末尾に、動的に現在の投稿の情報を追加してあげるだけです。

具体的には、基本構造は同じで、
54行目に

"@id": "<?php echo post_permalink(); ?>",

として現在のパーマリンクを出力。
55行目に

"name": "<?php echo get_the_title(); ?>"

として現在のタイトルを出力。
こちらを追加しているだけで、あとは同様の構造になっています。
（ 50行目の { から
57行目の } までが追加部分となります。）

公式の検証ツール

上記のコードをWordPressのthemeの適切な箇所に記載するか、
もしくは外部phpファイル化して、適切な場所から呼び出してあげれば、JSON-LD形式での
パンくずリスト用構造化データマークアップ対応が完了します。

ちゃんと反映されているかどうかは下記、Google公式のツールで検証可能です。

構造化データテストツール

うまく反映されていれば、'BreadcrumbList' として検出され、構造化データが確認できます。

JSON-LD形式で構造化データマークアップをするメリット

実は今回ご紹介した「JSON-LD」の他にも、「Microdata」「RDFA」と言う2つの記述方法が存在します。
なぜ「JSON-LD」を選択したかと言うと、
「パンくずリスト本体の記述を一切変えずに、構造化データ単体での記述ができる点」
「WordPressのようなCMSによる、動的な値の呼び出しと相性が良い点」
こちらの2点が挙げられます。

「JSON-LD」形式以外のふたつは
html内に直接プロパティを記述していく方法になり、動的なサイトで扱うメリットがあまりないように感じられたので、
単純な記述のわかりやすさとメンテナンス性の面で、今回は「JSON-LD」を選択する事にしました。