※2014/9追記：正方形で作成する必要はなくなったようです。
Facebook OGP画像の最新サイズ（※2014年9月）、もう正方形は不要
※2013/12/13追記：
実際に仕様通りに作成したOGP画像の作成例を別の記事で紹介しています。
作成する際の参考になると思いますのでよろしければご覧ください。
またFacebookのOGPの画像サイズの仕様に変更があったようです。
今までよりも、ニュースフィードに表示される画像のサイズが大きくなったみたいですね。
ただ、やけに長方形・・・。比率は1.91：1だそうです。キモい。
またこれ、画像が欠けるの気持ち悪いですなー。
さて、この1.91:1の仕様変更ですが、いくつか段階があります。
複雑なんで、実際にテストできるページを作りました。
テスト結果をまとめます。
面倒なのでPCでの表示しか確認していません。スマホは多分また違う感じかと。
（注記：9/13 スマホで見たらiOSとAndroidで表示ばらばら、しかもデカくなるタイミングのサイズも違ってました。調べてまた記事にします。）
（注記2：9/13 スマホの場合でも完ぺきに欠けを無くすサイズを調べました。→こちらの記事へどうぞ）
「400×209px」のサイズの画像、もしくはそれ以上のサイズで1.91：1の比率の画像をog:imageに指定している場合
ニュースフィードでは、綺麗に表示されます。ですが、タイムラインでは左右が切れ、センターの正方形が表示されます。
↑こちらはニュースフィード。欠けは無く表示されています。
↑こちらはタイムライン。左右が欠けて表示されています。
「400×209px」よりも大きいサイズだけど比率が違う画像をog:imageに指定している場合
大きいサイズの画像であれば、ニュースフィードでは大きく表示されます。
ただし、幅を400pxに合わせてリサイズしたうえで、高さについてははみ出た分は非表示です。
以下の例でも、画像の上下が切れていますね。写真などの場合はあまり困らないと思いますが、画像内に文字が入っているようなケースは注意が必要です。
なお、今回は大きいサイズは正方形で用意したので、タイムラインでは綺麗に表示されています。
↑ニュースフィードです。上下が欠けています。
↑正方形の画像なら、タイムラインでは綺麗に表示されます。
↑400×400のサイズでも、500サイズと同じ結果でした。
↑400×400のサイズでも、500サイズと同じ結果でした。
旧OGPの仕様通り、正方形サイズの画像をog:imageに指定している場合（かつ、「400×209px」より小さい）
以外にこの設定のサイトは多いはず。200px×200px以上の正方形画像をOGPに指定する方法が最もメジャーだったからですね。
画像が小さい場合、OGP表示方式が旧式（＝画像が小さい）になるようです。
↑例えば、300×300サイズの画像だと、このようになります。
綺麗には表示されるんですが、画像が大きくならず旧式の表示方法になるようです。
↑タイムラインは正方形なら特に問題なし。
↑200×200サイズでも、こうです。旧方式。
↑タイムラインは正方形なら特に問題なし。
何が何でもニュースフィードとタイムラインで画像が欠けないようにしたい場合１
以前、Facebookページの投稿の際に、ニュースフィードでもタイムラインでも画像が欠けないようにするにはどうすればいいかというのを調べましたが、今回はOGPの画像で同じことを考えてみます。
まあ、発想としては同じことです。
400×209pxサイズの画像の中心に、209×209pxの正方形の画像をおけばいいんです。
欠けては困る画像を209×209pxで用意し、その左右に95.5pxずつ白い余白を付けて画像を作成すれば、絶対かけない、かな。
ニュースフィードで見たときダサいけど・・・。
↑ニュースフィードで見たときは、こう。
実際には、緑色の部分は白い余白になりますんで、ちょっとマヌケ。
でも、肝心の青い部分は欠けません。
↑タイムラインで見るとこう。
中心の正方形は表示されますんで、青い部分は欠けません。
何が何でもニュースフィードとタイムラインで画像が欠けないようにしたい場合２
１の逆です。こっちのがまだマシですかね。タイムラインとニュースフィードのどちらを重視するかと言えば、ニュースフィードだと思うので。
400×400pxサイズの画像の中心に、400×209pxの長方形の画像をおけばいいんです。
欠けては困る画像を400×209pxで用意し、その上下に95.5pxずつ白い余白を付けて画像を作成すれば、絶対かけない、かな。
タイムラインで見たときダサいけど・・・。
↑ニュースフィードで見るとこのように、真ん中の長方形部分が綺麗に表示されています。
↑タイムラインで見るとこうです。青い部分は、実際には白い余白です。
