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