このたびマイクロデータschema.orgのArticleを導入してみました。このことによってどんなメリットがあるかわかりませんが、とにかく構造化データマークアップなるものを体験してみました。
In-depth articlesの対象になるかも
メリットがわからないと書きましたが、schema.orgのArticleを導入するとGoogleの「In-depth articles」の対象になります。
メリットはそれくらいなのですが、マイクロデータを使うと検索エンジンによるページ情報の把握がとてもやりやすいことは想像が付きます。
SEOの第一歩は検索エンジンにページを良く知ってもらうことです。
であれば、少しずつでもマイクロデータを導入する方向に動いたほうがいい気がして、下記の記事を参考にschema.orgのArticleを導入しました。
導入した属性
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に興味のある人は導入すべきだと思います。
「WordPressにマイクロデータschema.orgのArticleを導入」への1件の返信
[…] imageの追加はWordPressにマイクロデータschema.orgのArticleを導入のサイトを参考に、記事内の画像を抽出する関数をそのまま利用させていただきました。 single.phpの<?php endif; ?>あとに以下 […]