WordPress + Open Graph Protocol | Technolog.jp - ICTウェブマガジン

WordPress + Open Graph Protocol

  • 2011/02/10
  • カテゴリー:CMS

Open Graph Protocol

Facebookの「いいね!」ボタンやmixiチェック等のソーシャルグラフを利用する上で欠かせないのが「Open Graph Protocol」です。その仕様は予め定められており、すべてのサービスでほぼ共通して使用することができます。今回は、WordPressにおけるOGPのテンプレートをご紹介させていただきます。

早速、核心となる記述内容です。基本的には以下をHEADタグ内に貼付ければ完了です。

1
2
3
4
5
6
7
<?php if (is_single()) : if (have_posts()) : while (have_posts()) : the_post(); ?>
<meta property="og:type" content="article" />
<meta property="og:title" content="<?php the_title(); ?>" />
<meta property="og:description" content="<?php the_excerpt_rss(); ?>" />
<meta property="og:url" content="<?php the_permalink(); ?>" />
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<?php endwhile; endif; endif; ?>

条件タグ(is_single)を使用しているのは、通常のブログであれば、投稿内でのみソーシャルグラフを使用するので、他のページで表示させないためです。ほとんどの記述はアタリが付くと思いますが、唯一、ポイントになるのが4行目の「the_excerpt_rss()」です。単に抜粋を表示するのであれば、「the_excerpt()」ですが、これではパラグラフタグも同時に出力されてしまいます。「the_excerpt_rss()」はテキストのみの出力になりますので、ご存じない方は別の場面でも役立つかもしれません。

日本のメジャーソーシャルグラフサービスとしては、mixiとGREEが主にありますが、両者共に使用可能です。実際の設定等については以下のオフィシャルサイトをご確認下さい。

ちなみにソーシャルグラフの各コードは、(X)HTML Validateではありませんので、ご認識下さい。