読者です 読者をやめる 読者になる 読者になる

復興ログ

未来の被災地にいるアナタと数十年後のキミたちへ。すべての記録を残します。

Open Graph protocolの画像クロールについて

metaタグを追加してFacebookに対応する方法とハマりやすいポイント | KAYAC DESIGNER'S BLOG - デザインやマークアップの話を参考にしながらOpen Graph protocolで画像をクロールさせない方法を検討してみました。

Open Graph protocolって?

Open Graph - Facebook developers facebookが提唱しているウェブサイトをソーシャル化する決まりごと。
詳しい決まりごとはThe Open Graph protocolでご確認下さい。

サービス 名称 URL
facebook いいね! http://developers.facebook.com/docs/opengraph
mixi mixiチェック http://developer.mixi.co.jp/connect/mixi_plugin/mixi_check/spec_mixi_check

今回は、画像のクロールについて調査してみました。
アクティビティのクリック数を上げるとしたら画像を入れたいですもんね。

facebook

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.

なっ、、なるほどね。

mixi

“image” で指定するサムネイル画像の URL については、以下の点をご留意ください。
1.指定された画像は mixi チェックのサーバから取得されますので、アクセス制限などを設定しないでください。
2.サムネイル画像は幅 76 ピクセル、高さ 76 ピクセル以上のサイズを推奨します。
3.PC 向けページの URL が指定されている場合、サムネイル画像は mixi の PC ページでも表示されるため、幅 180 ピクセル、高さ 180 ピクセル以上のサイズを推奨します。

facebookより大きめです。

その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: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
結果:クロールしてくれます

その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/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
結果:クロールしてくれます
推奨のサイズだからクロールしてくれました。

その3. 画像の自動クロールを禁止にしてみる

<!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に画像をクロールさせない方法があったら教えてくださいー!

広告を非表示にする