遅ればせながら、いわしブログにもOGPを設定しました。OGPはfacebookなどのソーシャルで記事をシェアした時に、内容を正しく伝えるための設定です。
OGPはWordPressのプラグインを使えば簡単に設定できますが、今回はプラグインなしでOGPを設定してみました。
OGP（Open Graph Protocol）とは
OGPとは Open Graph Protocol の略で、facebookをはじめ、google+やmixiなどのソーシャルメディアで記事をシェアした時に、その記事の写真や内容などを正しく表示させるための設定です。
OGPを設定しておけば、facebookで「いいね！」を押したときに、そのページの内容を正しく表示させることができます。
写真や記事の見出しが適切であれば、その記事を読んでもらえる確率は上がります。でも、アメブロなどの一部無料ブログではOGPの設定ができないようで、記事をシェアしたときに表示される内容がどうもしっくりこない感じです。
記事を拡散してもらうためには、内容がきちんと伝わらないといけません。そのためにも、きちんとOGPを設定して、記事の内容が伝わるようにしましょう。
OGPを設定してみよう
では、OGPを設定してみましょう。まず、ヘッダー内のコードを書き換えます。管理画面の左メニュー「外観」→「テーマ編集」をクリック。
右メニューの「ヘッダー」をクリックして、ヘッダー内を編集します。
上から２行目の ＜ｈｔｍｌ… から始まるコードを下記に書き換えてください。いわしブログのテーマ「Stinger」はHTML5ではないので、このコードでＯＫです。
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" xmlns:og="http://ogp.me/ns#">
HTML5コードの場合は、違うものを使わないといけません。その場合はこちらを使用してください。
<html lang="ja" prefix="og: http://ogp.me/ns#">
なお、＜ｈｔｍｌ… については、いろいろな記述方法があって、その内容も解説しているサイトによってまちまちです。
このコードがなくてもOGPの設定は認識されるようですが、正式には指定が必要です。
FacebookのOGP設定の設置
続いて、ヘッダー内の＜/head＞の直前に、下記のWordPress用OGP設定コードを追加してください。
あと、自分で調べて入力する箇所が２か所あります。
●●●fb:adminsのID●●●
●●●サイトのデフォルト画像URLを指定●●●
<!--OGP開始-->
<meta property="fb:admins" content="●●●fb:adminsのID●●●" />
<meta property="og:locale" content="ja_JP">
<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";//投稿記事パーマリンク
} 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() or is_page()){//投稿記事か固定ページの場合
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 {//画像が1つも無い場合
echo '<meta property="og:image" content="●●●サイトのデフォルト画像URLを指定●●●">';echo "\n";
}
} else {//投稿記事や固定ページ以外の場合（ホーム、カテゴリーなど）
echo '<meta property="og:image" content="●●●サイトのデフォルト画像URLを指定●●●">';echo "\n";
}
?>
<!--OGP完了-->まず、●●●fb:adminsのID●●● は、次の方法で取得できます。
Facebookの自分のタイムラインからプロフィール写真をクリックすると、写真だけが拡大して表示されます。その時のURLを見てください。
URLの後ろ、「.123456789012345&type=1&theater」のピリオドから「&type」までの間にある数字「123456789012345」がIDです。この例では15桁ですが、ユーザによっては違うかもしれません。
※ 2013年9月追記 OGP設定 fb:adminsのID取得位置が変更に
2013年9月追記です。どうもfb:adminsのID取得位置が変わったようです。最近立ち上げたブログのOGPが設定できなかったので、おかしいなと思ったら・・・
facebookでOGPを設定される際は、下で解説しているIDを入れてください。
直前の記事では、プロフィール写真URLの後ろの部分にあるIDの数字
&set=a.123456789123456.98765.012345678912345&type=1&theater
の一番後ろ15桁の数字「012345678912345」をIDに設定してましたが、現在は中ほどの5桁の数字「98765」をIDに設定しないといけないようです。
IDの場所は再度変更があるかもしれないので、前のID取得位置の記載もそのまま残しておきます。
次に、●●●サイトのデフォルト画像URLを指定●●● です。
記事に画像がないときは、サイトであらかじめ指定された画像が表示されるように、デフォルト画像のURLを指定しておきます。
200px×200px以上であればＯＫですが、facebookの推奨は1500px×1500pxです。普通はそのサイトのロゴや、作者にちなんだOGP画像にします。
facebookで記事をシェアしたときに表示されるOGP画像は、いろいろと実験して確認してみてください。
All in One SEO Pack のdescription抜粋にも対応
いわしはWordPressのプラグイン All in One SEO Pack を使っていて、descriptionは個別に設定しているのですが、ゆめぴょんさんは親切なことに All in One SEO Pack のdescription抜粋に対応したコードも記載してくれてます。
All in One SEO Pack のdescription抜粋に対応させる場合は、上記コードの８行目を下記に差し替えてください。
echo '<meta property="og:description" content="'.get_post_meta($post->ID, _aioseop_description, true).'">';echo "\n";//抜粋から
「ファイルを更新」を押して、保存するのを忘れないようにしてください。
facebook developers のデバッガでOGP設定を確認
最後に、facebook developers のOpen Graph Object DebuggerでOGP設定を確認します。
こんな感じで、ちゃんと表示されてます。descriptionからの抜粋もバッチリ。
facebook OGP設定エラー 「リダイレクトできませんでした」
さて、facebook Open Graph Object DebuggerでOGP設定の確認をすると、「修正する必要があるエラー」が出て、「リダイレクトできませんでした」というメッセージが表示されることがあります。
普段はあまり意識しませんが、ウェブの世界では同じURLでも末尾にあるスラッシュ（／）やwwwの有無によって、違うアドレスとして認識されています。
http://hogehoge.com
http://hogehoge.com/
厳密に言うと、この2つは違うアドレスなので、本当はどちらかは404エラーになってしまうのですが、そうならないように片方がリダイレクトされて、1つのアドレスとして認識されるようになっています。リダイレクトとは転送という意味ですね。
http://hogehoge.com/
http://www.hogehoge.com/
こちらもwwwの有無によって、違うアドレスになってますね。この場合も片方がリダイレクトされて、統一したアドレスとして認識されるようになっています。
先ほどの「リダイレクトできませんでした」というエラーは、OGPでは統一したアドレスとして認識できなかったということです。
このエラーは、og:urlに直接アドレスを記載すれば修正できます。15行目にある meta property=”og:url” content=”” の部分に、自分のHPやブログのURLを記載します。
echo '<meta property="og:url" content="'; bloginfo('url'); echo '">';echo "\n";//「一般設定」で入力したブログのURLこのようにアドレスを直接記載して修正してください。最後にスラッシュ（／）を入れるのをお忘れなく。
echo '<meta property="og:url" content="http://hogehoge.com/">';echo "\n";//「一般設定」で入力したブログのURL
OGP設定の確認をしても、「修正する必要があるエラー」は表示されなくなりました。
OGPを設定しておけば、facebookだけではなく、他のソーシャルで記事をシェアした時の見栄えが断然よくなります。OGPの設定はそんなに難しくないので、ぜひチャレンジしてみてください。
今回は下の記事を参考にしてOGPを設定しました。ゆめぴょんさん、ありがとうございます。
