WordPress自作テーマにマイクロデータの設定をしておこう

html5から追加された新しい仕様「マイクロデータ」を自分の作ったWordPressテーマに設定しようと思います。せっかくテーマが完成したのに、やってなかったことがたくさんあるんだなとがっくりきています。サイトを公開して結構経ちましたが、もうちょっとgoogleに認めてもらえるようなサイトにしていこうと思い、サイト管理者のプロフィールを載せることにした時にマイクロデータという言葉を知りました。WordPressにプロフィールを表示するのはとても簡単ですが、せっかく載せるなら、ただの文字列ではなく、ちゃんとgoogleに認識してもらえるデータにした方が良いですよね。ということで、設置します。
　
まず、WordPressにただ名前と写真を載せるだけなら、テキストウィジットに
運営者:きいな
写真：image
のようにすればいいのですが、これだと何の要素なのかgoogleは理解してくれません。そこで、この単語を囲む<div>に、マイクロデータをつけることにしました。更に、これを機に、サイト全体的にマイクロデータを設定しておこうと思います。
　　

どんなマイクロデータがあるのか

マイクロデータは、html要素をgoogleが理解できる「情報」に見せるための仕様です。googleは、<p>や<span>だけではそれがどんな要素なのか判断できないのですが、BreadcrumbListやauthorといった属性を追加することで、機械的に「これが運営者なんだな」と認識することができます。マイクロデータの仕様を制定している組織はいくつかあります。わたしがいつの間にか利用していたのは、以下です。

• microformats.org
• schema.org
• data-vocabulary.org

microformats.orgはhentryというエラーがサーチコンソールに出て知りました。data-vocabulary.orgは、パンくずリストの設置で利用しています。schema.orgは、googleとW3Cが使用例として上げているので、こちらを主に使っていこうと思います。ただし、パンくずリストは、今のままでもgoogleが認識してくれてるし面倒なのでそのままにしておきます。
schema.orgが出している仕様の全リストがこちらのサイトで確認できます。かなりたくさんありますし、全部設定する必要はないかなと思います。

マイクロデータを設定する

ブログで利用できそうなマイクロデータは、
BlogPosting
Person
Article
UserComments
あたりだと思います。そして、schema.orgのマイクロデータは、googleでは、JSON-LDの利用を推奨しています。

通常は、さまざまなオンラインアプリケーションで標準構造化データを宣伝するためのオープンコミュニティschema.orgボキャブラリを使用します。構造化データマークアップは、JSON-LD形式で最も簡単に表現できます。JSON-LD形式は、リンクデータのJavaScript Object Notationの略です。
developers.google.com

HTMLに直接追加することも可能ですが、もっと簡単に、javascriptを追加するだけで設定できるということですね。
将来のAMP化も踏まえてWordPressでJSON-LDの設定をしました。

設定後に、表示された内容がこちらです。

<script type="application/ld+json">{
              "mainEntityOfPage": {
                "@type": "WebPage" ,
                "@id": "http://fwary.tokyo"
              },
              "@context" : "http://schema.org",
              "@type" : "NewsArticle",
              "headline" : "tesuto 503",
              "image" : "{
                     "@type" : "ImageObject",
                     "url" : "イメージのURL",
                     "height" : "320",
                     "width" : "700"
              },
              "publisher" : {
                   "@type" : "Organization",
                   "name" : "fuwafuwafunction",
                   "logo" : "{
                     "@type" : "ImageObject",
                     "url" : "http://テーマ内/images/logo-image.jpg",
                     "height" : "60",
                     "width" : "600"
                    }
              },
              "dateModified" : "2017-02-14T09:20:21+0900",
              "datePublished" : "2017-02-09T16:47:45+0900",
              "author" : {
                   "@type" : "Person",
                   "name" : "kiina"
              },
              "articleSection" : "APP",
               "description" : "今回、一からワードプレスのテーマを作りました。きれいな状態で本サイトにテーマをあてたのに、なぜか本サイトでだけエラーが出ているので同じ内容を作って検証します。確認はこちらです。このように the a"
              }</script>

function.phpにJSON-LDを使った方法で、対象のURLなどをget_bloginfo('name')などを利用して設定しています。

AMP対応のための注意点

AMP対応が今回の目的ではないのですが、今後サイトをAMP化するであろうと見越して、AMPページとして表示されるための必須項目を入れてあります。

アイキャッチ画像のAMP用サイズ

各記事のアイキャッチ画像（サムネイル）は、幅696px以上が推奨されています。png jpg gifのみが利用可能です。SVGはダメ。
　

サイトロゴ画像のAMP用サイズ

サイトのロゴ画像は、指定サイズがあります。幅600px 高さ60pxのpng jpg gifのみが利用可能です。SVGはダメ。
サイトロゴは、今まで文字列をCSSで装飾していたので、作らないといけなくなりました。ロゴなのにSVGが使えない。
　

AMP指定の時間の表示方法

ISO8601に準じていないといけないそうです。

get_the_date(DATE_ISO8601, strtotime('Y/n/j'));

更新日も、投稿日も上のようにするとできました。
　

構造化エラーの確認

アップロードして、コンソールからheadにマイクロデータが入っているか確認します。一応入っていたようですが、URLなど一つづつ確認しました。JSONが正しく書けているか心配なので、チェックすることにしました。
JSONのエラーチェック/syncerさん
google 構造化データのテスト
　
エラー無し。設定した全ての要素がgoogleに認識されました。これで、目的のマイクロデータの設置が完了しました。author（運営者）の詳細は、google+に紐付いている方がよいようなので、別途設定しようと思います。それからツイッターとフェイスブック、他のソーシャルメディアの連携のことも早く片付けたい。
調べたのですが、schema.orgのマイクロデータが他のソーシャルカードでも利用できるのではないかと思うのですが。
　
参考サイト：
https://syncer.jp/Web/AMP/
https://q-az.net/amp-schema-org-wordpress/
https://developers.google.com/search/docs/data-types/articles?hl=ja