facebookにブログ記事を貼り付けた時、アイキャッチ画像サイズがめちゃくちゃデカイ(5000ピクセル超えていたら)と違う画像がでてくる

タイトルのままなのですが、アイキャッチ画像へうっかりデジカメの大きなサイズ(5000ピクセルオーバーのサイズ)を設定していたら、うまく画像が表示されないトラブルに出会いました。この記事は公開の2016年01月10日の時点でのfacebookの挙動に基づいて書いています。

このブログ(ものくろぼっくす)の場合は利用しているテーマ(DigiPressさんのMAGJAM)にて、ブログ記事のアイキャッチ画像を設定しておけば、facebookに記事を投稿した時に、その画像が自動で表示されます。

og:imageのタグに、アイキャッチ画像をテーマ(MAGJAM)の方で、差し込んでくれる(設定画面でOFFにもできます)からです。

その設定をONにしていて、記事のアイキャッチ画像も設定したのに、facebookへURLを貼り付けると、なぜか?違う写真、しかも、なんだかランダムな写真が3つぐらい候補になってしまうことがあり、原因を調べたら、アイキャッチ画像にデジカメ(RX-100M3)で撮影したそのままのjpegデータをアップロードしていました。

画像サイズ、5472 × 3648 ピクセル。大きすぎなサイズです。

この画像を 2000 × 1333 ピクセルにリサイズした後に、facebookデバッガーでキャッシュをクリアするとトラブルは解決しました。

アイキャッチ画像のサイズ、大きすぎるとブログ表示速度にも影響しますので、適切なサイズ、facebookの指定は少なくとも600x315px以上、推奨は1200x630pxもしくはそれ以上となっています。

なお、サイズが大きすぎる場合、og:imageのタグはきちん設定されていても、facebookデバッガー上の「og:image」画像が表示されないようです。

今日のピックアップ記事はこちら