【コピペ用】WordPressブログの構造化データ作ってみました（ISO 8601 形式対応）

先日 Google から公開されたこちらのエントリー、

こちらを受けて、本エントリーを認めている次第です。

これまでも「更新日」「最終更新日」を構造化データ対応をしていたのですが、ISO 8601 形式にはしておらず、また JSON-LD での対応もしていなかったので、これを機会にしっかり対応してしまおうというのが趣旨でございます。

WordPressブログ用の構造化データ（コピペ版）

「兎にも角にも、自分のブログも構造化データ対応させたい」という方は以下のソースコードを footer.php （</body>タグの直前に貼り付ければOK）にコピペしてしまいましょう。

あ、もちろん一部、著者名など書き換えが必要ですので、そこだけは変更お願いします。

//記事ページのみに構造化データを出力
<?php if ( is_single()) : ?>

  //サムネイルを取得
  <?php
     $thumbnail_id = get_post_thumbnail_id($post);
     $imageobject = wp_get_attachment_image_src( $thumbnail_id, 'full' );
  ?>

  //ここから構造化データの記述
  <script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "BlogPosting",
    "mainEntityOfPage":{
      "@type":"WebPage",
      "@id":"<?php the_permalink(); ?>"
    },
    "headline":"<?php the_title(); ?>",
    "image": [
      "<?php echo $imageobject[0]; ?>"
    ],
    "datePublished": "<?php echo get_date_from_gmt(get_post_time('c', true), 'c');?>",
    "dateModified": "<?php echo get_date_from_gmt(get_post_modified_time('c', true), 'c');?>",
    "author": {
      "@type": "Person", //組織の場合は"Organization"と記入
      "name": "<?php the_author(); ?>" //毎回同じ著者の場合は直接記入してもOK
    },
    "publisher": {
      "@type": "Organization", //個人の場合は"Person"と記入
      "name": "社名や個人名を記入", //ここに社名や個人名を記入
      "logo": {
        "@type": "ImageObject",
        "url": "ロゴのURLを記入" //ここにロゴのURLを記入
      }
    },
    "description": "<?php echo get_the_excerpt(); ?>"
  }
  </script>

<?php endif; ?>

※非AMPの仕様です

これで完了です。

あとは、構造化データテストツールで、運営しているブログの記事ページのURLを入力してみてください。

下図のように「エラーなし」「警告なし」と出れば問題ありません。

最終更新日は検索結果に反映されるのか

されます、ちゃんと反映されます。もちろん内容も修正している必要もありますが、これまで２ヶ月近く日付が変わらなかったのに、対応後すぐに反映されました。

対応前（社内スタッフから共有時に送ってもらった画像）

対応後

ISO 8601 形式、バンザイ。（たまたまの可能性もあります）

構造化データの解説

どうして先程のようなコピペコードになったのか気になるという方は以下もご覧ください。

参考にしたサイト

Googleの公式ヘルプページを参考にしています。

ちなみに公式で公開されていたサンプルの構造化データは以下のコードですが、

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "NewsArticle",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://google.com/article"
  },
  "headline": "Article headline",
  "image": [
    "https://example.com/photos/1x1/photo.jpg",
    "https://example.com/photos/4x3/photo.jpg",
    "https://example.com/photos/16x9/photo.jpg"
   ],
  "datePublished": "2015-02-05T08:00:00+08:00",
  "dateModified": "2015-02-05T09:20:00+08:00",
  "author": {
    "@type": "Person",
    "name": "John Doe"
  },
   "publisher": {
    "@type": "Organization",
    "name": "Google",
    "logo": {
      "@type": "ImageObject",
      "url": "https://google.com/logo.jpg"
    }
  },
  "description": "A most wonderful article"
}
</script>

このサンプルはそのまま利用できなかったので、このようなエントリーにしてまとめています。

変更点

@typeについて

サンプルでは “@type”: “NewsArticle”, となっています。

これは、このサイトがどのようなサイトなのかを表すものなのですが、公式によると、Article、NewsArticle、BlogPostingの３つに対応しているようです。

なのでこの中で自分のサイトのスタイルにあったものをチョイスすれば良いです。

