貼るだけ簡単！アクセスが倍増するWordPress用OGPコード

oxy

12年 ago

プラグインに頼らず、思い通りに動作するOGP用のコードを書きました

2012年3月現在、日本のFacebook利用者数が768万人。Google+は200万人。Twitterは3000万人。mixiのユーザー数は2,623万人。（セレージャテクノロジー＆Semiotics調べ）

全てのトラフィックを有効に活用すれば、サイトへのアクセスは何倍にも増えます。

実際にFacebookからの流入が倍増

事実として今回設定するOGPを設置したところ、Facebookからの流入が数倍になったという例が多数報告されています。
せっかく有益な記事を書いたなら、ソーシャルメディアに適切に内容を伝えて、多くの人に見てもらいましょう。

まずは解説

（もう知っているぞという方は読み飛ばしてください。）

「OGPとはなんぞや？」という方のために、簡単に解説します。正式名称はOpen Graph protocol。「ソーシャルメディアに対して、ページに何が書いてあるかを解説する書式」です。htmlに慣れ親しんだ人にわかりやすく言えばサイトの説明文「meta description」や、キーワードを追加する「meta keyword」のソーシャルメディア版です。

現在既にFacebook、Google+、mixi、GREEといった主要ソーシャルメディアがOGPに対応しています。対応するとどのように変わるのかというのは見てもらったほうが早いと思います。

OGPを設定することによる、各ソーシャルメディア共通のメリット

OGPを設定しない場合

各SNSの自動取得だと、どの画像が投稿のサムネイルにふさわしいか判断できません。まずは自動だとどのように表示されるか見てください。（画像はGoogle+のもの）

次はOGPを設定した場合

OGPを設定することにより、「タイトル、本文、画像」共に意図したものが表示されるようになります。

Facebookだけのメリット

Facebookだけは特別に、OGPを設定するメリットがあります。
1.友人のニュースフィードに表示される。
2.いいね！してくれた人にお知らせや更新情報を配信できる。

いままでのいいね！ボタン

重要なのは「1のニュースフィードに表示される」という方です。通常のいいね！は個人的なブックマークと変わらない機能でした。

OGPを設定したいいね！ボタン

OGPを使うことで「いいね！を押してくれた人の友人にも、いいね！情報が拡散される」ことになりました。

いいね！を押した企業のページに、9割はリピートしない。というデータがあるようです。自分でいいね！を押した企業のページですら訪れないことを考えると、友人のウォールを覗いて、何にいいね！したのか調べるというのはかなり稀な例です。
しかし、それが自分のタイムラインに流れてくれば話は別です。ほとんどの人は自分のニュースフィードは確認するからです。

誤解を恐れずに言うなら「OGPを設定することにより、いいね！ボタンが、ただのブックマークボタンから、Twitterのリツイートボタンに変わる」と、言い換えることができます。

OGPについて、さらに詳しい解説は「こちらのページ」を参照してください。
また「OGPの仕様についてはこちら」

プラグインの導入

結論から言うと、思い通りの動作をするプラグインはありませんでした。

人気の「WP-OGP」はバグが目立ちます。次いで人気の「Open Graph Pro」では「og:description」が出力されません。他のものは、サムネイルの取得ができなかったり、動作しないものもありました。

さらにFacebookの仕様も頻繁に変わるため、定期的にアップデートを提供しているプラグインが望ましいのですが、バグの対応すらできてないというのが現状です。
（2013年現在はこの記事を書いた時と仕様が変わり、画像の幅が200px以上推奨になっています。推奨なだけでエラーではないのでフェイスブックのためだけに画像を用意するのも手間なのでそのままにしています。）

「それなら」ということで、プラグインに頼らずに自分で思い通りの動作をするコードを書きました。

OGP用のコードを書くにあたって、必要とする動作

1.一度設置したらOGP用に投稿の手間が増えたりすることなく、自動で動作すること。
2.「og:description」は本文の抜粋を自動で表示する。本文の無いページ（ホームやアーカイブページ）ではサイトの説明文を表示する。
3.「og:image」はサムネイル（アイキャッチ画像）を表示する。サムネイルがない場合は投稿された画像。それもない場合は用意した画像（サイトロゴなど）を表示する。

設置方法

プラグインに頼らずに、WordPressでOGPを設定するには、以下の2点を追加するだけです。

xmlns属性を変更します

「header.php」を開いて「<!DOCTYPE html>」の直後の宣言を、以下のように変更します。

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" />

OGP用のコードを追加

同じく「header.php」にある「</head>」の直前に、以下のコードを追加してください。

※ありがたいことに他のサイトで、当サイトのコードを利用していただいてます。いくつか想定外の要望をいただいたので、対応してみます。（2012/5/12）

1.投稿（post）ページをホームにしている場合、
2.管理画面の表示設定で、投稿ページを固定ページにしている場合、
3.アーカイブページの場合、
これらの場合に、デフォルトの画像と管理画面のサイトインフォという設定に変更しました。

4.og:typeはホームでだけblog。その他のページはarticle。
5.the_permalink()やget_permalinkでURLが正確に取得できない（アーカイブページなど）ことがあるためREQUEST_URIに変更。

