アメブロ記事をFacebookにシェアした時に大きな顔写真が表示されない方表

アメブロの記事をFacebookにシェア(自動投稿も同じだと思いますが)した際に、デフォルトで選択される画像について調べてみました。

(ただし、アメブロやFacebookの仕様を入手して検証したわけではなく、飽くまでも僕個人が我流で調べてみた結果、現時点でたどりついた推測であり、もしかすると間違っている可能性もあり得ますので、できればご自身で検証していただければより良いと思います^^)

なお、基本設定で、「共有ボタンの表示」が「表示する」に設定されていることを前提とします。

アメブロの記事をFacebookにシェアした場合に投稿に表示される画像の選ばれ方は、

・記事内で使われている、画像フォルダにアップロードされている画像の中の、最初の画像(以下、記事内の最初の画像)

・プロフィール画像

の2つの画像のサイズにより、大きく分けて3種類に分類されるようです。

1.記事内の最初の画像の短辺が200ピクセル以上の場合

2.記事内の最初の画像がないか、短辺が199ピクセル以下でプロフィール画像の短辺が200ピクセル以上の場合

3.記事内の最初の画像がないか、短辺が199ピクセル以下でプロフィール画像の短辺も199ピクセル以下の場合

の3種類です。

ちなみに、ここで言うサイズとは、画像そのものの横幅や高さのこと、つまり、拡大縮小せず1倍表示した時のサイズのことで、画面に表示されている大きさやファイルサイズは関係ありません。

では、それぞれ見ていきます。

1.記事内の最初の画像の短辺が200ピクセル以上の場合

この場合は、素直に記事内の最初の画像が使われるようです。

2.記事内の最初の画像がないか、短辺が199ピクセル以下で、プロフィール画像の短辺が200ピクセル以上の場合

この場合は、記事内の画像は使われず、プロフィール画像が使われてしまうようです。

仮に、記事内の2枚目以降の画像がもっと大きな画像であっても、それらが選ばれることはなさそうです。

3.記事内の最初の画像がないか、短辺が199ピクセル以下で、プロフィール画像の短辺も199ピクセル以下の場合

この場合は、記事内の2枚め以降の画像やフリースペースなども含め、また、画像フォルダにアップロードされた画像であるかどうかに関係なく、ページ内から比較的大きな画像が検索されて選ばれるようです。

ただし、どの画像が選択されるかは、ちょっとわかりにくくて詳細まではつかめていません。

例えば、プロフィール画像が「300×199」でフリースペースに「200×200」の画像があった場合は、プロフィール画像が選ばれました。

また、プロフィール画像が「300×199」でフリースペースに「250×250」の画像があった場合は、フリースペースの画像が選ばれました。

ちなみに、「共有ボタンの表示」が「表示しない」に設定されている場合や、個別記事ページ意外をシェアした場合も、この「3」の場合と同様にシェアしたページ内から大きめの画像が検索されて選ばれるようです。

Facebookにシェアした時に意図した画像を表示させるには

というわけで、以上を踏まえて、Facebookにアメブロの記事をシェアした時に何でもかんでもプロフィール画像が表示されてしまうようなことを避けて、意図した画像が表示されるようにするにはどうすればいいかを考えてみました。

3つあります。

a.プロフィール画像の短辺を199ピクセル以下にしましょう。

つまり、プロフィール画像をアップロードする際は、短辺が199ピクセル以下になるように縮小してからアップロードします。

こうすることで、Facebookにシェアした際に、プロフィール画像が選ばれにくくなります。

b.記事に画像がない時に表示させる「大きめの」画像のタグをフリースペースに記述しておきましょう。

<img src="表示させたい画像のURL" />

Facebookには表示させたいが、ブログには表示させたくないという場合は、次のように非表示にも出来ます。
<img src="表示させたい画像のURL" style="display:none" />

c.記事の画像を表示させたい場合は短辺を200ピクセル以上にしましょう。

また、Facebookに表示する画像は、画像フォルダにアップロードした画像で、かつ、記事の最初に登場する画像である必要があります。

これら3つを行うことで、アメブロの記事をFacebookにシェアした時に、記事に画像がある場合はその画像を、ない場合はフリースペースに置いた代替画像が表示されるようになるものと思われます。

以上、アメブロ記事をFacebookにシェアした時に表示される画像について書いてみました。

よかったら参考にしてくださいね。

それから、もし間違っていたら、ぜひご指摘下さい。