FACEBOOKのOGP画像の設定

IGAZO
2015.08.25
366 views

FACEBOOKでリンクをシェアした時、
きれいにリンク貼れる時と、
なんだか画像が汚かったり、
さみしいときありませんか？

そんなときはOGPの設定がおかしいんです。

サイト制作にあたって、
意外と苦戦してしまったので、
忘備録も兼ねて残しておきます。

まず、OGPってこれ。

ogp01

OGPって
「Open Graph protocol」
の略だそうです。

この時はWordPressを使って
サイトリニューアルの作業をしてたから
何にも気にしてなかったです。

で、少し制作が進んだので実験。

ogp02

ほい。
って、なんかさみしい。
なんだろ？
あ。画像がない！

ってことで、調べてみたら、
OGP画像ってやつを設定しなきゃ
いけないみたいです。

ちなみにWordPressの初期状態では
OGP画像は設定されていないらしい・・・

手順は

Facebookの個人アカウントを作成
（これはもうやってある）
↓
adminIDを取得
http://graph.facebook.com/******
******は自分のユーザーネーム
adminIDは15文字の数字
↓
https://developers.facebook.com/
ここにアクセスする
↓
開発者登録をする
（なんだそりゃ？）
MyAPPS→Register as a Developer
携帯メルアド登録→確認コード
入力して登録
↓
アプリを作成する
（まだあんの？）
MyAPPS→Add a New App
Display Name
Namespace
カテゴリを設定
画像認証
↓
アプリを
development modeから
public modeに
（心折れそうです・・・）
Settingsのメルアド入力して
Status & ReviewでYESにスライド
↓
そしてやっとappID取得☆
でおしまい！

・・・な、はずもなく。

OGP設定は
直接タグをいじるか
（プログラマみたいな仕事）
WordPressのプラグインでやるか
どちらでも出来るみたいですが・・・

プラグインを選択
（簡単そうだったので）

WP Facebook Open Graph protocol
というプラグインをインストールして
ID入れて、画像も準備して・・・

更新！

どうだ！！

ogp02

よし！
ほらね！

これで・・・

変わらない（＾＾；）
（画像はさっきと同じのを使いましたがこんな感じでした。）

なんでだ～？？？

で、原因分かりました。
「Open Graph Debugger」
https://developers.facebook.com/tools/debug/

どうやらここでひと作業
しなきゃいけないようです。

Facebookの仕様で前のキャッシュが
残ってるみたいなんですね。
そのキャッシュをクリアーする。

これでOK！
かと思いきやエラー（笑）
・・・もうここまできたら
笑うしかない！

またもや、ググると
WP Facebook Open Graph protocol
のバグがあるみたいですな。

仕方ないので、
プラグインのプログラムを
いじることに。。。

185行目
echo '<meta property="og:locale" content="' . strtolower( esc_attr( get_locale() ) ) . '"/>' . "\n";
を
echo '<meta property="og:locale" content="ja_JP"/>' . "\n";
に書き換え。