<!-- ここからOGP -->
<meta property="fb:admins" content="○○○○○○○" /><!-- サイトに合わせて変更してください -->
<?php
if (is_front_page()){
echo '<meta property="og:type" content="blog" />';echo "\n";
} else {
echo '<meta property="og:type" content="article" />';echo "\n";
}
?>
<meta property="og:url" content="<?php echo 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; ?>" />
<?php
if (is_singular() && ! is_archive() && ! is_front_page() && ! is_home()){//投稿ページ、固定ページの場合
	if(have_posts()): while(have_posts()): the_post();
		echo '<meta property="og:title" content="'.the_title("", "", false).'" />';echo "\n";
		echo '<meta property="og:description" content="'.mb_substr(get_the_excerpt(), 0, 100).'" />';echo "\n";//抜粋を表示
	endwhile; endif;
} else {//投稿ページ以外の場合（アーカイブページやホームなど）
	echo '<meta property="og:title" content="'; bloginfo('name'); echo'" />';echo "\n";
	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() && ! is_front_page() && ! is_home()){//投稿にサムネイルがある場合の処理
	$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() && ! is_front_page() && ! is_home()) {//投稿にサムネイルは無いが画像がある場合の処理
	echo '<meta property="og:image" content="'.$imgurl[2].'" />';echo "\n";
} else {//投稿にサムネイルも画像も無い場合、もしくはアーカイブページの処理
	echo '<meta property="og:image" content="https://oxynotes.com/wp-content/themes/twentyten/images/default.png" />';echo "\n";
}
?>
<!-- ここまでOGP -->

解説

基本的にテンプレートタグを挿入しただけです。そちらの解説は「Codexのテンプレートタグのページ」に任せるとして、条件分岐の部分を解説します。

3～9行目で「og:type」にホームの場合は「blog」を指定。それ以外のページでは「article」を表示。（こうすることでホーム以外でいいねボタンが押されてもFacebookで新規ページは作られない）

11～21行目で投稿または固定ページでは、「og:title」にタイトル、「og:description」に記事の抜粋本文を指定しています。
それ以外のホームやアーカイブページではブログのタイトルとブログの説明文を表示しています。

23～35行目で「og:image」に画像を指定しています。
まずは19行目「サムネイルがある場合はサムネイルを指定」という処理。
続いて23行目「サムネイルがない場合は投稿にある最初の画像を指定」。
最後に25行目「サムネイルも画像もない場合は指定の画像」という3段階の条件分岐になっています。

Facebookの「fb:admins」はDEVELOPERSに登録後（Facebookアカウントが必要）、こちらの「Step 2 – Get Open Graph Tags」にある「Admin」という欄で確認できます。
ご自身のブログに合わせて適宜変更してください。

条件分岐について詳しく知りたい方は前回の投稿「もう覚えなくても大丈夫！？WordPressの条件分岐タグの使い方まとめ」を参照してください。

補足

Facebookは投稿に関するキャッシュを独自に持っているので、一度記事の情報を取得したら、変更内容はすぐには反映されません。「デバッガ」を使ってチェックするか、キャッシュが更新されるまで数日待ってください。

応用編

カスタムフィールドに指定した画像を取得したい場合

上のコードだとカスタムフィールドにアップロードした画像は取得できません。
以下のコードを追加してください。

<?php
if (is_single()){
$customimage = wp_get_attachment_image_src( get_post_meta($post->ID, '$key', true),'full' );//$keyはカスタムフィールドのキーを入力
echo '<meta property="og:image" content="'.$customimage[0].'">';echo "\n";
}
?>

このサンプルでは投稿ページを表示している場合に、カスタムフィールド「$key」で指定した画像URLを「og:image」に書き出すという処理をしています。

カスタム投稿タイプを指定したい場合

独自のカスタム投稿タイプで処理を変更する場合は以下のようにして条件分岐してください。

<?php
if (get_post_type() === 'example'){
//ここに出力したいコードを書く
}
?>

上のサンプルはカスタム投稿タイプ「example」の場合。複数指定の場合は「if ( in_array( get_post_type(), array( ‘example1’, ‘example2’, ‘example3’ ) ) )」といった具合に書きます。

既にプラグインで設定しているdescriptionを流用したい場合

人気のSEOプラグイン「All in One SEO Pack」で設定した「meta description」を、そのまま「og:description」に流用することもできます。
プラグインがdescriptionを設定するには、カスタムフィールドを使っていると思います。そのキーを指定すれば値が取得できます。以下All in One SEO Packの場合のサンプルです。

echo '<meta property="og:description" content="'.get_post_meta($post->ID, _aioseop_description, true).'">';echo "\n";

以上のようにすると、All in One SEO Packで設定したdescriptionが反映されます。各プラグインに合わせて「$key（_aioseop_description）」の部分を変えれば、対応できます。

トップページ以外で「いいねボタン」を押された時に、ページを新規作成してほしくない場合

下記のように「og:type」で「blog」を指定すると、全てのページでブログと認識されるため、いいねボタンを押すごとに新規ページが作成されます。

<meta property="og:type" content="blog" />

トップページ以外では新規ページを作ってほしくない場合は条件分岐を使って「article」を指定します。

<?php
if (is_front_page()){
echo '<meta property="og:type" content="blog" />';echo "\n";
} else {
echo '<meta property="og:type" content="article" />';echo "\n";
}
?>

FacebookでOGPが正常に理解されているかは「デバッガ」を使うと便利です。
「Google用はこちら」でチェックできます。

コードの参考にさせていただきました。
「WordPressでFacebookのいいね！ボタンを不具合無く設置する際のポイント」この場を借りてお礼をさせていただきます。

実際の動作確認は難しいですが、当サイトのいいね！ボタンを押して、友人のニュースフィードに表示されているか確認させていただきましょうｗ