【OGP対応】 og:image で画像を指定しても表示されない… →画像サイズを確認しよう!

Posted by localpocky on 30.2011 ブログ作成   0 comments   0 trackback
Tag :Facebook OGP




先日、
Facebookの「いいね!」ボタンの盲点。ボタンを設置するだけでは、押しても情報は広まらない。→OGPに対応しよう!
という記事を書きました。

OGP というのは、ブログなどの記事を「いいね!」ボタンなどを使って Facebook でシェアするときに、どのようにニュースフィードに表示させるかを制御する仕組みのことです。(詳しくはこちら)
以下のようなタグで指定します。

<meta property="og:title" content="記事のタイトル" />
<meta property="og:type" content="article" />
<meta property="og:description" content="記事の要約" />
<meta property="og:url" content="記事のURL" />
<meta property="og:image" content="画像のURL" />
<meta property="og:site_name" content="サイトのタイトル" />
<meta property="fb:app_id" content="取得したFacebookのアプリID" />



上のように、OGP では、og:image という meta タグを使って、ニュースフィードに表示させる画像を指定できます。
ところが、og:image を指定しても、なぜか画像が表示されないんですよ…。

110630_1.png

おかしいなーと思ったら、og:image で指定している画像のサイズが小さすぎたのが原因でした。
最小サイズは 50x50 pixel で、それより小さい画像は認識されないようです。

自分のプロフィール画像は 48x48 だったので、認識されなかったんですね。
画像サイズを 50x50 に変更したら、ちゃんと画像が表示されるようになりました!

110630_2.png

画像サイズについては、Web ページが OGP 対応できているかをチェックする「URLリンター」でも警告が出ない場合があるので、注意が必要です。

自分の場合は、ブログ記事の URL でチェックしたときには警告が出ず、ブログのトップページの URL を指定したときに1回だけ警告が出たので、画像サイズが原因だということに気が付きました。
トップページとは盲点でした…。

OGP で思うように画像が表示されなかったら、画像サイズをチェックしてみてくださいね!


■追記:2012/05/04
og:image に、最小サイズの 50x50 pixel の画像を使っていたら、Facebook の「デバッガー」(旧「URLリンター」) で、いつの間にかエラーが出るようになっていました。

ogimage_warning.png

Tiny og:image:
All the images referenced by og:image must be at least 200px in both dimensions.
Please check all the images with tag og:image in the given url and ensure that it meets the minimum specification.


og:image は少なくとも 200x200 pixel でなければならない、と書かれていますね。
試しに、200x200 pixel の画像に変えたら、エラーが表示されなくなりました。


■追記:2012/05/24
og:image で指定した画像が表示されないときは、一度記事の URL を「デバッガー」(旧「URLリンター」) に送信すると、画像が表示されるようになる場合があるようです。
詳しくは、こちらの記事をどうぞ。↓

【OGP対応】 OGPタグが認識されない… →「URLリンター」でキャッシュさせよう! - localpocky's reports



このブログの更新情報を、
RSSフィード RSSFacebookページ FacebookページGoogle+ページ Google+ページTwitter Twitter で流しています。
もし記事を気に入ってくださいましたら、ご覧いただけるとうれしいです!





同じカテゴリの関連記事

  • お名前
  • タイトル
  • メールアドレス
  • URL

  • password
  • 管理者にだけ表示を許可する

trackbackURL:http://nishi248.blog60.fc2.com/tb.php/969-c89bc923

プロフィール

localpocky

Author:localpocky
電車好きを返上して、にわかに興味が出てきたのが野鳥。姿を見たり鳴き声を聞くと和みます。好きな鳥はハクセキレイ。カワセミを一度この目で見てみたいです。
読書は1週間に1冊のペース。図書館も愛用しています。
2007年にMacにスイッチ。iPhoneも活躍中。
ささやかな楽しみは、手挽きのミルで豆を挽いてコーヒーを入れること。自分で入れたコーヒーはおいしい!
ブログの紹介など → こちら

HSタグクラウド

カレンダー

05 | 2017/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -

検索フォーム

トラックフィード

track feed リンク元サイト