photo credit: fall 2013 hackNY student hackathon / hackNY

何か去年末くらいから目にする頻度が増えつつあるように感じる単語。
それが『構造化データ』
特にSEOというのを調べると頻出している単語です。
うん、よくわからないですよね専門用語とか面倒くさいですよね。

ボク自身たまに見る単語であっても「（どーでもいいよ……）」と放置していた、それが構造化データ。
ところが、すげー久しぶりにGoogleウェブマスターツールを開いたら、メニュー最上部に表示されている文字が『構造化データ』だったので、これはブログネタになるんじゃないか？と重い腰を上げたわけです。

その程度なので、構造化データというものに対応すると、どんなメリットがあるかはまったく実感を得ていません。
日々のアクセス数が数百数千程度なウチ程度のブログと同程度のブログ様であれば、たぶん理解する必要なんてないと思います！
なんとなく雰囲気だけ知って、なんとなくで対応しておけば必要十分だと思います！

150421-0001

構造化データって何？

例えばこの記事を簡略に説明すると、以下のような感じになります。
『CROCODILE NOTEBOOKを運用している@trmdが「Googleウェブマスターツールは構造化データを重要視してるようだからWordPressで対応してみました」という記事を2015年4月21日に更新しました。カテゴリーはインターネット内のWordPressで、記事のURLはhttp://mag.torumade.nu/?p=13933です』

この一文に含まれている情報個々を抜き出すと、以下のような感じになります。

サイト名：CROCODILE NOTEBOOK
更新者：@trmd
記事タイトル：Googleウェブマスターツールは構造化データを重要視してるようだからWordPressで対応してみました
更新日：2015年4月21日
カテゴリ：インターネット、WordPress
URL：http://mag.torumade.nu/?p=13933

人は読み取れる情報だけど、検索プログラムなどでは読み取れないらしいです。
そこで単語それぞれの意味や目的がハッキリするよう、あらかじめ決められた目印を与えると、プラグラムは単語の意味を読み取れるようになるらしいです。
この目印を与えることを『マークアップ』と呼び、マークアップされて機械的に読み取れる単語で構成された文章を『構造化データ』と呼ぶそうです。

WordPressブログを構造化データに対応するには

なるほど構造化データとは文章内の単語に目印を付けるわけか。
って、ブログの記事でいちいちそんなことしてらんねーし、いままでに更新した記事とかどうやって対応すんだよ！的にキレていたのが、ボクが構造化データに対応するのを後回しにしていたいちばんの理由。
というか、そんなの無理じゃん！と。
しかし！Google先生が要求してらっしゃるからには、なにか対策があるに違いない。

調べた。

あった。

文章中の単語に目印を付けなくても、どこかでソレとわかるように宣言してあればGoogle先生的には十分らしいです。
具体的には『ここから下に目印をつけるよ』的な宣言として『itemscope itemtype=”http://schema.org/Article”』を入れる。
そして『目印の名前と内容』として『<meta itemprop=” ” content=” ” />』というのを書き連ねる。
これだけ。

いままでに更新した記事であってもテンプレート（テーマ）を修正するだけで対応可能なので、これだったら構造化データも（たぶん）こわくないんじゃないかなと重い腰を上げる決心ができたわけです。

個別記事を構造化データに対応してみる（前準備編）

構造化データに対応するため、WordPressの機能で必要なのは『アイキャッチ画像の利用』と『パンくずリスト』の2つ。
どちらもfunction.phpの修正かプラグインの利用で、すでに実現している方も多いと思います。
以下ではfunction.phpに必要なものを追加する方法を採用しています。
アイキャッチやパンくずを利用していない方は、以下をそのまま利用可能です。
すでに実現している方は、出力される内容（HTML）がこれと近くなるよう既存のプラグインやPHPを修正するか、以下のものに差し替えて調整する必要があります。

アイキャッチを利用可能にする

function.phpに『add_theme_support(‘post-thumbnails’)』の一文が記述されているか確認します。
記述されていない場合は以下をfunction.phpの最後にコピペしてください。

<?php add_theme_support('post-thumbnails'); ?>

記事中に画像を張り付けないことが多い場合や目印になる画像を設定したくない場合、この1行の記述は不要です。

パンくずリストを利用可能にする

パンくずリストとは『カテゴリを階層的に表したときの○○にある記事を読んでますよ』という情報らしいです。
この記事の場合であれば『トップページ＞インターネット＞ WordPress』といった階層になります。
これを設定して巧いことGoogle先生が読み取ってくれると、こんな感じで検索結果に反映されます。

いままでは『トップページ＞インターネット＞ WordPress』でひとつのまとまりとして解釈されている場合もあるらしいのですが、これを構造化してあげると『トップページ（の中にある）インターネット（が親カテゴリとなる）WordPress（というカテゴリ）』的にまさに構造が具体化されるかもしれないらしいです。

これを実現するにもfunction.phpにすこし書き足す必要がありますが、とてもスッキリしたものを作成されている方をみつけたので、当ブログではこれを利用させていただきました。

参考：WordPress プラグインなしでパンくずリストを表示 | いわしブログ

レイアウトはCSSで調整してくださいね。

個別記事を構造化データに対応してみる（本番編）

