WordPressにマイクロデータschema.orgのArticleを導入

このたびマイクロデータschema.orgのArticleを導入してみました。このことによってどんなメリットがあるかわかりませんが、とにかく構造化データマークアップなるものを体験してみました。

In-depth articlesの対象になるかも

メリットがわからないと書きましたが、schema.orgのArticleを導入するとGoogleの「In-depth articles」の対象になります。

[img-link url=”http://www.suzukikenichi.com/blog/introducing-in-depth-articles/?utm_source=feedburner&utm_medium=feed&utm_campaign=FeedBurner” title=”Google、「In-depth articles」を導入。質が高い、深く掘り下げた記事を別枠で検索結果に表示。 | 海外SEO情報ブログ”]

メリットはそれくらいなのですが、マイクロデータを使うと検索エンジンによるページ情報の把握がとてもやりやすいことは想像が付きます。

SEOの第一歩は検索エンジンにページを良く知ってもらうことです。

であれば、少しずつでもマイクロデータを導入する方向に動いたほうがいい気がして、下記の記事を参考にschema.orgのArticleを導入しました。

[img-link url=”http://hyper-text.org/archives/2012/12/html5_microdata_getstarted.shtml” title=”Microdata を使ってみよう。サンプルソースで学ぶ Microdata | WWW WATCH”]

導入した属性

schema.orgのArticleには多くの属性が用意されているのですが、今回は上記記事で言及されている属性のみに絞りました。

• headline
• alternativeHeadline
• image
• description
• datePublished
• articleBody

このうちalternativeHeadlineはサブタイトル・サブ見出し的な存在で、当ブログでは用いていない概念なのでパス。

それ以外の5属性を導入しました。

詳しくはソースをご覧下さい。と言っては身も蓋もないので少し説明。

WordPress2012.2013向け導入解説

ここではWordpressのデフォルトテーマTwentytwelve,twentythirteenにschema.orgのArticleを導入する説明をします。

カスタマイズするファイルはcontent.phpです。

article

まずarticle要素を少し弄ります。

Before

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

After

<article itemscope itemtype="http://schema.org/Article" id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

itemscope属性、itemtype属性の設定完了です。

.entry-title

次に.entry-titleを弄ります。

Before

<?php if ( is_single() ) : ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
<?php else : ?>

After

<?php if ( is_single() ) : ?>
<h1 itemprop="headline" class="entry-title"><?php the_title(); ?></h1>
<?php else : ?>

itemprop=”headline”の設定が完了しました。

新しくメタ要素を追加

• itemprop=”image”
• itemprop=”description”

の設定は、

<?php endif; // is_single() ?>

の直後に以下のコードを追加して行います。

<?php //サムネイルを抜き出す仕組み
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';//投稿にイメージがあるか調べる
if (has_post_thumbnail() && ! is_archive() && ! is_front_page() && ! is_home())
{//投稿にサムネイルがある場合の処理
     $image_id = get_post_thumbnail_id();
     $image = wp_get_attachment_image_src( $image_id, 'full');
     $ogimage=$image[0];
} 
else if ( preg_match( $searchPattern, $str, $imgurl ) &&is_single()) 
{//投稿にサムネイルは無いが画像がある場合の処理
     $ogimage=$imgurl[2];
} 
else 
{//投稿にサムネイルも画像も無い場合、もしくはアーカイブページの処理
     $ogimage=get_bloginfo('url')."/top/wp-content/uploads/2013/01/2013-01-20_1952.png";
}
?>
<meta itemprop="description" content="<?php echo get_the_excerpt();?>" />
<meta itemprop="image" content="<?php echo $ogimage; ?>">

.entry-content

次に.entry-contentを弄ってitemprop=”articleBody”を設定します。

Before

<div class="entry-content">
…
</div>

After

<div itemprop="articleBody" class="entry-content">
…
</div>

新しくtime要素を追加

itemprop=”datePublished”の設定はtime要素を追加して行います。

以下のコードを日付を表示したい場所に設置します。

<time itemprop="datePublished" datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y/m/d'); ?></time>

即効性はなくても導入すべし

以上のようにとても簡単に設置できますし、SEOに興味のある人は導入すべきだと思います。