emwaiblog

先日、グーグルのSearch Console（旧ウェブマスターツール）で、「構造化データ」の項目を開いたら大量にエラーが出ていたので対処したメモです。

構造化データ

構造化データとは、記事のジャンルやタイトル、本文、著者、そして会社名や連絡先など、HTMLタグだけでは難しい詳細な意味付けを行うマークアップです。人間がウェブページを見たとき、どれが会社名でどれがその会社への連絡先か、といったことはおおよそ見当がつきますが、検索エンジンなどクローラはHTMLタグだけでこれらの内容を正確に理解することができません。構造化データによるセマンティック（意味的）なページにすることで、機械に対してもより正しい内容を伝えやすくなります。

というわけで、今回エラーが出ていたのはmicroformats.orgのhentryというブログ記事の構造化データに「必須項目のauthor（著者）とupdated（更新日）がない」というものです。

普段は、HTML5で使えるschema.org（パンくずのData-Vocabulary.org含む）しか使わないのでMicroformatsがよう分かりません。とりあえずclass属性を使用するんだなぐらいの認識です。

エラーは、各記事（<article>）にclass="hentry"を充てているのに必須項目の著者や最終更新日のクラス名がないぞ！と怒っています。うーん、classで指定すんの不便です。ググってみても「<article>のclass="hentry"のクラスを取っ払ってMicroformatsをやめてしまう」なんてのもあるし、きっと流行らんでしょうね。

WordPress以外では全く使わない代物ではありますが、「トル」のはなんとなく解決しない感じで気持ち悪いので「イキ」の方向で修正することにしました。

add_filter( 'post_class', function ( $classes ) {
  global $post;

  $index = array_search('hentry', $classes);
  if ( $index !== false ) unset( $classes[ $index ] );

  return $classes;
});

Microformatsのhentryのフォーマットについては公式のWikiがあるのでそちらを参考にしました。新しくh-entryというバージョンが用意されているようですが、現時点でそれほど未来を感じないので今回は無視します。
hentry · Microformats Wiki

// 記事のタイトルは class="entry-title"
the_title( '<h2 class="entry-title" itemprop="headline">', '</h2>' );

// 記事の本文は class="entry-body"
<div class="entry-body">〜</div>

// 登録日時と最終更新日時の両方を用意する（要 日時フォーマット文字列）
echo '<time class="published" datetime="2016-11-01 0:00" itemprop="datePublished">2016年11月1日 0時0分</time>';
echo '<time class="updated" datetime="2016-11-01 0:00" itemprop="dateModified">2016年11月1日 0時0分</time>';

// schema.orgと併用
echo '<span class="vcard" itemprop="author"><span class="fn" itemprop="name">丸出駄目男</span></span>';

以上、Search Consoleの「構造化データ」でエラーが出ていたMicroformatsのhentryの修正でした。その後確認すると無事エラーは消えていました。世間の流れ的にも使いやすさ的にもschema.orgだし、で今後も使うかわかりませんが、まぁ両対応しておくに越したことはないので、また何かしらあったらやるだけやってみます。