Facebook OGPを設置しなおしました! 〜自分で管理出来るって素晴らしい!〜

Facebook button count is wrong, use RealShare

この三連休はブログ改造に没頭!てんび〜( @_tenbi)です。

ブロガーなら必ず設置したいのが「OGP」。OGPはFacebookユーザーがブログをシェアした時に効果的にアプローチ出来るようになる優れもの!
このOGP、WordPressならプラグイン一つで設置できたりと大変便利なのですが、今回自分でコードを追加する形で設置したので手順をまとめます。

WordPressのプラグインを減らしたい人、レンタルブログでOGPを設置したい人必見です!


OGPとは

この「OGP」とは

簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のことです。
参考:フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か – IT戦記

という「Web巡回ロボットが記事概要を把握しやすくする」ものです。

OGPなしとありではこんなに違う!

そしてこのOGPを正しく設置するだけで、ロボットだけでなくFacebookユーザーにも見やすい状態でシェアさせる事が可能になります。

スクリーンショット 2012 11 25 12 46 46
スクリーンショット 2012 11 25 12 45 52

上が「プラグインのみで設置したサイト」、下が「正しくOGPを設置したサイト」です。上の画像では「@_tenbiです」という決まり文句から入っているのに対し、下の画像は「新企画」の説明部分が表示されています。
これなら、「どんな記事か」がタイトル以外でもはっきりしてますね!

スクリーンショット 2012 11 25 12 45 52

そしてWordPressユーザーに嬉しいのがこの次のメリット。

OGPはAll in One SEOのmetaを取り込める

そう。自分で設置したOGPなら、SEO対策に超効果的なプラグイン「All in One SEO」のmetaタグが読み込めるんです!先ほどの下の画像は「All in One SEO」のmetaタグが読み込まれた記事。

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

人気のSEOプラグイン「All in One SEO Pack」で設定した「meta description」を、そのまま「og:description」に流用することもできます。

参考:貼るだけ簡単!アクセスが倍増するWordPress用OGPコード | Oxy notes

なぜプラグインじゃだめ?

僕もつい今日までは「Open Graph Pro」という簡単にOGPが設置できるプラグイン(WordPressのOGP設定は「Open Graph Pro」がベスト | Last Day. jp
)を使っていましたが、これにも理由があります。

自分で強調したい部分を選べる

これは先程書いた通り、「All in One SEO」のmetaタグを読み込めるからです。

プラグインが少ないと軽くなる

これはあくまでも可能性の域を出ませんが、プラグインの機能を読み込むための時間が無くなるのでその分サイト表示が軽くなる場合があります。

さっそく設置しよう!

自分でコードを置くメリットを説明したところで、早速コードを設置してみましょう!

All in One SEOの設定を行う ※WordPressユーザ限定

WordPressユーザーならOGPと同時に「All in One SEO」も設置してしまいましょう!これで検索流入も増えるかも!?

各記事のMETAタグを簡単に調整できるプラグイン「All in One SEO Pack」の使い方 | あかめ女子のWebメモ
設置方法はこの記事がダントツで分かりやすい!

Mac用ブログエディタ「MarsEdit」で「All in One SEO」を使う方法はこの記事をどうぞ!

header.phpの宣言文を変更 ※バックアップ必須

ここからHTMLをいじっていきます。WordPressなら「header.php」内にある「!DOCTYPE html」、レンタルサーバ・WordPress以外の人は「!DOCTYPE html」直下にあるHTMLタグを以下のタグに置き換えちゃいます。

HTML 5:
[html]
<html lang="ja" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
[/html]

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

OGP用コードを追加

WordPressユーザーは「header.php」にある
[html]
</head>
[/html]

を、それ以外の方は使っているテーマにある

[html]
</head>
[/html]

の直前に以下のコードを追加します。

