「JSON-LD」でパンくずリストの構造化データを実装【WP設置編】

サツキ: トリック or トリート！とりあえずお菓子ください。

皆さん、こんにちは。サツキです。

今回は、SEO対策にもなるパンくずリストの構造化データを「JSON-LD」形式で「WordPress」に実装する方法をご紹介したいと思います。
プラグイン等を使用すればインストールして管理画面から設定するだけで設置することもできるのですが、全然難しいことではないので今回はプラグインを使わない方法をご紹介したいと思います。
不必要にプラグインを増やすべきではないと思いますので興味がある方は是非一度お試しください。

そもそも「構造化データ」「JSON-LD」とは？

「構造化データ」とは、WEBページの内容を検索エンジンにも理解できるようにHTML内に書かれるメタ情報です。
サイト内のコンテンツ内容が人間であれば見て分かっても、クローラー（ボット）ではその認識が難しいことがあります。
そのような場合に「構造化データ」はクローラーがコンテンツ内容を認識するを手助けをします。
その結果クローラーがより正しくコンテンツを認識するようになったり、自社サイトの検索結果表示の際にリッチリザルトが表示されるようになったりもします。
他との差別化を図っていくこと等もできるためSEOへの効果も期待できるというわけです。
※「リッチリザルト」とは「構造化データ」をもとに視覚的な機能や操作機能が追加された検索結果の表示のことです。

続いて、「JSON-LD」についてですが「構造化データ」を作成する際には「ボキャブラリー」と「シンタックス」が必要になります。
ボキャブラリー・・・メタ情報を定義するもの（※代表例：「schema.org」）
シンタックス・・・メタ情報の記述方法（※代表例：「Microdata」「RDFa」「JSON-LD」）
ボキャブラリーで定義されているものについてシンタックスの仕様通りに記述することではじめて「構造化データ」として認識されるということです。

「JSON-LD」は上記の通り、シンタックスの1種類でGoogleが推奨するものになります。
ですので、今回は「JSON-LD」形式での「構造化データ」の作成方法をご紹介します。

「JSON-LD」の記述方法

<script type="application/ld+json">
  {
    "@context":"http://schema.org",
    "@type":"BreadcrumbList",
    "name":"パンくずリスト",
    "itemListElement":[
      {
        "@type":"ListItem",
        "position":1,
        "item":{"name":"HOME","@id":"https://sample.com/"}
      },
      {
        "@type":"ListItem",
        "position":2,
        "item":{"name":"Sub-Page","@id":"https://sample.com/subpage/"}
      }
    ]
  }
</script>

「JSON-LD」形式での構造化データは上記のようなマークアップで記述することが可能です。
ただページ毎に上記のコードを入れていく作業は正直面倒だと思いますし、修正の必要があった場合にも記述箇所がばらけていては修正に時間がかかるためWordPressのテーマ内の「functions.php」に関数を一つ作成し、「wp_head」にフックさせることで「JSON-LD」形式での構造化データを自動生成し表示させたいと思います。

「JSON-LD」形式のパンくずリストの自動生成関数

