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

OGP属性のog:imageは複数指定することができる

Facebookで利用され初めてから、最近ではmixiやgreeなど日本の大手ソーシャルメディアも対応し、利用者の増え続けているOGPですが、その属性の1つであるog:imageには、複数の画像が利用できることはご存知でしょうか?

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

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を使った機能が増えてくると思いますが、いつ如何なるサービスで、この複数指定が生きてくるかわかりません。

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

Facebookのいいね!ボタンがとても流行していますが、いいね!ボタンの真の力を発揮させるためには、Open Graph Protocol(OGP)の設定が不可欠なのはご存じでしょうか?

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

CONTINUE READING

ブログを読んで下さった方からのフィードバックを単純に得る方法として、一番手っ取り早いのが、最近流行のソーシャル系のボタンを配置することです。

自分もブログリニューアルに伴って、最近ではアクセスアップに欠かせないと言われるFacebookのいいね!ボタン、6月に正式サービスがスタートし、流行の兆しを見せているGoogle+1(PlusOne)ボタンの設定を行ったので、その設定方法について簡単にまとめてみました。

CONTINUE READING