ブログやホームページに書いた記事を、Facebookでシェアすること、ありますよね？
私も先日、Ameba Owndに作ったサイトを自分の運営するFBページにシェアさせてもらいました。
↓
Facebookでは投稿スペースにアドレスを入力するだけで、プレビューが作成されます。
そこでシェアされる記事のサムネイルや見た目を確認できるわけですが、今回のこのOwnd。
実は、プレビューの段階では全然違う写真が表示されたんです。
それがこちら↓
レザークラフトのサイトですか？
ってな感じで一瞬、目が点。全く見覚えのない写真だったんで（笑）
で、まあなんでレザーの長財布（・・・メガネケース？？）の写真が表示されたのかについては、今回書きたい内容に関係ないので省略しますが
一旦、こうなってしまうと厄介なのが
Facebookが画像を記憶（キャッシュ）しちゃって、あとから写真を差し替えても、その変更が反映されなかったりしちゃう場合！
です。
慌てず騒がずデバッガーを使いましょう
Facebookはリンクの画像を一旦読み込んだら、あとはキャッシュを使います。
キャッシュというのは、一時的に保存したデータのことです。Facebookはそうすることで、誰がどんな環境で見ても即座にサムネイル画像が表示される、というユーザーに見やすい快適な閲覧環境が整えているわけです。
それはそれでありがたいわけですが、画像が思ってたのと違ったり、出したくない写真がトップ表示と意図しないものが出てしまった場合
Facebookが開発者向けに提供しているツールに「デバッガー」というのがあります。
使い方は簡単
シェアしたリンクのURLを赤枠内に入力して、「デバッグ」をクリックすると、Facebook内になんの画像がキャッシュされているかを確認できます。
「もう一度スクレイピング」とあるところを、クリック。
これで、Facebookに記憶された写真が入れ替わりました。
アメブロユーザーには、時折プロフィール写真が大きく表示されている方も見かけます。
アメブロに設定したプロフィール写真のサイズが大きい場合、そして記事に画像が使用されない場合、そのプロフ写真が横長の大きなサムネイルとして表示されます。
プロフ写真が縦横250px以下だと、このように写真は小さく右側に表示されます。
こうなるようにプロフ写真をサイズダウンして、差し替えた時も忘れずにデバッグするといいですね。
どんな記事を、どんな写真で紹介するか？
記事のアイキャッチ画像を大事にされている方はもちろん、大事にしたいけど、うまくできない、という方もいるかもしれません。
思ったようにネットを使いこなすには、やはりある程度「知っておいた方がいいこと」というのはあるものです。
私も、検索に検索を重ねて、いろんな方法を試行錯誤やってきました。
このデバッガーもその中で出会ったサイトです。