BLOG

2014年2月6日/ facebook, html, image

[HTML] facebookのURLリンク投稿でog:imageプロパティに設定したサムネイル画像が反映されない

 

 

facebookにオススメ記事を投稿したい時にURLを入力すると自動でサムネイル画像が表示されます。

facebook_url_link

 

 

これはmeta情報の “og:image” に画像を指定することで表示されます。

 

 

しかし、うまく表示されないケースがありますので解決方法を記載しました。(筆者も結構ハマりました…)

 

 

ケース① 画像が表示されない。

 

画像が表示されない場合や指定したものと違う画像が表示された場合は、下記のfacebookデベロッパーサイトにてデバックしてみましょう。URLに紐づくキャッシュがリフレッシュされることで正しい画像が表示される場合があります。

Facebook developers:デバッガー

 

facebook_openglaph

 

 

ボックスには自身のサイトURLを入力します。

入力後下記のような内容が表示されると思います。

 

facebook_debug

 

 

いろいろと情報が表示されますが気にしなくてオッケーです。”og:image” に意図した画像が表示されていたら、再度facebookにアクセスしURLを入力してください。

 

 

ケース② キャッシュクリア後も表示されない場合

 

デバッガーでキャッシュをクリアしたのに、デバッグ結果の “og:image” に意図した画像が表示されているのに意図した画像が表示されないことがあります。

 

 

 

上記のような警告が表示されていた場合は、画像のサイズに問題がある可能性があります。

 

facebookの仕様では 200 × 200 px以上、1500 × 1500 px以下のサイズが必要らしく、条件を満たさない場合は非表示もしくはサイト内の別の画像が表示されるようです。

ひとまず300pxぐらいのサイズを設定しておくと将来的に仕様変更があっても対応できるかもしれません。

 

 

ケース③ それでも表示されない場合

 

筆者のケースでは③まで解決しませんでした。

キャッシュもクリアし、画像サイズも仕様に合わせた。それでも意図した表示にならない。

 

その場合は、画像のフォーマットを確認しましょう。

pngでは表示されないケースがあるようです。

 

筆者はjpgに変更することで表示されました。

 

 

Resent Posts

Category