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のコメントプラグインです。

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

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

fb:adminsを指定する

まずは自身がWebサイトの管理者であることをコメントプラグインに知らせるために、OGPの属性であるfb:adminsを指定します。

OGPってなんぞ？という方は、下記の記事を参照ください。

• Facebookのいいね！ボタンを設置しても、OGPの設定がされていなければ意味が無い » INSPIRE TECH

fb:app_idを指定する

コメントを管理するためのFacebookアプリケーションのIDを、こちらもOGP属性であるfb:app_idとして指定します。

「アプリなんて作ったことないよ！」という方も、Facebookのいいね！ボタンを作成したことがあれば、その際に自動的にいいね！ボタン用にFacebookアプリケーションが作成されていますので、そちらを使うと手間が省けます。

すでに存在するFacebookアプリケーションのIDを確認するには、Facebookにログインした状態で下記のURLにアクセスします。

• Facebook開発者

ログインした人が作成したFacebookのアプリ一覧が表示されますので、その中の「アプリID」をメモして利用して下さい。

Facebookアプリケーションを作成したことが無い場合

Facebookアプリケーションを作成していない場合、上記URLにアクセスすると、下記のような画面が表示されます。

開発者登録

Facebookでアプリケーションを作成するには、必ず開発用のアプリケーションを許可し、さらにデベロッパー登録が必要になります。

このデベロッパー登録については、下記のURLに詳細が記載されていますので参照ください。

• Facebookデベロッパーに登録する際、携帯アドレスでアカウント認証する方法-がんばるデザイナ tuts!

アプリ作成

デベロッパー登録が完了したら再度先ほどの画面に戻り、右上にある「Create New App」をクリックします。

表示されたウィンドウに必要事項を記入してOKをクリックして下さい。
アプリケーション名は基本的に外部に公開するようなアプリケーションでは無いので、サイト名＋Appとしておくのがわかりやすくて良いと思います。、

CAPTCHAの確認後、アプリケーションの作成が完了します。
完了後の画面にあるApp IDをメモして利用して下さい。

fb:app_idを指定しない場合

fb:app_id、すなわちFacebookのアプリケーションIDを指定しないと、コメントプラグインの設定画面は表示されますが、機能が大きく制限されてしまいます。

Facebookのアプリケーションは、必ずしもFacebookのソーシャルプラグインの導入には必要ではないのですが、導入することによって、今回紹介している機能を含めて、下記のような機能が利用できます。

• すべてのコメントをFacebookアプリケーションの管理画面から一括で管理できる
• Webページに設置したコメントプラグインで、Facebookアプリケーションのコメント管理画面と同等の設定が可能になる
• いいね！ボタンを押してくれた人全員にアプリケーションを通じてお知らせなどを送ることができる

よほどのことがない限り、Webサイト用にひとつ作っておくことで、その後の管理が楽になります。

URL LinterでFacebookに通知

上記の作業が終わったところで、Fecebookにログインしてから、設置したURLをURL Linterで読み込んでみましょう。

• URLリンター – Facebook開発者

この作業は行わなくても、約一日で反映されるのですが、一応正しく設置されているのを確認する為に、読み込んでおくと良いでしょう。

すると、コメントプラグインのUIが下記のように変わります。

ここで「設定」リンクをクリックすると、最初に紹介したようなコメントプラグインの挙動をカスタマイズ画面が表示されるようになります。

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

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

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

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

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

しかし、この管理用ページへのリンクですが、いいね！ボタンの対象である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）

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

• URLリンター – Facebook開発者

このツールがいったい何かというと、入力された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上のキャッシュを書き換えてくれます。

• firegoby » Blog Archive » 保存の際にfacebookのクローラーを再度お招きするWordPressプラグイン

• WordPress › WP-OGP « WordPress Plugins

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

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

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

• WP-OGPを改造してマルチサムネイル対応＆正しいプロパティ表記にしました | Sinack

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

カスタマイズしたWP-OGPプラグインの特徴