function json_breadcrumb() {

  if( is_admin() || is_home() || is_front_page() ){ return; }

  $position  = 1;
  $query_obj = get_queried_object();
  $permalink = ( empty($_SERVER["HTTPS"] ) ? "http://" : "https://") . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];

  $json_breadcrumb = array(
    "@context"        => "http://schema.org",
    "@type"           => "BreadcrumbList",
    "name"            => "パンくずリスト",
    "itemListElement" => array(
      array(
        "@type"    => "ListItem",
        "position" => $position++,
        "item"     => array(
          "name" => "HOME",
          "@id"  => esc_url( home_url('/') ),
        )
      ),
    ),
  );

  if( is_page() ) {

    $ancestors   = get_ancestors( $query_obj->ID, 'page' );
    $ancestors_r = array_reverse($ancestors);
    if ( count( $ancestors_r ) != 0 ) {
      foreach ($ancestors_r as $key => $ancestor_id) {
        $ancestor_obj = get_post($ancestor_id);
        $json_breadcrumb['itemListElement'][] = array(
          "@type"    => "ListItem",
          "position" => $position++,
          "item"     => array(
            "name" => esc_html($ancestor_obj->post_title),
            "@id"  => esc_url( get_the_permalink($ancestor_obj->ID) ),
          )
        );
      }
    }
    $json_breadcrumb['itemListElement'][] = array(
      "@type"    => "ListItem",
      "position" => $position++,
      "item"     => array(
        "name" => esc_html($query_obj->post_title),
        "@id"  => $permalink,
      )
    );

  } elseif( is_post_type_archive() ) {

    $json_breadcrumb['itemListElement'][] = array(
      "@type"    => "ListItem",
      "position" => $position++,
      "item"     => array(
        "name" => $query_obj->label,
        "@id"  => esc_url( get_post_type_archive_link( $query_obj->name ) ),
      )
    );

  } elseif( is_tax() || is_category() ) {

    if ( !is_category() ) {
      $post_type = get_taxonomy( $query_obj->taxonomy )->object_type[0];
      $pt_obj    = get_post_type_object( $post_type );
      $json_breadcrumb['itemListElement'][] = array(
        "@type"    => "ListItem",
        "position" => $position++,
        "item"     => array(
          "name" => $pt_obj->label,
          "@id"  => esc_url( get_post_type_archive_link($pt_obj->name) ),
        )
      );
    }

    $ancestors   = get_ancestors( $query_obj->term_id, $query_obj->taxonomy );
    $ancestors_r = array_reverse($ancestors);
    foreach ($ancestors_r as $key => $ancestor_id) {
      $json_breadcrumb['itemListElement'][] = array(
        "@type"    => "ListItem",
        "position" => $position++,
        "item"     => array(
          "name" => esc_html( get_cat_name($ancestor_id) ),
          "@id"  => esc_url( get_term_link($ancestor_id, $query_obj->taxonomy) ),
        )
      );
    }

    $json_breadcrumb['itemListElement'][] = array(
      "@type"    => "ListItem",
      "position" => $position++,
      "item"     => array(
        "name" => esc_html( $query_obj->name ),
        "@id"  => esc_url( get_term_link($query_obj) ),
      )
    );

  } elseif( is_single() ) {

    if ( !is_single('post') ) {
      $pt_obj = get_post_type_object( $query_obj->post_type );
      $json_breadcrumb['itemListElement'][] = array(
        "@type"    => "ListItem",
        "position" => $position++,
        "item"     => array(
          "name" => $pt_obj->label,
          "@id"  => esc_url( get_post_type_archive_link($pt_obj->name) ),
        )
      );
    }

    $json_breadcrumb['itemListElement'][] = array(
      "@type"    => "ListItem",
      "position" => $position++,
      "item"     => array(
        "name" => esc_html( $query_obj->post_title ),
        "@id"  => $permalink,
      )
    );

  } elseif( is_404() ) {

    $json_breadcrumb['itemListElement'][] = array(
      "@type"    => "ListItem",
      "position" => $position++,
      "item"     => array(
        "name" => "404 Not found",
        "@id"  => $permalink,
      )
    );

  } elseif( is_search() ) {

    $json_breadcrumb['itemListElement'][] = array(
      "@type"    => "ListItem",
      "position" => $position++,
      "item"     => array(
        "name" => "「" . get_search_query(). "」の検索結果",
        "@id"  => $permalink,
      )
    );

  }

  echo '<script type="application/ld+json">'.json_encode($json_breadcrumb).'</script>';
}

add_action( 'wp_head', 'json_breadcrumb' );

上記の記述をテーマ内の「functions.php」に記載いただければ<head>内に「JSON-LD」形式での構造化データが自動で生成されます。

ただ注意点として上記のコードには以下の特徴があります。
・「タグページ」には対応していません。
・「日付別ページ」には対応していません。
・「作成者ページ」には対応していません。
・「添付ファイルページ」には対応していません。
・デフォルトの「投稿」の情報は表示しない仕様にしています。

上記の理由として制作する際に使用しない、または使用頻度がとても低いということがあります。
ただ、上記のページを追加したい場合でもその他の記述を見ながら追記すれば決して難しくはないかと思いますので必要な方は一度挑戦してみてください。

まとめ

いかがでしたか？
「JSON-LD」形式での構造化データは書き方が分かれば決して難しいものではないと思いますので、まだサイトに構造化データを設置していない方は上記のコードを参考に実装してみてはいかがでしょうか。
次回以降は上記プログラムの簡単なカスタマイズや正しく設置できているかの確認の方法等を見ていきたいと思います。

それでは今回も最後までお付き合いありがとうございました。

コラム