ほとんどのブログ運営者の場合、ニュース的な内容も一部含むものの基本的にブログ、だと思いますので、BlogPostingで良いと思います。逆にニュースサイトの運営者は、Article や NewsArticle にしましょう。

東洋経済オンラインさんやGIGAZINEさんはきちんと構造化データ対応されていて NewsArticle で指定されていました。NewsArticle か BlogPosting か30分以上悩む場合は、Article にしておくのもありだと思います。

実はこのタイプ選定にすごく悩んで、お恥ずかしながら「ブログとは」と10年以上ぶりにググりました。

“image”について

image の項目ですが、Google さんの推奨環境がまぁまぁな鬼仕様となっておりまして、コピペ用構造化データでは現実的な仕様にさせてもらっています。

というのもまずは以下をご覧ください。

適切な画像が選択されるようにするために、アスペクト比が 16×9、4×3、1×1 の高解像度画像（300,000 ピクセル以上の画像）を複数指定してください。

参照）https://developers.google.com/search/docs/data-types/article?hl=ja

えー！なんだってー！

ヘルプページには画像サイズは696ピクセル以上と記載されていましたが、Google砲も考慮すると1200px以上にする必要があります。

その上 300,000 ピクセル以上ということになると、毎度アスペクト比ごとに画像を作り直すのも面倒です。実際に作業した場合は、たぶんこんな選択肢を取ることに。

• 1200px × 675px （16×9）
• 1200px × 900px （4×3）
• 1200px × 1200px （1×1）

この３サイズを作って、サーバーにアップして、function.php に add_image_size を書き込んで構造化データの記述に呼び出す、という作業をする必要がありそうです。

おそらく毎回３サイズを作るのは大変なので、最低でも１枚は用意されているであろうアイキャッチ画像をフルサイズで呼び出す、という仕様にしています。

３枚くらい余裕で作れるぜ！という方は、お手数ですがカスタマイズをお願いします。

“datePublished”と”dateModified”について

公開日（datePublished）と最終更新日（dateModified）についての項目です。

コピペすれば一発OKなのですが、実はここに一番苦労しました。

まず、ISO 8601 形式 で呼び出さないという点。

ISO 8601 形式とは、日付の記述形式のことで、

2015-02-05T08:00:00+08:00

こんな感じで記述されていればOKです。

年月日を記載して、間に「T」が入って、その後に時分秒を記載、そして最後に世界標準時刻との時差を書き足すという形です。

幸いWordPressはPHPが使えます。ISO 8601 形式に対応するため、

<?php echo esc_attr( get_the_date( ‘c’ ) );?>
<?php echo esc_attr( the_modified_date( ‘c’ ) );?>

と記述することで対応できるのですが、この書き方ですと、

2015-02-05T08:00:00+00:00

となってしまい、グリニッジ標準時で出力されてしまいます。（最後が+00:00となってしまう）

サンプルは +08:00 のアメリカのタイムゾーンになっていますが、私たち日本人は東京のタイムゾーンである、+09:00 で出力しなければなりません。

WordPressには現地時間を呼び出してくれる関数が優秀にも用意されていまして、それが date_i18n() という関数です。

ただ、この関数が少々古いらしく、今回は get_date_from_gmt() を利用しています。（ちなみにWordPressのオンラインマニュアルであるcodexには get_date_from_gmt() の日本語ページがまだ用意されていません）

おわりに

今回、Googleのサンプルを参考にコピペで利用できる構造化データを作成しましたが、この中にはパンくずリストの構造化データは含まれていません。

弊社の場合、

• パンくずリスト … microdata 形式
• その他は … JSON-LD 形式

※「microdata」「JSON-LD」「RDFa」の違いの説明は今回は割愛しますが気になる方は下記リンクから

構造化データの形式は混在していても良いとのことですので、この形で対応しています。

構造化データは大変奥が深く、Googleが推奨する項目以外にも、実にたくさんの項目が存在しています。どこまで対応するかは、各運営者の考え方次第だとは思いますが、まずは Google が推奨する対応から始めてみることをオススメします。