FacebookのOpen Graph Protocolの解説ページにはOGPに関する詳しい説明が記載されていますが、og:imageの仕様に関して下記のような記載があります。

og:image – An image URL which should represent your object within the graph. The image must be at least 50px by 50px and have a maximum aspect ratio of 3:1. We support PNG, JPEG and GIF formats. You may include multiple og:image tags to associate multiple images with your page.

Open Graph protocol – Facebook開発者

要はog:imageに利用する画像は、縦横のサイズが50ピクセル以上、アスペクト比は3:1までという仕様のようで、この仕様にあわない画像は取り扱ってくれません。

というような簡単な説明なのですが、あまりに簡単すぎるためか、このog:imageのアスペクト比に関しては、横長の画像なら大丈夫だけど縦長の画像はダメ!という誤解をしている方を、ちらほら見かけます。

アスペクト比の定義

しかしながら、このアスペクト比というのは、Wikipediaによると下記のように解説されています。

アスペクト比(アスペクトひ)またはアスペクト・レシオ(Aspect Ratio)とは2次元形状の物の長辺と短辺の比率を指し示す言葉。

アスペクト比 – Wikipedia

アスペクト比とは長辺と短辺の比率ということになので、縦の長さが横の長さの3倍だったとしても、3:1という比率で表現できるわけですね。

ということで、Facebookのog:imageに利用できる画像の規格は、正しくは長辺の長さが短辺の3倍までの画像となります。

実際に登録してみる

実際に縦長の画像をog:imageに登録してみました。

これを指定したページを、FacebookのURL Linterで読み込ませてみます。

URL Linterにも正しく認識されていますね。

Facebookのコメントプラグインは設置も簡単で、さらにフィードバックも得られやすい素晴らしいソーシャルプラグインだと思いますが、ちょっとした設定を加えるだけで「コメントの管理画面」を表示できるので、その方法を簡単にまとめてみました。

以下は何も設定していないFacebookのコメントプラグインです。

コメントができる以外に、特に機能はありません。

ここで、ちょっとした設定を加えるだけで下記のような、コメントのモデレーションやコメントプラグインの挙動を設定できる、管理画面を表示することができます。

CONTINUE READING

OGP属性であるfb:adminsに自分のFacebook IDを指定したWebページに、Facebookでログインした状態でアクセスすると、そのWebページに設置したいいね!ボタンの横に「管理用ページ」というリンクが表示されるのにお気付きでしょうか?

このリンクから管理用ページにアクセスすると、Facebookページ(旧ファンページ)のような画面になります。

実は管理用ページというのは、外部のWebページ用のFacebookページのようなもので、管理者であるユーザー以外は見られないということ以外、ほぼFacebookページと同一の機能を持っています。

そのため、いいね!ボタンを押してファンになってくれた方などに、後から一斉にお知らせを配信することが可能であり、使い方によっては非常に便利なページです。

詳細が下記のサイトに載っていますので、是非一度ご覧下さい。

しかし、この管理用ページへのリンクですが、いいね!ボタンの対象であるWebページのog:type属性がarticleの場合には、表示されず、アクセスすることができません。

よって、上述のような使い方ができないのです。

Facebook側の仕様

これはFacebook側のポリシーがあるようで、

あと、ひとつだけ注意すべきなのは og:type が article なものはこのお知らせの機能は使えません。 これは、 article は一時的なものでリアルなモノを指さない(ブログの記事など、それ自体がファンの対象ではない)からだそうです。

フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か – IT戦記

ということで、バグなどでは無く明確な仕様のようです。

表示されない場合はog:typeをチェックしてみる

最初に、

意外と気付いていない方が多いのがこの3つ目です。 冒頭で「外部ページをFacebookページに見せかけれる」と書いたかと思います。 実は、OGPを設定すれば、普通のFacebookページとは違う、「外部ページ用のFacebookページ」が生成されています。 2 この「外部ページ用のFacebookページ」のウォールにコメント・URL等を投稿する事で、そのページに「いいね!」を押した人のニュースフィードに、アップデート通知を送れるのです。

<遂に公開>SEOの2倍のアクセスを稼ぐFacebook活用術。皆が知らない「いいね!」ボタンと「OGP」の設定方法、超解説:ガイアックスソーシャルメディア ラボ/Facebook・twitterの企業利用法についての研究機関

という記述を見て管理用ページの存在を知ったのですが、このサイトではog:type属性がarticleの場合に管理用ページが生成されない点については触れていないため、気づかない方もいらっしゃると思います。

