概要
先日、こちらの記事(通信キャリアのSEがこどもにスマホを使わせることについて本気出して考えてみた) がFacebookやTwitterでいくつかご紹介していただけました。
で、その時にふと気づいたのですが、Facebookで「いいね」ではなく「シェア」していただいたとき、どうも意図した画像と違うものが表示されています。
シェアしていただけて、そこからの流入も大変多かったのでいいっちゃいいんですが、なんとなく気になるので調べてみました。
事象
例えば上記の記事をシェアしていただいたもののスクリーンショットは以下のようになります。
なんかチガウ…。この画像は、「MacBook Air 11インチ用に３Ｍのセキュリティ/プライバシーフィルター PF11.6W S-SP を買ってみた」のアイキャッチになってる画像なんですが、なぜかこれが適用されています。
本来のアイキャッチ画像(の元)はこの画像です。
調べてみた
Facebookには、開発用のデバッガとして「オブジェクトデバッガー」というのが用意されています。
こちらにアクセスして、「Input URL」のところに、確認したいURL(今回の場合だと「http://blog.1783.org/2016/01/iphone_child/」)を入力して「Fetch new scrape information」をクリックします。
で、表示されたページの下のほうを見てみるとこんな感じになってました。
おにょにょ。シェアした時の状況が再現されてます。
で、原因を探すべくデバッガの出力内容を見てみると、気になるメッセージが。
「… and use image that’s at least 200x200px … 」ですと。
で、当該記事のアイキャッチ画像がどうなっているかをWordPressの管理画面から見てみるとこんな感じ。確かに150x100pxなので、上記の警告通りではあります。
解決方法
半信半疑のまま、元画像を編集して、アイキャッチを大きく(300×200)してみました。WordPressの管理画面からはこんな感じになります。
で、先ほどのFacebookのデバッガで改めて読み込んでみます。
何故か一発では反映されないので2度ほどURLを入力して「Fetch new scrape information」をクリックしてみるとこんな感じになります。
おーーー。これこれ。この画像が意図した結果です。よかった～～～！
まとめ
アイキャッチにあまり大きな画像を用意しておくと、GoogleのPage Insightsさんに怒られるのでなんとなくいままで幅150で設定していましたが、短いほうの辺が200px以上でないとだめみたいです(記事からは漏れてますが、200×150とかでもダメでした)。これまでの分も手作業で徐々に直していこうかなぁ、と思ってます。
コメント