Open Graph protocolの画像クロールについて
metaタグを追加してFacebookに対応する方法とハマりやすいポイント | KAYAC DESIGNER'S BLOG - デザインやマークアップの話
Open Graph protocolって？
Open Graph - Facebook developers facebookが提唱しているウェブサイトをソーシャル化する決まりごと。
詳しい決まりごとはThe Open Graph protocolでご確認下さい。
| サービス | 名称 | URL |
|---|---|---|
| いいね！ | http://developers.facebook.com/docs/opengraph | |
| mixi | mixiチェック | http://developer.mixi.co.jp/connect/mixi_plugin/mixi_check/spec_mixi_check |
今回は、画像のクロールについて調査してみました。
アクティビティのクリック数を上げるとしたら画像を入れたいですもんね。
その１． 明示的に指定してみる
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns:og="http://ogp.me/ns#" xmlns:mixi="http://mixi-platform.com/ns#" xmlns:fb="http://www.facebook.com/2008/fbml"> <head> <meta http-equiv="content-type" content="text/html;charset=euc-jp"> <!-- Open Graph protocol --> <meta property="og:image" content="http://hebita.jp/facebook/share/genki.jpg"/> <meta property="og:url" content="http://hebita.jp/facebook/share/shareTest01.html"/> <meta property="og:site_name" content="蛇田.jp"/> <meta property="og:description" content="Open Graph protocolのテストです。"/> <!-- /Open Graph protocol --> <title>Shareテスト1</title> </head> <body> <a href="javascript:void(0);" onclick="window.open('http://mixi.jp/share.pl?u=http://hebita.jp/facebook/share/shareTest01.html&k=92af711d79a9f32868a0ab8e47d5458680d2f049','share',['width=632','height=456','location=yes','resizable=yes','toolbar=no','menubar=no','scrollbars=no','status=no'].join(','));">mixiチェック</a> - <a href="javascript:void(0);" onclick="window.open('http://facebook.com/share.php?u=http://hebita.jp/facebook/share/shareTest01.html','share',['width=632','height=456','location=yes','resizable=yes','toolbar=no','menubar=no','scrollbars=no','status=no'].join(','));">facebook Share</a> </body> </html>
サンプル1
結果：クロールしてくれます
その２． 明示的に書かず自動でクロールさせてみる
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns:og="http://ogp.me/ns#" xmlns:mixi="http://mixi-platform.com/ns#" xmlns:fb="http://www.facebook.com/2008/fbml"> <head> <meta http-equiv="content-type" content="text/html;charset=euc-jp"> <!-- Open Graph protocol --> <meta property="og:url" content="http://hebita.jp/facebook/share/shareTest02.html"/> <meta property="og:site_name" content="蛇田.jp"/> <meta property="og:description" content="Open Graph protocolのテストです。imgタグの画像をクロールさせます。"/> <!-- /Open Graph protocol --> <title>Shareテスト2</title> </head> <body> <p> <img src="http://hebita.jp/facebook/share/genki.jpg"> </p> <a href="javascript:void(0);" onclick="window.open('http://mixi.jp/share.pl?u=http://hebita.jp/facebook/share/shareTest02.html&k=92af711d79a9f32868a0ab8e47d5458680d2f049','share',['width=632','height=456','location=yes','resizable=yes','toolbar=no','menubar=no','scrollbars=no','status=no'].join(','));">mixiチェック</a> - <a href="javascript:void(0);" onclick="window.open('http://facebook.com/share.php?u=http://hebita.jp/facebook/share/shareTest02.html','share',['width=632','height=456','location=yes','resizable=yes','toolbar=no','menubar=no','scrollbars=no','status=no'].join(','));">facebook Share</a> </body> </html>
サンプル2
結果：クロールしてくれます
推奨のサイズだからクロールしてくれました。
その３． 画像の自動クロールを禁止にしてみる
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns:og="http://ogp.me/ns#" xmlns:mixi="http://mixi-platform.com/ns#" xmlns:fb="http://www.facebook.com/2008/fbml"> <head> <meta http-equiv="content-type" content="text/html;charset=euc-jp"> <!-- Open Graph protocol --> <meta property="og:url" content="http://hebita.jp/facebook/share/shareTest03.html"/> <meta property="og:site_name" content="蛇田.jp"/> <meta property="og:description" content="Open Graph protocolのテストです。imgタグの画像をクロールさせません。"/> <meta name="mixi-check-robots" CONTENT="notitle, nodescription, noimage"> <meta property="og:image" content=""/> <!-- /Open Graph protocol --> <title>Shareテスト3</title> </head> <body> <p> <img src="http://hebita.jp/facebook/share/genki.jpg"> </p> <a href="javascript:void(0);" onclick="window.open('http://mixi.jp/share.pl?u=http://hebita.jp/facebook/share/shareTest03.html&k=92af711d79a9f32868a0ab8e47d5458680d2f049','share',['width=632','height=456','location=yes','resizable=yes','toolbar=no','menubar=no','scrollbars=no','status=no'].join(','));">mixiチェック</a> - <a href="javascript:void(0);" onclick="window.open('http://facebook.com/share.php?u=http://hebita.jp/facebook/share/shareTest03.html','share',['width=632','height=456','location=yes','resizable=yes','toolbar=no','menubar=no','scrollbars=no','status=no'].join(','));">facebook Share</a> </body> </html>
サンプル3
結果：mixiは自動クロールを避けられるがfacebookには自動クロールされる
下記metaタグを入れることでmixiの画像を含む各要素をmixiチェックに投稿しないように出来ます。
<meta name="mixi-check-robots" CONTENT="notitle, nodescription, noimage">
name="mixi-check-robots"からも分かるように、Open Graph protocolをmixiが独自拡張したものみたいですね。。
画像をどうしてもクロールさせたくない時には、下記のように書けばいけると思ったのですが。。
<meta property="og:image" content=""/>
facebookにクロールされちゃいます。
ですので、どうしても画像をクロールさせたくなければ、上記og:imageのcontentにNO IMAGEのイメージを埋め込めるといった対応になると思います。
ちょっと、ダサイけど。。
他に、facebookに画像をクロールさせない方法があったら教えてくださいー！
