いわしブログ

京都のウィンドミル代表いわしのブログです。wordpressやfacebookの設定、ブログ運営について備忘録代わりに更新してます。最近は動画も作ってます。

*

facebookのOGPをプラグインなしで設定

      2015/08/26

遅ればせながら、いわしブログにもOGPを設定しました。OGPとは、(Open Graph Protocol)の略で、facebookをはじめ、google+やmixiなどのソーシャルメディアで記事をシェアした時に、その記事の写真や内容などを正しく表示させるための設定です。

OGPはWordPressのプラグインを使えば簡単に設定できますが、今回は下の記事を参考にしてプラグインなしでOGPを設定してみました。ゆめぴょんさん、ありがとうございます。

http://wispyon.com/22/

【ブログ術】FacebookのOGP設定をプラグインなしで設置する方法 – ゆめぴょんの知恵

OGP(Open Graph Protocol)とは

OGPを設定しておけば、facebookで「いいね!」を押したときに、そのページの内容を正しく表示させることができます。

http://smmlab.aainc.co.jp/?p=13024

【保存版】やるとやらないでは大違い!Facebookいいね!ボタンを最適化する「OGP」設定方法まとめ – SMMLab(ソーシャルメディアマーケティングラボ)

写真や記事の見出しが適切であれば、その記事を読んでもらえる確率は上がります。でも、アメブロなどの一部無料ブログではOGPの設定ができないようで、記事をシェアしたときに表示される内容がどうもしっくりこない感じです。

記事を拡散してもらうためには、内容がきちんと伝わらないといけません。そのためにも、きちんとOGPを設定して、記事の内容が伝わるようにしましょう。

OGPを設定してみよう

では、OGPを設定してみましょう。まず、ヘッダー内のコードを書き換えます。管理画面の左メニュー「外観」→「テーマ編集」をクリック。

OGP設定テーマ編集

右メニューの「ヘッダー」をクリックして、ヘッダー内を編集します。

OGP設定ヘッダー編集

上から2行目の <html… から始まるコードを下記に書き換えてください。いわしブログのテーマ「Stinger」はHTML5ではないので、このコードでOKです。

HTML5コードの場合は、違うものを使わないといけません。その場合はこちらを使用してください。

なお、<html… については、いろいろな記述方法があって、その内容も解説しているサイトによってまちまちです。
こののコードがなくてもOGPの設定は認識されるようですが、正式には指定が必要です。いわしはこちらの情報を参考にして設定しました。

http://html999.sitemix.jp/tips/86.html

はじめてのOGP設置方法とどこまで設定するかを考える – html999

 

FacebookのOGP設定の設置

続いて、ヘッダー内の</head>の直前に、下記のWordPress用OGP設定コードを追加してください。
あと、自分で調べて入力する箇所が2か所あります。

●●●fb:adminsのID●●●
●●●サイトのデフォルト画像URLを指定●●●
 

まず、●●●fb:adminsのID●●● は、次の方法で取得できます。
Facebookの自分のタイムラインからプロフィール写真をクリックすると、写真だけが拡大して表示されます。その時のURLを見てください。
https://www.facebook.com/photo.php?fbid=123456789123456&set=a.123456789123456.12345.123456789123456&type=1&theater
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.&&&&&&&&&&&&&&&.#####.$$$$$$$$$$$$$$$&type=1&theater
の一番後ろ15桁の数字「$$$$$$$$$$$$$$$」をIDに設定してましたが、現在は中ほどの5桁の数字「#####」をIDに設定しないといけないようです。

IDの場所は再度変更があるかもしれないので、前のID取得位置の記載もそのまま残しておきます。
あと、こんな記事も新規で書きました。

http://wind-mill.co.jp/iwashiblog/2013/09/facebook-ogp-adminsid/

facebookOGP設定 fb:adminsのuserIDが変更に | ウィンドミル いわしブログ

 
次に、●●●サイトのデフォルト画像URLを指定●●● です。
記事に画像がないときは、サイトであらかじめ指定された画像が表示されるように、デフォルト画像のURLを指定しておきます。

200px×200px以上であればOKですが、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抜粋に対応させる場合は、上記コードの8行目を下記に差し替えてください。

「ファイルを更新」を押して、保存するのを忘れないようにしてください。
 

facebook developers のデバッガでOGP設定を確認

最後に、facebook developers のOpen Graph Object DebuggerでOGP設定を確認します。

https://developers.facebook.com/tools/debug?q

OGPデバッガー – Facebook開発者

 

こんな感じで、ちゃんと表示されてます。descriptionからの抜粋もバッチリ。

OGP設定表示を確認

facebook OGP設定エラー 「リダイレクトできませんでした」

さて、facebook Open Graph Object DebuggerでOGP設定の確認をすると、「修正する必要があるエラー」が出て、「リダイレクトできませんでした」というメッセージが表示されることがあります。

facebook 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を記載します。

このようにアドレスを直接記載して修正してください。最後にスラッシュ(/)を入れるのをお忘れなく。

OGP設定の確認をしても、「修正する必要があるエラー」は表示されなくなりました。

facebook ogp設定

OGPを設定しておけば、facebookだけではなく、他のソーシャルで記事をシェアした時の見栄えが断然よくなります。OGPの設定はそんなに難しくないので、ぜひチャレンジしてみてください。

 - facebook