WordPress 構造化データを動的に出力する方法

WordPress で投稿の構造化データを動的に出力する方法を紹介します。
例えば、ページごとに構造化データを設定したい時に便利な方法です。

1. 構造化データとは？
   1. 基本的な記述方法
   2. 注意点
2. mainEntityOfPage（URL） について
3. headline（見出し） について
4. image（画像） について
5. datePublished（主に記事の公開日） について
6. dateModified（最終更新日） について
7. author（著者） について
8. publisher（組織情報） について
   1. ロゴのガイドライン
9. description（説明） について
10. 構造化データのテスト

構造化データとは？

構造化データとは、検索ロボットにサイトの内容を適切に理解させることのできるメタデータです。
記述方法は「Microdata」「RDFa」「JSON-LD」の3つがありますが、ここでは JSON-LD の記述方法を使用して説明を進めます。

基本的な記述方法

基本的な記述方法として、投稿の詳細ページに構造化データを出力する方法を紹介します。
次のコードを詳細ページのテンプレートに追加します。

<?php

  // image（画像）の指定のためにアイキャッチ画像の情報を取得します

  $thumbnail_id = get_post_thumbnail_id($post->ID); // アタッチメントIDの取得

  $image = wp_get_attachment_image_src( $thumbnail_id, 'full' ); // アイキャッチの情報を取得

  $src = $image[0];    // URL

  $width = $image[1];  // 横幅

  $height = $image[2]; // 高さ

 ?>

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

  {

    "@context": "http://schema.org",

    "@type": "NewsArticle",

    "mainEntityOfPage":{

      "@type":"WebPage",

      "@id":"<?php the_permalink(); ?>"

    },

    "headline": "<?php echo get_the_title(); ?>",

    "image": {

      "@type": "ImageObject",

      "url": "<?php echo $src; ?>",

      "height": <?php echo $height; ?>,

      "width": <?php echo $width; ?>

    },

    "datePublished": "<?php echo get_the_date(DATE_ISO8601); ?>",

    "dateModified": "<?php if ( get_the_date() != get_the_modified_time() ){ the_modified_date(DATE_ISO8601); } else { echo get_the_date(DATE_ISO8601); } ?>",

    "author": {

      "@type": "Person",

      "name": "<?php the_author_meta('nickname'); ?>"

    },

    "publisher": {

      "@type": "Organization",

      "name": "<?php bloginfo('name'); ?>",

      "logo": {

        "@type": "ImageObject",

        "url": "<?php echo get_template_directory_uri(); ?>/img/publisher-logo.png",

        "width": 600,

        "height": 60

      }

    },

    "description": "<?php echo get_the_excerpt(); ?>"

  }

</script>

投稿の情報が正しく取得できるテンプレートにコードを追加してください。

注意点

画像の設定に一癖あるの注意してください。
設定する項目や書式は定期的に変更される恐れがあります。
一度設定したら終わりではなく、定期的に情報を収集して内容を更新して行きましょう。

mainEntityOfPage（URL） について

headline（見出し） について

image（画像） について

この方法は、アイキャッチ画像を有効化していることを前提にしています。
アイキャッチ画像の詳しい設定方法はWordPress アイキャッチ画像の表示とカスタマイズ方法をご覧ください。
機能を有効化できな場合は静的な記述に変更してください。

datePublished（主に記事の公開日） について

日付は「ISO8601」形式で指定します。

dateModified（最終更新日） について

日付は「ISO8601」形式で指定します。最終更新日がない場合は if文で datePublished と同じ日付が出るようにします。

author（著者） について

author name※必須

記事の著者を指定します。

著者名の指定には the_author_meta のニックネームを利用します。
WordPress の管理画面から、投稿権限を持つユーザーのニックネームを入力してください。
ニックネームを使用しない場合は静的な記述に変更してください。

publisher（組織情報） について

publisher※必須

該当する記事を寄稿する組織名を指定します。指定する内容は「組織名」「ロゴ画像（url, height, width）」を必ず指定します。

ロゴのガイドライン

publisher ではロゴ画像を指定する必要があります。
画像の形式は JPG, PNG, GIF, SVG から洗濯します。画像サイズは 600 x 60px の矩形に収めてください。

description（説明） について

description※必須

記事の短い説明を指定します。

get_the_excerpt() を使って抜粋を出力します。抜粋の入力がなければ本文冒頭を引用します。
任意の説明を指定したい場合は、抜粋に説明を入力するようにしてください。

構造化データのテスト

入力内容を確認するために Google が提供している Structured Data Testing Tool を利用して、入力内容を確認することができます。
チェックツールで公開されている URL を指定するか HTML ソースをアップロードして、構造化データが正しく出力されているかを確認してください。

まとめ

WordPress で投稿の構造化データを動的に設定する方法を紹介しました。