WordPressで設定したアイキャッチが小さいとFacebookでシェアされるときの画像が意図しないものになる問題

シェアする

概要

先日、こちらの記事(通信キャリアのSEがこどもにスマホを使わせることについて本気出して考えてみた) がFacebookやTwitterでいくつかご紹介していただけました。

で、その時にふと気づいたのですが、Facebookで「いいね」ではなく「シェア」していただいたとき、どうも意図した画像と違うものが表示されています。

シェアしていただけて、そこからの流入も大変多かったのでいいっちゃいいんですが、なんとなく気になるので調べてみました。

hands-woman-laptop-notebook

事象

例えば上記の記事をシェアしていただいたもののスクリーンショットは以下のようになります。

2016-01-11_02h50_03

なんかチガウ…。この画像は、「MacBook Air 11インチ用に3Mのセキュリティ/プライバシーフィルター PF11.6W S-SP を買ってみた」のアイキャッチになってる画像なんですが、なぜかこれが適用されています。

本来のアイキャッチ画像(の元)はこの画像です。

通信キャリアのSEがこどもにスマホを使わせることについて本気出して考えてみた

調べてみた

Facebookには、開発用のデバッガとして「オブジェクトデバッガー」というのが用意されています。

こちらにアクセスして、「Input URL」のところに、確認したいURL(今回の場合だと「http://blog.1783.org/2016/01/iphone_child/」)を入力して「Fetch new scrape information」をクリックします。

で、表示されたページの下のほうを見てみるとこんな感じになってました。

2016-01-11_02h58_13

おにょにょ。シェアした時の状況が再現されてます。

で、原因を探すべくデバッガの出力内容を見てみると、気になるメッセージが。

2016-01-11_02h59_49

「… and use image that’s at least 200x200px … 」ですと。

で、当該記事のアイキャッチ画像がどうなっているかをWordPressの管理画面から見てみるとこんな感じ。確かに150x100pxなので、上記の警告通りではあります。

2016-01-11_03h02_31

解決方法

半信半疑のまま、元画像を編集して、アイキャッチを大きく(300×200)してみました。WordPressの管理画面からはこんな感じになります。

2016-01-11_03h03_34

で、先ほどのFacebookのデバッガで改めて読み込んでみます。

何故か一発では反映されないので2度ほどURLを入力して「Fetch new scrape information」をクリックしてみるとこんな感じになります。

2016-01-11_03h05_39

おーーー。これこれ。この画像が意図した結果です。よかった~~~!

まとめ

アイキャッチにあまり大きな画像を用意しておくと、GoogleのPage Insightsさんに怒られるのでなんとなくいままで幅150で設定していましたが、短いほうの辺が200px以上でないとだめみたいです(記事からは漏れてますが、200×150とかでもダメでした)。これまでの分も手作業で徐々に直していこうかなぁ、と思ってます。

スポンサーリンク
レクタングル大
レクタングル大

シェアする

フォローする