本プラグインはWordPress3.0以上での対応となります。(2011.08.28)

下記のような管理画面を新たに設けています。

説明文に利用するテキストをある程度選べる

オリジナル版のプラグインでは、og:descriptionに利用するテキストを、下記のような優先順位で取得して利用しようとします。

1. descriptionというキー名のカスタムフィールド
2. 投稿の抜粋
3. 投稿の本文

本プラグインでも、この利用する優先順位は変更していませんが、下記の項目の設定を可能にしました。

• 利用するカスタムフィールドのキー名を変更可能
• 投稿の抜粋を利用するかどうかを選択可能

設定を行って頂くことで、ある程度ですがog:descriptionに利用されるテキストを、選択できるようになっています。

テキストの抽出方法を単語区切りか文字数かを選べる

オリジナルのWP-OGPプラグインでは、og:descriptionに利用するテキストを、単語数で75単語分を抽出して利用します。

そのため、単語区切りが存在しない日本語では、テキストがそのままズラーッと改行無しで入ってしまい、og:descriptionが異常に長くなるという現象が発生します。

それを防ぐために、

• 単語数で抽出する
• 文字数で抽出する

を選択できるようにしました。

その際、抽出する単語数または文字数を、固定の75単語（文字）ではなく、任意の数値で指定する事が可能になっています。

記事中に利用された画像をog:imageとして利用できる

オリジナルのプラグインでは、og:imageに利用する画像を、投稿のアイキャッチ画像が存在する場合はアイキャッチ画像を、存在しない場合はプラグインに含まれるデフォルトの画像が利用されるようになっています。

この場合、アイキャッチ画像が設定されていないとデフォルトの画像が利用されるため、og:imageに任意の画像を指定するにはアイキャッチ画像を利用しなくてはなりません。

それは少し面倒なので本プラグインでは、画像の利用方法を下記の2つから選べるようにしました。

• アイキャッチ画像を利用する
• 記事中の画像を利用する

og:imageのサイズとアスペクト比の自動チェック

Facebookのog:imageの仕様では、画像のサイズは最低で縦横50px以上、アスペクト比は最大で3:1と規定されています。

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を記事中の画像から利用する場合、画像の縦横のサイズとアスペクト比を自動的にチェックして、規格に合わない画像は埋め込まないようにしました。

og:imageの最大数を設定できる

記事中の画像を使う設定の場合、その最大数を設定できるようにしました。
0を指定した場合は、記事中の画像を全てog:imageとして埋め込みます。

デフォルトでog:imageに利用される画像のURLを指定できる

オリジナルのプラグインでは、アイキャッチ画像が無かった場合に、デフォルトでog:imageに利用される画像はプラグインのディレクトリに含まれていて、変更するにはプラグインのファイルに手を加えなくてはいけません。

それが面倒なので、デフォルトでog:imageに利用される画像を、URLで指定できるようにしました。

常にデフォルトの画像を利用するかを指定できる

og:imageに利用する画像を本文から抽出して使う場合、その最後に、必ずデフォルトの画像を含められるようにしました。

これは、og:imageが複数指定されているページでFacebookのシェアボタンをクリックした場合に、ウォールに表示する画像をシェアしたユーザーが選ぶことができるためです。

もし今後、いいね！ボタンでも同等の機能が実装されたり、他のサービスでも複数のog:imageを利用した機能が実装された場合を考えて、本機能を付けてあります。

プラグインのダウンロード

プラグインをgithubでの管理に移行しましたので、改変履歴や過去のバージョンなどはそちらからご覧ください。（2011.07.09）

プラグインファイルは、下記のリンクからダウンロードしてください。

WP-OGP customizedプラグインをダウンロード

インストール方法

解凍してできたwp-ogp-customizedディレクトリを、wp-content/plugins/ディレクトリにアップロードしてください。
その後、プラグインの一覧から有効化してください。

注意

本プラグインは、オリジナルのWP-OGPプラグインとは共存できませんので、利用する際はオリジナル版を停止してから本プラグインを有効にしてください。