[html]
<!– ここからOGP –>
<meta property="fb:admins" content="●●●●●●●●●●●●●●●●●●" /><!– 自分のFacebookアカウントに対応するid –>
<meta property="og:type" content="blog">
<?php
if (is_single()){//単一記事ページの場合
if(have_posts()): while(have_posts()): the_post();
echo ‘<meta property="og:description" content="’.get_post_meta($post->ID, _aioseop_description, true).’">’;echo "n";//抜粋を表示
endwhile; endif;
echo ‘<meta property="og:title" content="’; the_title(); echo ‘">’;echo "n";//単一記事タイトルを表示
echo ‘<meta property="og:url" content="’; the_permalink(); echo ‘">’;echo "n";//単一記事URLを表示
} else {//単一記事ページページ以外の場合(アーカイブページやホームなど)
echo ‘<meta property="og:description" content="’; bloginfo(‘description’); echo ‘">’;echo "n";//「一般設定」管理画面で指定したブログの説明文を表示
echo ‘<meta property="og:title" content="’; bloginfo(‘name’); echo ‘">’;echo "n";//「一般設定」管理画面で指定したブログのタイトルを表示
echo ‘<meta property="og:url" content="’; bloginfo(‘url’); echo ‘">’;echo "n";//「一般設定」管理画面で指定したブログのURLを表示
}
?>
<meta property="og:site_name" content="<?php bloginfo(‘name’); ?>">
<?php
$str = $post->post_content;
$searchPattern = ‘/<img.*?src=(["’])(.+?)1.*?>/i’;//投稿にイメージがあるか調べる
if (is_single()){//単一記事ページの場合
if (has_post_thumbnail()){//投稿にサムネイルがある場合の処理
$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="●●●●●●●●●●●●●●●●●●">’;echo "n"; <!– 投稿にサムネイルも画像も無い場合に表示させる画像のURL –>
}
} else {//単一記事ページ以外の場合(アーカイブページやホームなど)
echo ‘<meta property="og:image" content="●●●●●●●●●●●●●●●●●●">’;echo "n"; <!– アーカイブページやホームなどのOGP用画像のURL –>
}
?>
<!– ここまでOGP –>
[/html]

※WordPressで「All in One SEO」を使っていない人、WordPress以外の方は以下のコードです!

[html]
<!– ここからOGP –>
<meta property="fb:admins" content="●●●●●●●●●●●●●●●●●●" /><!– 自分のFacebookアカウントに対応するid –>
<meta property="og:type" content="blog">
<?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;
echo ‘<meta property="og:title" content="’; the_title(); echo ‘">’;echo "n";//単一記事タイトルを表示
echo ‘<meta property="og:url" content="’; the_permalink(); echo ‘">’;echo "n";//単一記事URLを表示
} else {//単一記事ページページ以外の場合(アーカイブページやホームなど)
echo ‘<meta property="og:description" content="’; bloginfo(‘description’); echo ‘">’;echo "n";//「一般設定」管理画面で指定したブログの説明文を表示
echo ‘<meta property="og:title" content="’; bloginfo(‘name’); echo ‘">’;echo "n";//「一般設定」管理画面で指定したブログのタイトルを表示
echo ‘<meta property="og:url" content="’; bloginfo(‘url’); echo ‘">’;echo "n";//「一般設定」管理画面で指定したブログのURLを表示
}
?>
<meta property="og:site_name" content="<?php bloginfo(‘name’); ?>">
<?php
$str = $post->post_content;
$searchPattern = ‘/<img.*?src=(["’])(.+?)1.*?>/i’;//投稿にイメージがあるか調べる
if (is_single()){//単一記事ページの場合
if (has_post_thumbnail()){//投稿にサムネイルがある場合の処理
$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="●●●●●●●●●●●●●●●●●●">’;echo "n"; <!– 投稿にサムネイルも画像も無い場合に表示させる画像のURL –>
}
} else {//単一記事ページ以外の場合(アーカイブページやホームなど)
echo ‘<meta property="og:image" content="●●●●●●●●●●●●●●●●●●">’;echo "n"; <!– アーカイブページやホームなどのOGP用画像のURL –>
}
?>
<!– ここまでOGP –>
[/html]

コード内にある●は後で変更するので今はそのまま!

●を自分用に変更する

では先程追加したOGP用のコードを変更していきます!
一つ目の●(fb:admins)は自分のFacebook IDを入力します。
こちらのページを開くと、今使っているパソコンでログインしているFacebookユーザーのIDが表示されます。

スクリーンショット 2012 11 25 15 45 25
あとはそのIDを一つ目の●と置き換えます。

2つ目の●は投稿に画像が無い時に表示したい画像のURL、3つ目の●はトップページなどがシェアされる時に表示したい画像のURLを入力します。ブログのファビコンの元ファイルや、僕みたいにSNSで使っているアイコンを登録しておくといいかもしれません。

デバッガーと人力で確認!

ここまで終わったらテーマ側の作業は終わり。あとはFacebookデバッガーと人力でしっかりOGPが聞いているか確認していきます。

まずは記事の確認。

スクリーンショット 2012 11 25 13 29 03

All in One SEOで設定した抜粋はしっかり表示されていますか?画像は大丈夫?ちなみに、All in One SEO未使用の場合も下の画像のような形で抜粋は表示されますのでご安心を!

スクリーンショット 2012 11 25 12 46 46

次にトップページ。

スクリーンショット 2012 11 25 13 29 22

トップページも正しく設定されています。画像にも書きましたが、「go:description」にはブログのサブタイトル(説スクリーンショット 2012 11 25 16 00 49明)が表示されます(WordPressの方は以下の画像の通り設定すればOK!)

全て終わるとシェアするときは以下の感じでシェアされるようになります。

スクリーンショット 2012 11 25 12 45 52

これがトップの方にもあった完成画像。これで完了です(*´∀`*)

まとめ

以上非常に長たらしく書いて来ましたが、
自分の推したい部分だけ表示されるから観られやすい+拡散されやすいというのは非常に大きいです。All in One SEOを使っていれば「見る人の目を惹く説明」で見てもらえる可能性も、拡散してもらえる可能性も上がるからです。
アクセス数が水物のブロガーにとってはまたとないチャンスでもあるわけです。

また自分で置いたコードだから自分で全て管理出来るという点も大きいですよね。プラグインにありがちな「開発終了」に戸惑うこともなく、好きなタイミングでコードを撤去・管理出来るのはかなり魅力的では無いでしょうか。

ソーシャル、特にFacebookがブログアクセスを左右すると言っても過言では無いこのご時世。どうせなら時間をかけてでも、少しでも読まれるために努力してみませんか?

参考

[Å] 私がブログでFacebook OGPの設定をプラグインに頼らない2つの理由 | あかめ女子のWebメモ

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

関連記事