backyard.weblog

Main Contents

OGPで指定したサムネイル画像(og:image)の Facebook Timeline での表示が変わった気がするので実験してみた

/ Service, Web / , ,

Post

なんだか og:image のサイズが Facebook で 200px 以上推奨に【仕様変更された】っていう記事ばかり目につきますが、公式アナウンスを見つけるまで信じないよ!と思っている今日この頃。
仕様変更されたことは信じないけど、警告が出るのはいやだから256px四方の正方形に変えました。256px四方の正方形に深い意味はないのですけど。

それはさておき、いいねした後にTimelineで表示される画像のサイズがなんかおかしい(´・ω・`)と思ったので、実験してみました。

今回実験してみたサムネイルのサイズは下図の5種類で、Timelineでの見え方と、Newsfeedでの見え方をキャプチャしました。そして、あくまでも 2012年7月4日現在 の仕様です。

まずは 90px × 90px の正方形

ニュースフィードでの表示

ふつーに正方形に表示されています。

タイムラインでの表示

なんだこれ(´・ω・`)上下の部分どこいった?
余白あるんだしわざわざトリミングしてくれなくていいよ 。゚(゚´Д`゚)゚。

じゃあ噂の 200px 以上を採用して 200px × 200px の正方形

ニュースフィードでの表示

ふつーに正方形。

タイムラインでの表示

ちょっと大きくなった!けど同じじゃないか(´・ω・`)上下の部分どこ?

ではもっと大きい正方形ならどうなるの?ということで 256px × 256px の正方形

ニュースフィードでの表示

正方形ですね。

タイムラインでの表示

やっぱり長方形。でも、200pxの正方形の時と表示部分の大きさが変化しなかったので、最大が 155px × 114px っぽいことはわかりました。

つぎに、Timeline合わせで 155px × 114px の長方形

ニュースフィードでの表示

かたくなに正方形ですね。

タイムラインでの表示

ぴったり☆でも200px以下なのでデバッガーで警告はでます。

ということで警告が出ない具合でTimelineに合わせて 200px × 150px の長方形

ニュースフィードでの表示

正方形です。短辺合わせのリサイズでトリミングされてるのでしょう。確かめていません。

タイムラインでの表示

だいたいぴったりですね。

タイムラインに合わせるよりニュースフィードに合わせたほうがいいと思うので、デバッガーで警告が出ないように考慮した場合 200px × 200px 以上の正方形で良いのではないかなと思いました。

サムネイルがロゴの場合、Timelineでロゴの部分がトリミングされるのはどうなのか・・・

ロゴが切れちゃうのはいかがなものかと思うんです。
なので、200px × 200px 以上の正方形の中に配置するLOGO位置に気をつけよう!と思いました。例えば下の画像は、200px × 200px の正方形にLOGOを配置する位置のサンプルです。グレーの濃い部分(200px × 150px)の中にLOGOを置いてみるテストです。

▼▼▼▼ 結果はこんな感じでした。

ただし、ロゴの形によっては、印象が弱くなる(正方形や縦長のロゴなど、小さくなる)ので、必ずしもこれがベストではないです。参考程度に☆

おまけのお話:「いいね」と「シェア」では Timeline での表示が異なっていた。。。

上がシェアしたときで、下がいいねしたときです。
リンクをシェアした場合は正方形なんですね。

ということで実験終わり!

半年くらい前に、OGPで指定したサムネイル画像の大きさは Facebook Timeline でどうなるの?という記事を書きましたが、この頃の仕様はもう昔のお話のようなので信じないでくださいね。

  • Check
  • このエントリーをはてなブックマークに追加
  • Clip to Evernote

Similar Posts

Add Comment

WP-SpamFree by Pole Position Marketing

Comments

From:urakey
July 06, 2012 (Fri)

og:image の Facebook Timeline での表示が変わった気がするので実験してみた > http://t.co/yrHSBt7i

From:nsyan
July 09, 2012 (Mon)

OGPで指定したサムネイル画像(og:image)の Facebook Timeline での表示が変わった気がするので実験してみた :: backyard.weblog http://t.co/ttUbc2HS @chocolateboardさんから

From:y_iso
July 11, 2012 (Wed)

200×200の枠に200×150か…/OGPで指定したサムネイル画像(og:image)の Facebook Timeline での表示が変わった気がするので実験してみた :: backyard.weblog http://t.co/ElgykAMi @urakeyさんから

From:undo
July 12, 2012 (Thu)

まぁ、そんなに細かいことは気にしないで印象第一の画像用意しよう / “OGPで指定したサムネイル画像(og:image)の Facebook Timeline での表示が変わった気がするので実験してみた” http://t.co/zamPaGH8

From:gryng02
July 12, 2012 (Thu)

“OGPで指定したサムネイル画像(og:image)の Facebook Timeline での表示が変わった気がするので実験してみた” http://t.co/Ie3S6VFD

From:fooo
July 12, 2012 (Thu)

2012.07.04での調査結果

From:ttmjapan
July 12, 2012 (Thu)

OGPで指定したサムネイル画像(og:image)の Facebook Timeline での表示が変わった気がするので実験してみた :: backyard.weblog http://t.co/OztnSQ06 @urakeyさんから

From:actyway
July 13, 2012 (Fri)