不具合などのご報告

twitterまたはFacebook、もしくは本記事のコメントでご連絡下さると有り難いです。

OGPっていったい何？という方や、Facebookやmixiのいいね！ボタンは設置してみたけどOGPなんて知らないという方は、下記の記事をご覧ください。

• Facebookのいいね！ボタンを設置しても、OGPの設定がされていなければ意味が無い « INSPIRE TECH

OGP属性のog:imageは、Webページのサムネイルを示すもので、正しく指定しておくと、例えばFacebookのいいね！ボタンが押された時などに、リンクやその他情報と共に、そのサムネイルがボタンを押した方のウォールに投稿されます。

実はこのog:imageですが、他のOGPタグと違って、以下のように複数指定しておくことができます。

<meta property="og:image" content="http://inspire-tech.jp/wp-content/uploads/2011/07/facebook-wall-300x134.png" />
<meta property="og:image" content="http://inspire-tech.jp/wp-content/uploads/2011/07/facebook-share-300x258.jpg" />

複数指定する事でどんな意味があるかというと、Facebookのシェアボタンをサイトに埋め込んでいる場合に、クリックした人がシェアする際のサムネイルを、自由に選んでもらうことができるようになります。

Facebookのいいね！ボタンではあまり意味なし

ただ、Facebookのいいね！ボタンに限ってみた場合、og:imageを2つ以上記述する意味はあまりありません。

いいね！ボタンはシェアボタンとは違い、og:image属性が複数指定されていても、シェアボタンが押された場合の画面のような、画像の選択は表示されません。

選択が表示されないばかりか、設定してあるog:image属性の中から1つが、Facebookによって自動的に利用されます。

しかしながら、この自動的に選択する部分の仕様が不透明で、どういった条件で1枚の画像を選ぶのか、その条件が全くわかりません。

画像サイズやファイル名、アスペクト比などでソートされているのかと思っていろいろと実験してみましたが、特に関係が無いようでした。

今後のソーシャルメディア側の対応に期待

今後、各ソーシャルメディアやそのほかのサービスで、さらにOGPを使った機能が増えてくると思いますが、いつ如何なるサービスで、この複数指定が生きてくるかわかりません。

現状ではあまり使い道はないですが、覚えておいても損はないでしょう。

今回はOGPとは何なのか、どのように設定すれば良いのかを調べてみました。

OGPとは？

OGPとは一言で言うと、そのWebサイトのタイトルやWebサイトの説明、制作者の情報やWebサイトの種別などを、ソーシャルメディア側から正しく認識できるように決まった形で記述しておく仕組みを作ろう、というものです。

OGPについての説明は下記サイトが非常にわかりやすく詳細に載っていますので、OGPを知らない方は是非目を通して下さい。

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

Facebookのいいね！ボタンはOGPが必須

タイトルにも記述しましたが、Facebookのいいね！ボタンを設置したページにOGPが設定されているかされていないかで、Facebook上での挙動に大きな差が出ます。

まず、OGPが設定されていないWebページのいいね！ボタンがクリックされた場合、クリックしたユーザーのウォールにWebサイトの情報が表示されるだけで、それ以上は特に何もありません。

しかし、OGPが設定されているWebページのいいね！ボタンがクリックされた場合、クリックしたユーザーのウォールと、その友達のニュースフィードにWebサイトの情報が表示されます。

これは、とてつもなく大きな差です。

たった一人のユーザーに認知されて終わるか、そのユーザーのつながっているユーザー全員に認知されるかの差になるからです。

つながりの多いユーザーがいいね！をクリックしてくれれば、そのつながっているユーザー全員にWebサイトの情報が通知されるわけですから、そこからさらに大きな反響を呼び、「いいね！」が「いいね！」を呼ぶことも、大いに考えられます。

OGPの設定

と、非常に重要な役割を担うOGPですが、設定自体は非常に簡単です。
決められた属性を持つmetaタグを、決まったフォーマットでWebページのheadタグ内に記述しておくだけでいいのです。

