SEO
Search Consoleの「構造化データ」で Microformats の hentry にエラーが出ていたので修正

投稿 | | カテゴリー SEO, WordPress
Search Consoleの「構造化データ」で Microformats の hentry にエラーが出ていたので修正

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

構造化データ

構造化データとは、記事のジャンルやタイトル、本文、著者、そして会社名や連絡先など、HTMLタグだけでは難しい詳細な意味付けを行うマークアップです。

人間がウェブページを見たとき、どれが会社名でどれがその会社への連絡先か、といったことはおおよそ見当がつきますが、検索エンジンなどクローラはHTMLタグだけでこれらの内容を正確に理解することができません。構造化データによるセマンティック(意味的)なページにすることで、機械に対してもより正しい内容を伝えやすくなります。

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

Google Search Consoleの「構造化データ」でエラーがある状態
Google Search Consoleの「構造化データ」でエラーがある状態

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

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

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

WordPressの記事に自動で追加される hentry クラス を削除する例
add_filter( 'post_class', function ( $classes ) {
  global $post;

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

  return $classes;
});

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

記事のタイトル

hentryの必須項目の中でも「記事のタイトル」はschema.orgitemprop属性とclass属性を併記する形で指定できるので簡単です。タイトルや記事概要など、このタイプのプロパティはエラーになっていなかったのでそのままにしておきます。

WordPressの記事のタイトルと本文のクラス属性の例
// 記事のタイトルは class="entry-title"
the_title( '<h2 class="entry-title" itemprop="headline">', '</h2>' );

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

最終更新日時

登録日時と最終更新日時が同じ「投稿したての記事」とかは最終更新日時を吐き出さないようにしていたのですがそれはNGでした。「登録日時」が必須なのではなく「最終更新日時」が必須だそうです。非表示でもいいのでとりあえず全ての記事で最終更新日時を吐き出すように変更しました。

内容はDatetime Design Patternというフォーマット文字列に倣う必要があるようですが、<time>datetime属性を使用して正しい値が指定されていれば問題ないかなと思います。
Datetime Design Pattern · Microformats Wiki

WordPressの記事の登録日時と最終更新日時のクラス属性の例
// 登録日時と最終更新日時の両方を用意する(要 日時フォーマット文字列)
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>';

著者

hCardというフォーマットに対応する必要があるらしく、最初は指定するクラス名がわかりませんでした。基本的に公式Wikiにあるサンプル通りでいいと思います。
hCard 1.0 · Microformats Wiki

class="vcard"を用意して、その中に著者名のclass="fn"、URLのclass="url"、会社・団体のclass="org"とか指定します。他にもニックネームとか電話番号とかいろいろありますが必須なのは著者名(class="fn")だけみたいです。schema.orgと併用する形で修正しました。

WordPressの記事の著者情報のクラス属性の例
// schema.orgと併用
echo '<span class="vcard" itemprop="author"><span class="fn" itemprop="name">丸出駄目男</span></span>';

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれないコメントは無視されますのでご注意ください。(スパム対策)