OGPで指定したサムネイル画像(og:image)の Facebook Timeline での表示が変わった気がするので実験してみた :: backyard.weblog http://t.co/fs8r5dEc

From:actywav
July 13, 2012 (Fri)

OGPで指定したサムネイル画像(og:image)の Facebook Timeline での表示が変わった気がするので実験してみた :: backyard.weblog http://t.co/fs8r5dEc

From:hatojigoku
July 13, 2012 (Fri)

すっごい参考になった ▶ OGPで指定したサムネイル画像(og:image)の Facebook Timeline での表示が変わった気がするので実験してみた :: backyard.weblog http://t.co/G4FxMlbT @urakeyさんから

From:kurenai7
July 13, 2012 (Fri)

これはいい検証

From:redxiii_
July 13, 2012 (Fri)

これはいい検証 / “OGPで指定したサムネイル画像(og:image)の Facebook Timeline での表示が変わった気がするので実験してみた” http://t.co/lWUIRNzR

From:daybreak_dawn
July 13, 2012 (Fri)

OGPで指定したサムネイル画像(og:image)の Facebook Timeline での表示が変わった気がするので実験してみた :: backyard.weblog http://t.co/8pyQDt3i

From:solidstatesociety
July 13, 2012 (Fri)

納品する身になれば、ちょっとこれは、、、、、

From:sostso
July 13, 2012 (Fri)

納品する身になれば、ちょっとこれは、、、、、 / “OGPで指定したサムネイル画像(og:image)の Facebook Timeline での表示が変わった気がするので実験してみた” http://t.co/09JkQBBE

From:taboo65536
July 14, 2012 (Sat)

OGPで指定したサムネイル画像(og:image)の Facebook Timeline での表示が変わった気がするので実験してみた :: backyard.weblog http://t.co/cJKovSkZ @urakeyさんから

From:Antennix
July 26, 2012 (Thu)

似たような調査されてる方がいた!mixi、facebook、greeに対応可能なサムネイルとして、275*200の画像で、中央に200*200のアイコンを配置、両脇は余白にするような感じでいけてるかな?っていう感じでやってます。。

From:orangewaffle
August 03, 2012 (Fri)

OGPで指定したサムネイル画像(og:image)の Facebook Timeline での表示が変わった気がするので実験してみた :: backyard.weblog

From:garterblue
August 15, 2012 (Wed)

OGPで指定したサムネイル画像(og:image)の Facebook Timeline での表示が変わった気がするので実験してみた :: backyard.weblog http://t.co/cXvuXeL0

From:solo_design
September 22, 2012 (Sat)

OGPで指定する画像は200px以上じゃないとダメなのか…。勝手な仕様変更だなぁ。 http://t.co/O5H8T5Tt

From:saz_go
September 24, 2012 (Mon)

OGPで指定したサムネイル画像(og:image)の Facebook Timeline での表示が変わった気がするので実験してみた – http://t.co/U9CHil7O

From:evolutor_web
September 24, 2012 (Mon)

OGPで指定したサムネイル画像(og:image)の Facebook Timeline での表示が変わった気がするので実験してみた :: backyard.weblog http://t.co/N9pCHGt9 ややこしい仕様だなぁ・・・

From:actywave
October 04, 2012 (Thu)

OGPのimageのサイズあれこれ

From:actywav
October 04, 2012 (Thu)

OGPのimageのサイズあれこれ / “OGPで指定したサムネイル画像(og:image)の Facebook Timeline での表示が変わった気がするので実験してみた” http://t.co/uOwZyJo2

From:admi_shirai
November 09, 2012 (Fri)

OGPで指定したサムネイル画像(og:image)の Facebook Timeline での表示が変わった気がするので実験してみた :: backyard.weblog http://t.co/pSLADHFV @urakeyさんから

From:kaneinl
November 22, 2012 (Thu)

OGPで指定したサムネイル画像(og:image)の Facebook Timeline での表示が変わった気がするので実験してみた… http://t.co/Fbsi2yjP

From:shiory555
November 28, 2012 (Wed)

“OGPで指定したサムネイル画像(og:image)の Facebook Timeline での表示が変わった気がするので実験してみた” http://t.co/SwIHHwHE

From:okadaisaku
February 08, 2013 (Fri)

OGP:指定可能なサムネイル画像サイズのメモ
http://t.co/bYHAmYmN

From:sanata0130
February 12, 2013 (Tue)

Facebookのog:image問題

From:MONOT
March 29, 2013 (Fri)

“OGPで指定したサムネイル画像(og:image)の Facebook Timeline での表示が変わった気がするので実験してみた” http://t.co/vawM8rmV4o

From:actywave
April 01, 2013 (Mon)

OGPのimageのサイズあれこれ / “OGPで指定したサムネイル画像(og:image)の Facebook Timeline での表示が変わった気がするので実験してみた” http://t.co/uOwZyJo2

From:永野純一郎
April 08, 2013 (Mon)

ナイス実験。 / “OGPで指定したサムネイル画像(og:image)の Facebook Timeline での表示が変わった気がするので実験してみた” http://t.co/sQR25XG5HI

From:森本敏弘
April 09, 2013 (Tue)

[なるほど!!] OGPで指定したサムネイル画像(og:image)の Facebook Timeline での表示が変わった気がするので実験してみた :: backyard.weblog http://t.co/ij2PAc7i23 #ぽちっと!

Trackbacks

Trackback URL