metaタグを設置するだけ

metaタグの property属性にOGPの属性名を指定し、content属性にその内容を記述します。

<meta property="属性名" content="内容" />

例えば下記のように設定します。

<meta property="og:site_name" content="Webサイト名" />
<meta property="og:title" content="Webページのタイトル" />
<meta property="og:url" content="http://example.com/test_page.html" />
<meta property="og:description" content="サンプルのWebページです。" />

OGPの属性

OGPの代表的な属性を紹介します。

og:site_name

Webページの所属するWebサイトのタイトル

og:title

Webページのタイトル。

og:type

Webページの種類。OGPの仕様で規定されている種類一覧から選択します。

og:image

Webページのサムネイル画像のURL。この属性に限り、複数設置しても大丈夫なようです。

og:url

WebページのURL。ブログの記事などに設定する場合は、この属性にパーマリンクを出力するテンプレートタグを仕込みましょう。

og:description

Webページの簡単な説明です。

上記以外にもOGPには多数の属性がありますので、興味がある方は下記のOGPの詳細仕様を参照して下さい。

• The Open Graph Protocol

Facebook独自属性

FacebookではOGP用の独自属性を定義していて、これを設定することでFacebookプラグインの機能を拡張したり、Facebookでいいね！ボタンのクリック率を計ることが出来る「インサイト」機能などを利用することが可能になります。

fb:admins

Webページの管理者が誰であるかをFacebookのユーザーIDで指定します。管理者が複数存在する場合、ユーザーIDを半角カンマで区切って入力できます。

fb:app_id

Webページと結びつけたいFacebookのアプリケーションIDを指定します。

fb:page_id

Webページと結びつけたいFacebookのファンページIDを指定します。

例えばFacebookコメントプラグインを利用している場合、fb:adminとfb:app_idを指定していると、コメント欄をカスタマイズできる「管理者画面」を表示することが可能になります。

Facebookのいいね！ボタンからのアクセスを一覧・解析できるインサイト機能については下記の記事をご覧下さい。

• Facebookインサイト 「いいね！」でわかるアクセス解析！簡単設定！: 世界中の１％の人々へ

ソーシャルメディア毎の独自属性

上記の他にも、Facebookやmixiなど各ソーシャルメディア毎に独自に追加された属性もあるので、設置の際は各ソーシャルメディアのOGPの説明を、合わせてチェックしてみてください。

FacebookでのOGPの詳細説明（英語）

Open Graph protocol – Facebook開発者

※ OGPの基本属性からFacebook用の独自属性まで、かなり詳細に記載されていますので是非チェックしてください。

mixiでのOGP拡張属性の説明

技術仕様 << mixi Developer Center (ミクシィ デベロッパーセンター)

FacebookでOGPタグの簡単生成

Facebookではサイト毎のOGPタグを簡単に生成できるフォームがあります。
いいね！ボタンを生成するフォームと同一のページに存在するので、いいね！ボタンを設置する際には、こちらも一緒に設置してしまったほうが良いでしょう。

下記のURLにアクセスし【Step 2 – Get Open Graph Tags】という見出しの下にあるフォームが、OGPの生成フォームです。

• Like Button – Facebook開発者

フォームにWebページのURLや説明などを入力することで、そのWebページ用のOGPタグを自動的に生成してくれます。

WordPressでのOGP

WP-OGPプラグインに設定画面を設けて、いろいろな機能追加を施したプラグインをリリースしました。（2011-07-02）

WordPressでは非常に簡単にOGPを導入できる仕組みとして、WP-OGPプラグインというものが存在します。

• WordPress › WP-OGP « WordPress Plugins
• ブログを一瞬でOGP対応にしてソーシャルサイトでの集客力をUPさせられるWordPressプラグイン「WP-OGP」:phpspot開発日誌

プラグインをダウンロードして有効にするだけで、各ブログ記事毎のOGPタグを自動的に埋め込んでくれます。