文字だけの投稿と、画像入りの投稿では、扱いが異なる。

過去に投稿したアメブロのソースを覗いてみました。

文字だけの投稿

WS000006

 

ソースはこちら

WS000007

 

※クリックで拡大してみてくださいね。

ソースの10行目に

<meta property=”og:image” content=”http://stat100.ameba.jp/blog/img/blog_top/logo_ameba_facebook3.png” />

と記述があります。これが「いいね!」されたときに表示する画像のリンクです。
実際に見てみましょう(コチラをクリック!

写真入りの投稿

WS000009

 

ソースはこちら

WS000010

 

こんどは11行目の記述に

<meta property=”og:image” content=”http://stat.ameba.jp/user_images/20131206/10/tani-goodsan/ef/30/j/o0422028112771903963.jpg” />

と書かれています。

リンク先は投稿で使われた画像です。

 

FACEBOOKの仕様

アメブロの投稿がFACEBOOKで「いいね!」されると、文字だけの場合は、「アメーバロゴ」。

写真付きの投稿の場合は、最初の画像がFACEBOOKのニュースフィードに反映されます。

たぶんここまでは知っている方が多いと思います!

 

そこで、FACEBOOKの仕様について調べたところ、縦横比1:1.91の比率で画像の中心から抜粋されます。

つまり、アメブロの投稿の最初の画像に1:1.91比の画像を貼り付ければ、狙い通りの画像をFACEBOOKに反映できるのです。

 

で、実験してみました。

画像は横400Px 縦210Px 縦横比 1:1.91に近づけました!

結果は。。。

WS000011

成功!!

FACEBOOK経由でブログを読んでもらうためにも、これ結構大事なことですよ~!!

 

追記

スマートフォンでは正しく反映されていませんでした。

IMG_0177

 

FACEBOOKの推奨は1200px幅の大きい画像なので、横400pxだと小さすぎたのかもしれません。

横500px 縦261pxくらいの大きい画像のほうが良いかもしれません。