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