OGPのメタタグを追加しました

ソーシャルブックマーク系のボタンを設置するため、WP Social Bookmarking Light というWordPressプラグインを導入してみました。
Twitter、Facebook、はてなブックマークはもちろん、Google+やmixiチェックなど対応しているサービスが多いですし、設定も簡単でした。
mixiのボタンも置きたかったんですが、デベロッパー登録が必要なようで、mixiは退会するつもりだったので諦めました…。

OGPのメタタグを追加

ボタンの動作確認で Facebookの "いいね!" ボタンを押してみると、自分のFacebookページの "いいね" 欄にブログの記事が現れました。が、サムネイル画像がサイドバーに置いてるブログ村のものになってしまいました。
OGP(Open Graph Protocol)なるメタタグを埋め込むことによってサムネイルなどの制御が行えるらしい、ということで設定してみました。

こちらのサイトを参考にさせていただきました。
いろいろコードスニペット :
WordPressで、OGP(The Open Graph Protocol)に完全な情報を反映させる

All in one SEOプラグインは利用してないので、header.php に貼り付ける部分をこのブログに合わせて少しコンパクトにしました。
https://developers.facebook.com/tools/debug で確認するとエラーが検出されるため、"image_src""og:site_url" は削除しました。
ちなみに、下のコードでは自前の関数などを使用してます。(強調行)
※コピペされてもそのままでは使えません(^_^;)

<?php if(is_singular()){
global $post;
setup_postdata($post);
$ogpData['title'] = wp_kses($post->post_title, array());
$ogpData['description'] = strip_tags(get_the_excerpt());
?>
<meta property="og:title" content="<?php echo $ogpData['title']; ?>" />
<meta property="og:description" content="<?php echo $ogpData['description']; ?>" />
<meta property="og:url" content="<?php echo esc_url(get_permalink()); ?>" />
<meta property="og:type" content="article" />
<meta property="og:image" content="<?php vo_get_ogpimg($post->ID); ?>" />
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<?php }elseif(!is_404() && !is_search()){ ?>
<meta property="og:title" content="<?php vo_get_title(); ?>" />
<meta property="og:description" content="<?php bloginfo('description'); ?>" />
<?php if(is_home()){ ?>
<meta property="og:url" content="<?php echo home_url('/'); ?>" />
<meta property="og:type" content="blog" />
<?php }else{ ?>
<meta property="og:url" content="<?php echo esc_url('http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']); ?>" />
<meta property="og:type" content="article" />
<?php } ?>
<meta property="og:image" content="<?php echo home_url('/images/siteimage.png'); ?>" />
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<?php } ?>

OGP用サムネイル画像の取得関数として functions.php に以下を追加。
添付画像から自動取得する方が便利ですが、テーマ更新に伴いアイキャッチ画像を設定するようにしたので、アイキャッチ画像のみ取得するようにしました。

function vo_get_ogpimg($id) {
   $num = get_post_thumbnail_id($id); //アイキャッチ画像を取得
   if($num!=''){
      $thumb = wp_get_attachment_image_src($num, 'thumbnail');
      echo esc_url($thumb[0]);
   } else {
      echo home_url('/images/siteimage.png');
   }
}

OGPのメタタグを追加することで、Facebook側に意図したイメージやタイトルが表示されるようになりました。Google+もOK。
ただし Facebookの場合、これだけだと自分のページの "いいね!" 欄にブログの記事が並ぶだけで、タイムラインでシェアはされません。"fb:admins""fb:app_id" を追加するとシェアされるらしいですが、今回は追加しませんでした。

OGPについてはこちらのページが参考になりました。
IT戦記:
フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か

追記:2013.05.01

WordPressテーマのリニューアルに伴い少し見直しました。


COMMENT

コメントをどうぞ

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)