Facebookのいいね!ボタンを設置してfb:adminsを指定してみたけど、管理用ページへのリンクが出ない!とお嘆きの方、当該Webページのog:type属性が、articleになっていないかを確認してみてください。

管理用ページを削除した場合

管理用ページは、一度アクセスするとFacebookページと同様に、Facebookのサイドバーに表示されます。

現在は表示されないようです。アクセスするためには、いいね!ボタンの横にある「管理用ページ」のリンクから行くしか無いようです。(2011.07.09)

そこからFacebookページと同様に管理できるのですが、ここで管理用ページを「削除」をしてしまった場合、次から管理用ページにアクセスできなくなる場合があるようです。

管理用のFacebookページは、いいね!ボタン横のリンクからアクセスするか、URL Linterで当該のページを解析した際に自動生成されるようなのですが、自分の環境だと再生成されなくなってしまいました。

バグなのか仕様なのかわかりませんが、念のため管理用ページの削除をする場合は気をつけて下さい。

どうやらこのエラーはバグのようです。Facebookのバグトラッカーで議論されているようなので、続報があり次第また追記します。 (2011.07.08)

バグの解決がなされたようです。バグトラッカー上でも解決の報告が見られます。自分のWebサイトもURL Linterでのエラーは表示されなくなり、いいね!ボタンにも、正しく「管理用ページ」と「インサイト」のリンクが表示されるようになりました。(2011.07.09)

WebサイトにOGPタグを設定したとき、果たして正しく設定できているのか?と疑問になったり、Webサイトを編集してOGPタグを書き換えたのに、Facebookのウォールやニュースフィードに投稿されたWebサイトの情報が更新されなかったことはありませんか?

そんな時便利なのが、FacebookのURL Linterです。
下記のURLからアクセスできます。

このツールがいったい何かというと、入力されたURLのWebページに正しくOGPタグが設定されているかをチェックして、正しくなければエラーを、正しければどういった内容で設定されているかをレビューしてくれます。

いわば、OGPのチェックツールですね。

Facebookのキャッシュも削除してくれる

またこのツールは、入力されたURLに関するFacebook上の古いキャッシュデータを削除してくれる役割も持っています。

基本的にFacebookもWebサイトクローラーのような物を持っていて、Webサイトに設定されたOGP情報などをキャッシュとして蓄えています。

いいね!ボタンやシェアボタンなどでWebサイトがFacebookのウォールなどに流れる際は、キャッシュがあればキャッシュからデータを読み込むため、一度Facebookに掲載されたWebサイトのOGPなどを変更しても、再度FacebookのクローラーがWebサイトのデータをキャッシュしてくれないと、データが更新されません。

URL Linterは、入力されたURLの古いキャッシュを削除して、新しいデータで上書きしてくれます。

そのため、OGPを設定したり、設定し直した場合に利用する事で、新しい情報を即Facebookに反映させることができます。

WordPress用のプラグインも

WordPressを利用していて、一度公開した記事がFacebookにキャッシュされてしまっている場合、タイトルや内容を変更したとしても、やはりFacebookのキャッシュが優先されてしまうために変更が反映されません。

そんな時、下記の記事で紹介されているプラグインを利用すると、URL Linterをフックして即Facebook上のキャッシュを書き換えてくれます。

WordPressで非常に簡単にOGPが実装できることで有名な、WP-OGPプラグインというものがあります。

自分もFacebookのいいね!ボタンを導入したときに試してみたんですが、ブログ名やブログの記事タイトルはもちろん、ブログ記事にアイキャッチ画像を指定すれば、そのアイキャッチ画像をブログ記事のサムネイルとしてOGPタグを生成してくれたりと、非常に便利です。

ただ、アイキャッチ画像が存在しない場合に利用される、デフォルトのサムネイル画像が変更できなかったり(変更するにはプラグインに含まれるファイルを差し替える必要がある)、Facebook用のOGPタグであるfb:app_idがスペルミスっていたりと、少し不満な点もありました。

そんな中、下記サイトでマルチサムネイルに対応したWP-OGPプラグインを配布しているのを見つけました。

ブログ記事の中の画像を利用するというアイデアと、マルチサムネイルというアイデアが素晴らしかったので、自分もインスパイアされて、WP-OGPプラグインを詳細設定が出来るような設定画面付きに改造してみました。
CONTINUE READING