[WP]WordPressでmicrodata付きのプロフィールを作る

何故構造化データを使う必要があるのか？

この辺りはGoogleの説明がわかりやすいかと思いますので引用します。

Google がウェブサイトのコンテンツを構造的に把握できれば、より的確な、しかも人目を引くコンテンツとして Google ユーザーに提示することができます。
たとえば、あるページの商品リスティングやイベント、レシピ、レビューなどが構造化されたデータだとわかると、Google のアルゴリズムは「リッチ スニペット」を追加して検索結果を拡張します。
さらにそうしたデータは、 ナレッジグラフ のパネルや Google Now カードに表示されることもありますので、コンテンツについて広く知らせることができます。
引用元: Google ウェブマスター向け公式ブログ: 構造化データを活用しよう！ – 2 つのアップデート.

とりあえず構造化データのサンプルを拾ってきます。

[html]
<div itemscope itemtype="https://data-vocabulary.org/Person">
私の名前は<span itemprop="name">東京太郎</span>ですが、
みんなから「<span itemprop="nickname">東太</span>」と呼ばれています。
私のホームページは、
<a href="https://www.example.com" itemprop="url">www.example.com</a> です。

<span itemprop="address" itemscope
itemtype="https://data-vocabulary.org/Address">
<span itemprop="region">東京都</span>
<span itemprop="locality">港区</span>
</span>
に住んでおり、<span itemprop="title">エンジニア</span>
として <span itemprop="affiliation">ACME 社</span>に勤めています。
私の友だち:
<a href="https://darryl-blog.example.com" rel="friend">次郎</a>、
<a href="https://edna-blog.example.com" rel="friend">三郎</a>
</div>
[/html]
引用元：リッチ スニペット – 人物 – ウェブマスター ツール ヘルプ

要するにこのマークアップに沿った著者データを出力できるようにWordPressの設定をすれば良いわけです。

使うタグは「the_author_meta」です。

足りない設定項目を追加する

いざWordPress化させた結果がこちら、

[php]
<div itemscope itemtype="https://data-vocabulary.org/Person">
著者　：<span itemprop="name"><?php the_author_meta( ‘display_name’ ); ?></span>
あだ名：<span itemprop="nickname"><?php the_author_meta( ‘nickname’ ); ?></span>
ウェブサイト：<a href="<?php the_author_meta( ‘user_url’ ); ?>" itemprop="url"><?php the_author_meta( ‘user_url’ ); ?></a>

<span itemprop="address" itemscope
itemtype="https://data-vocabulary.org/Address">
<span itemprop="region">東京都</span>
<span itemprop="locality">港区</span>
</span>
に住んでおり、<span itemprop="title">エンジニア</span>
として <span itemprop="affiliation">ACME 社</span>に勤めています。
私の友だち:
<a href="https://darryl-blog.example.com" rel="friend">次郎</a>、
<a href="https://edna-blog.example.com" rel="friend">三郎</a>
</div>
[/php]

後半が設定できていませんね。

それもそのはずで、交友関係や住所なんて項目がそもそもデフォルトのプロフィール項目に無いんです。

だからサンプルのコードでWordPress化させられるのはここまで・・・というわけでも無かったり。

だったら作ればいいだろう

どっかの筋肉モリモリマッチョマンの変態がいいそうな言葉ですが。

無ければ追加しちゃえばいいのです。
[php]
//「ユーザー」プロフィールのカスタマイズ
function update_profile_fields( $contactmethods ) {
//項目の削除
unset($contactmethods[‘aim’]);
unset($contactmethods[‘jabber’]);
unset($contactmethods[‘yim’]);
//項目の追加
$contactmethods[‘twitter’] = ‘Twitter’;
$contactmethods[‘facebook’] = ‘Facebook’;
$contactmethods[‘googleplus’] = ‘GooglePlus(profile_url)’;
$contactmethods[‘affiliation’] = ‘勤務先’;
$contactmethods[‘author-role’] = ‘所属部署’;
$contactmethods[‘author-title’] = ‘肩書’;
return $contactmethods;
}
add_filter(‘user_contactmethods’,’update_profile_fields’,10,1);
[/php]

この中で構造化データに使用するものはこの3つです。

title 個人の肩書きです（例: 財務担当マネージャー）。
role 個人の職種です（例: 経理）。
affiliation（org） 個人が所属する組織（雇用主など）の名前です。fn と org の値がまったく同じ場合、この情報は個人ではなく会社または組織を参照しているものと解釈されます。

[php]
<div itemscope itemtype="https://data-vocabulary.org/Person">
著者　：<span itemprop="name"><?php the_author_meta( ‘display_name’ ); ?></span>
あだ名：<span itemprop="nickname"><?php the_author_meta( ‘nickname’ ); ?></span>
ウェブサイト：<a href="<?php the_author_meta( ‘user_url’ ); ?>" itemprop="url"><?php the_author_meta( ‘user_url’ ); ?></a>
勤務先：<span itemprop="affiliation"><?php the_author_meta( ‘affiliation’ ); ?></span>
所属部署：<span itemprop="title"><?php the_author_meta( ‘author-role’ ); ?></span>
<span itemprop="role"><?php the_author_meta( ‘author-title’ ); ?></span>
</div>
[/php]

で、こうなりました。

これをsingle.phpの記事ループの直後に設置します。

*今回追加したコード
[php]
<aside class="row p-author">
<figure class="three columns"><?php echo get_avatar(get_the_author_meta(‘user_email’),"150","mm",get_the_author_meta(‘display_name’));?></figure>
<dl class="nine columns" itemscope itemtype="https://data-vocabulary.org/Person">
<dt>著者</dt><dd itemprop="name"><?php the_author_meta( ‘display_name’ ); ?></dd>
<dt>ウェブサイト</dt><dd><a href="<?php the_author_meta( ‘user_url’ ); ?>" itemprop="url"><?php the_author_meta( ‘user_url’ ); ?></a></dd>
<dt>勤務先</dt><dd itemprop="affiliation"><?php the_author_meta( ‘affiliation’ ); ?></dd>
<dt>所属部署</dt><dd><span itemprop="title"><?php the_author_meta( ‘author-role’ ); ?></span><br/><span itemprop="role"><?php the_author_meta( ‘author-title’ ); ?></span></dd>
</dl>
</aside>
[/php]
figureタグ内は、Gravatarの画像をよびだしています。

Gravatarを設定していない場合はダミー画像が表示される（はず）です。

とりあえず設定してみたい方はお試しください。

ちなみにテスト環境使うのを面倒臭がってdisplay: none;で調整したりすると怒られます。

エラー: This information will not appear as a rich snippet in search results, because it is contained in a hidden HTML element. Except in special circumstances, Google won’t display content that is not visible to the user. You should mark up the text that actually appears to your users when they visit your web pages.

エラー：それは隠されたHTML要素に含まれているため、この情報は、検索結果での豊富なスニペットとして表示されません。特殊な状況を除いて、Googleはユーザーには表示されませんコンテンツが表示されません。あなたは彼らがあなたのWebページを訪問したときに、実際にユーザーに表示されるテキストをマークアップする必要があります。