tande lab.

[WordPress] プラグインを使わずにOGPを設定する方法

最近、Facebook に記事をシェアしてもらえることが増えて嬉しいぃ!
ありがとうございますありがとうございます。

で、せっかくシェアしてもらったのを見るとこんなんなってしまってるのですね。
https://lh5.googleusercontent.com/-fEuxjtnLSKI/UAQXofET2DI/AAAAAAABGEo/iv4RvGBbPsg/s800/120716-0011.png

クックパッドの記事なのに、さよなら全角英数のサムネイルになってる!
それ違う、違うんですー!

いろいろ調べましたら、OGP っていうのを設定してやらないと
うまく Facebook に情報が流れないようです。

何それ…。

OGP ってなんぞや

OGP とは Open Graph Protocol の略だそうで、
下記のサイトが詳しいです。
OGPとは? 改めてOGPの重要性について考える時が来た。 | Last Day. jp

引用すると

The Open Graph protocol の略で Facebook を始め mixi や Google+ 等の SNS とウェブページを連携させるための情報をコンピュータが読めるように記述したもの

だそうです。

SNS 各社でそんなプロトコルを策定してたんですね。
知りませんでした。

どうすればいいのか

色々調べてみました。

WordPressのOGPプラグイン『WP-OGP』を正しく設定する方法 | IDEA*IDEA
WordPressプラグイン "WP-OGP" を使って設定する方法が載ってます。
プラグイン自体にバグが残ってたりするようで、すごく面倒くさそうです。

WordPressのOGP設定は「Open Graph Pro」がベスト | Last Day. jp
"Open Graph Pro" ってプラグインならバグもなくて良さそう!
ってインストールしてみたけど、私の環境ではうまく動きませんでした orz

[Wordpress]これは簡単!プラグインを使わずにOGPを設定する方法! | こんちくわのぶろぐ
プラグインを使わなくても簡単そう!
これだ!!

ってことで、プラグインを使わないやり方で
OGP の設定を行いました。

OGP の設定方法

[Wordpress]これは簡単!プラグインを使わずにOGPを設定する方法! | こんちくわのぶろぐ

上記サイトのやり方そのままですが、
header.php に以下の 2点 を追記するだけです。

xmlns 属性 を追加

header.php の html 宣言部分に下記を追加します。

xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml"

私の環境例だと

<html xmlns="http://www.w3.org/1999/xhtml" dir="<?php bloginfo('text_direction'); ?>" xml:lang="<?php bloginfo('language'); ?>">

ってなっていたのを

<html xmlns="http://www.w3.org/1999/xhtml" dir="<?php bloginfo('text_direction'); ?>" xml:lang="<?php bloginfo('language'); ?>" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

に変更しました。

OGP 用のコード追加

header.php の head タグ内に、以下を追記します。

<!-- ここからOGP -->
<meta property="fb:admins" content="*****" /><!-- ***** は自分のFacebookのユーザID -->
<meta property="og:title" content="<?php the_title(); ?>" />
<meta property="og:type" content="blog" /><!-- いいねボタンを押された時に新規にページを作りたくない場合はarticle -->
<meta property="og:url" content="<?php the_permalink(); ?>" />
<?php
if (is_single()){ // 投稿ページの場合
     if(have_posts()): while(have_posts()): the_post();
          echo '<meta property="og:description" content="'.mb_substr(get_the_excerpt(), 0, 100).'" />';echo "\n"; // 抜粋を表示
     endwhile; endif;
} else { // 投稿ページ以外の場合(アーカイブページやホームなど)
     echo '<meta property="og:description" content="'; bloginfo('description'); echo '" />';echo "\n"; //「一般設定」管理画面で指定したブログの説明文を表示
}
?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<?php
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i'; // 投稿にイメージがあるか調べる
if (has_post_thumbnail() && !is_archive()){ // 投稿にサムネイルがある場合の処理
     $image_id = get_post_thumbnail_id();
     $image = wp_get_attachment_image_src( $image_id, 'full');
     echo '<meta property="og:image" content="'.$image[0].'" />';echo "\n";
} else if ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive()) { // 投稿にサムネイルは無いが画像がある場合の処理
     echo '<meta property="og:image" content="'.$imgurl[2].'" />';echo "\n";
} else { // 投稿にサムネイルも画像も無い場合、もしくはアーカイブページの処理
     echo '<meta property="og:image" content="http://*****.com/*****.jpg" />';echo "\n"; // ***** はデフォルト画像のURL
}
?>
<!-- ここまでOGP -->

ハイライト部分の2箇所 (2, 26行目) は自分の環境に応じて書き換えが必要です。

2行目の FacebookユーザID 部分は

https://graph.facebook.com/(アカウントID)

にアクセスすると調べることができます。

(アカウントID) には、自分の Facebook ページにアクセスしたときに
アドレスバーに表示されているのと同じものをを入力してください。
https://lh4.googleusercontent.com/-LBoEC2QVffE/UAQstfDa1ZI/AAAAAAABGFo/gXdU02BYu2E/s800/120717-0001.png

赤枠部分の数字が OGP の設定に必要な ユーザーID になるそうです。
https://lh4.googleusercontent.com/-g94oDBLTqkg/UAQlyboKHGI/AAAAAAABGE4/JRK557gRvjw/s800/120716-0009-1.png

Facebook っていろんな ID があって
わけ分かんないですねw

Facebook のデバッガーで確認

ちゃんと OGP が反映されて、
意図したサムネイルが利用されているかどうかを下記で調べることができます。
https://developers.facebook.com/tools/debug

こんな感じで。
https://lh3.googleusercontent.com/-8JpKo2FIXpk/UAQofASe4qI/AAAAAAABGFI/iTCl4xyEjv0/s800/120716-0012.png
上の画像だと、なんか警告がでてますが
サムネイル画像が横幅 200px ないよ!って怒られているだけなので気にしない。

ちなみに、記事内に画像がない場合、
26行目で設定したデフォルト画像 (横幅 200px 以上必要) が利用されます。
https://lh4.googleusercontent.com/-n175yy2XSSY/UAQpBTmOVHI/AAAAAAABGFY/-oPSga4FWVk/s800/120716-0015.png

以上でした。