OGPとはブログ記事がFacebookでシェアやいいね！された時に、表示される写真や説明文を設定する機能です。SNSでの新記事周知は欠かせないので必須です。Twitterでも表示できる方法を紹介します。
ゆめぴょんです。こんちはっ(^^)/
前回の記事では、Facebook、ツイッター、Google+などのSNSでシェアしてもらうための、ソーシャルボタンの設置方法を紹介しました。
ソーシャルボタンを押された時に、記事の写真やタイトルや説明文が表示されることがあります。それらの内容を、あらかじめ設定するのがOPGの役割です。
OGPとは？設置メリットは？
主にFacebookのシェアやいいね！の時に表示される記事情報を、ブログ・ウェブ制作者が設定できる機能の事です。「Open Graph Protocol」の略称です。
Facebook以外でも、Facebookページ、Google+、Twitter（設定が必要。下で説明）、mixiなどにシェアされた時にも使われているようです。
OGPは設定しなくても、タイトルやURLなどは問題なく表示されます。しかし写真や説明文は記事と関係のない内容になる場合もあるため、OGP設定が重要になります。
具体的には、記事ページのヘッダーなど上部で、下のコードのように設定します。有名ブログや大手メディアでも、設定内容に力を入れてる場合が多いです。
[html]
[/html]
OGP設置のメリット
主に次の3つだと思っています。
- シェアされる情報（画像や説明文など）を制作者がコントロールできる
- シェアしてくれた人の友達にまで、効果のある内容が表示される
- 間違った情報（URL、画像、説明文など）で表示されるリスクを回避できる
OGPを設定すると、シェア内容を制作者サイドで決めることができるので、より多くの人に指示されるような情報にすることが可能になります。
また間違った情報での表示もなくすことが出来ます。その結果、拡散される確率も上がると思います。
今回、不要になるWordPressプラグイン
今回の記事は「WordPressプラグインはずし特集」の第10弾でもあります。今までの特集記事は下のリンクにまとめています。
今回の記事により、次のようなWordPressプラグインが不要になります。他にも類似プラグインがいくつかあるようです。
- Open Graph Pro
- WP-OGP
WordPressプラグインはとても便利ですが、入れすぎると高速化も阻害するし、WordPressのバージョンアップに追随しないものもあるので、簡単な機能は自作しようと思っています。
WordPressブログで簡単にOGPを設置する方法
OGP設置には、いくつかの準備が必要になります。
Facebookの「fb:admins」の値を取得する方法
（2015年3月26日追記）fb:adminsの利用は個人情報をさらす可能性もあるため、今後はapp_idの利用をオススメします。
「fb:admins」とは、Facebookの個人アカウント固有のID番号です。取得する方法はいくつかありますが、私がよく使う最も簡単な方法を紹介します。
- Facebookで、自分の個人アカウントページを開く
- 自分のプロフィール写真をクリック
- 拡大写真が表示されたページのURLの最後の方を確認
- 「.123456789012345＆type=1＆」の「＆type」の前15桁の数字をメモ
Facebookの仕様変更によっては、この方法が使えなくなるかもしれません。その場合は新しい方法をググってください。
OGPを設置する前のおまじないコード
OGPを利用するには、下のコードをヘッダー部に挿入する必要があります。WordPressのテーマファイル「header.php」を修正してください。
HTML5の場合は、headタグを下のように変更してください。
[html]
[/html]
HTML5以外では、htmlタグを下のように変更してください。headタグは通常どおりで問題ありません。
[html]
[/html]
WordPress用OGP設置コード（TwitterCardsも）
上の2つの準備が完了したら、下のコードを</head>タグの直前などにコピペするだけでOKです。【】の部分は適切に入力してください。
（2014.7.17修正）14行目の「php」の記述が抜けていたので修正しました。
[html]
‘>
‘>
‘>
‘>
‘;echo “\n”;
} elseif( preg_match( ‘//i’, $post->post_content, $imgurl ) && !is_archive()) {//アイキャッチ以外の画像がある場合
echo ‘‘;echo “\n”;
} else {//画像が1つも無い場合
echo ‘‘;echo “\n”;
}
} else { //ホーム・カテゴリーページなど
echo ‘‘;echo “\n”;
}
?>
[/html]
おまけとして、FacebookのOGPの後に、TwitterCardsの設定も付けておきます。不要なら最後の4行は削除してください。
Twitter Cardsは申請しないと利用できません。事後でもいいので下記事を参考に登録してみてください。簡単です。
FacebookのOGP設定の確認方法
まず最初に、わかる人ならブログ記事のソースコードで、OGP設定が思った通りに入力されているか確認しましょう。
次に自分のFacebookアカウントで、近況としてブログのURLを入力してみると、OGP設定の内容を確認できます。
もし期待通りの結果にならなかった場合や、以前の情報のままで表示された場合は、下のサイトの入力欄に該当のURLを記述して「デバッグ」ボタンを押せば新しい情報に更新されます。
まとめ：今日のゆめぴょんの知恵
今回の記事内容をざっくり言うと。
- OGPとはSNSシェアされた時に表示される情報の設定
- OGPを設定しておくと、拡散されやすいかも
- OGPを自力設置すると、WordPressプラグインは不要
- OGPが適切に設定されてると、TwitterCardsも4行だけで完了
ちなみに私の記事は、Facebookではあまりシェアされません。個人でもあまり利用していないからでしょうね。
リア充ではないので、Facebookに書く内容がないんです（汗）。もしよければOGPのテストをかねて、シェアしてみてくださいね！
ゆめぴょんでした。ちゃおっ！