個別記事を構造化データに対応させましょう。
まず、テンプレートのヘッダー（header.php）から『<BODY 』で書き始められているHTMLタグを探します。
※テーマによってはheader.php以外に記述されている場合もあります。

『<BODY 』
　↓　の後ろへ以下のように書きくわえます。
『<BODY itemscope itemtype=”http://schema.org/Article” 』

これで『ここから下に目印をつけるよ』的な宣言が完了です。

次にテンプレートの単一記事の投稿（single.php）を開いて、テンプレートのいちばん上に以下をコピペします。
『目印の名前と内容』を書き連ねる準備がコレです。

<meta itemprop="headline" content="<?php wp_title(' » ',true,'right'); ?><?php bloginfo('name'); ?>">
<meta itemprop="description" content="<?php the_excerpt(); ?>">
<meta itemprop="author" content="■■■■■■■■■■■">
<meta itemprop="datePublished" content="<?php echo esc_attr( get_the_date( 'c' ) );?>" />
<meta itemprop="image" content="<?php echo catch_that_image(); ?>" />
<meta itemprop="url" content="<?php echo get_permalink(); ?>" />
<meta itemprep="copyright" content="★★★★★★★★★★★" />

itemprop=”headline”は記事のタイトルとブログ名称の宣言になります。

itemprop=”author”は著者情報です。名前を記述しても良いですし、Googleに特化させちゃうのであればGoogle+などのユーザーURLを記述しても良いかもしれません。

itemprop=”description”は記事の概要で、ブログに設定された概要の表示方法そのままが出力されます。
the_excerpt以外で概要を出力している場合は、contentにその命令文で書き換えてください。

itemprop=”datePublished”は記事の更新日時で、GMT+9:00で表示されます。
GMT+9:00にならない場合、function.phpに『date_default_timezone_set(‘Asia/Tokyo’);』を記述してください。

itemprop=”image”はアイキャッチ画像です。
アイキャッチ画像が登録されていない場合、記事中にある最初の画像が代入されます。

itemprop=”url”は記事のURLです。

itemprep=”copyright”はプライバシーポリシーや著作権情報、ブログについての説明ページにあたるURLを記載してください。
このブログの場合『itemprep=”copyright” content=”http://mag.torumade.nu/?p=10825″』となります。
不要の場合は行を削除してください。

構造化データに対応できたかテストしてみる

Google先生が用意している階層化データのテストツールを利用します。

LINK：Structured Data Testing Tool

150421-0002
個別記事を開いてURLをコピーして、テストツールの『URL を取得』をクリックすると表示される入力フォームにコピーしたURLを貼り付けたら『検証』ボタンをクリックします。
検証を開始するとURLを参照して、設定されている構造化データを読み取ります。
読み取った結果は右側に表示されるので、下の画像と同様の結果が表示されていることを確認してください。
（項目を削除している場合、その内容は表示されていません）

構造化データのメリット？

もしかしたら検索結果が今までよりイイカンジに出力される、かもしれない。
直接的なメリットは、それだけのようです。
関連性についてGoogleの独断だけではなく、ブログオーナーの意図を（わずかでも）汲み取ってもらえるようになるとしたら、検索参照数の多いサイトほどメリットは大きくなると思います。
検索にあまりかからなかったブログなどでも、関係性があると判断されれば検索結果に出力される機会が増えるかもしれません。
たったこれだけのことっぽいので、いますぐむりして頑張って構造化データに対応する必要はないように思います。
でも、もしかしたら遠くない将来では必須になるかもしれないと考えると、先行して対応するメリットが少しくらいはあるのかもしれないと期待しちゃうわけです。

ちょっと詳しく

今回はブログ全般て活用できる『http://schema.org/Article』で宣言していますが、レビューサイトであれば『http://schema.org/Review』、レシピであれば『http://schema.org/Recipe』など、最適なものが異なります。
また、レビューサイトであれば★の数などを設定するための『reviewRating』なども用意されています。
ブログの方向性や記事の内容に合わせて、最適な構造を伝達できるよう調整するためには、http://schema.org/を参照してください。

HTMLでは通常、head内にmetaで概要などを宣言しているため『<meta name=”description” itemprop=”description” content=” “>』などのように記述しているケースが稀に見受けられます。
Other changes to HTML5 ： HTML Microdataに説明されている通り、itemprop属性を持つmetaはname、http-equiv、charsetが含まれないようにする必要があります。
また、itemprop属性を持つmeta（link）要素についてはbody内のほぼどの位置に記述しても問題ありません。

最後に必要なのは『信じる心』

無事に参照されているようであれば、あとはGoogleにこれらが反映されることを信じて、反映される日がくることを願って、ひたすらに待つだけです。健気に待つだけです。対応したことを忘れてしまうのもアリです。
大事なのは『構造化データに対応したからと言って、明確なメリットがあるとはだれも約束してくれない』ということ。
ちゃんと設定できていなくても評価が減点されることはないらしいので、軽い気持ちで対応するのがヨシです。
そしてもっと大事なのは『これらの構造化データ対応がGoogleの求める内容を満たしているか』まったくわからないこと。
デタラメすぎる点ですとか間違えてる点ですとかありましたら、FacebookやTwitterからご指摘いただけると嬉しいです。