[Å] Facebook OGPのアイキャッチがおかしい!対策として知っておきたい「デバッガー」の使い方とは

Facebook

ここ数日ずっと気になっていることがあります。それがブログ記事をFacebookでシェアした時のアイキャッチの意図せぬ表示です。

以前までOGPで正しく指定した画像が表示されていたのになぜか数日前から記事内の画像を適当に取ってくる謎の状態に。

これが仕様のなのか、それとも単なるFacebook側の不具合なのか、それともPage Pluginが何か関係しているのか。今のところ調査中ですが、原因がわかるまでの間は「デバッガー」というものが便利です。

正しい使い方を知り正しいアイキャッチの表示にしてあげてみてください。

Facebookでのシェア

例えば、先日公開した「鳥貴族」のこちらの記事。

[Å] 安くて嬉しい!鳥貴族がジャンボ焼鳥もお酒も全品280円で軽く飲みたい時に使える居酒屋

本来であれば記事トップの画像が表示されるはずなのですが、デバッガーを使用せずにシェアをするとこのような記事内の意図していない画像が表示されてしまいます。
Facebook 画像

本来であればこうでありたいのに…。
Facebook 画像

こうした場合に正しい画像を読み込ませるようにできるのが「デバッガー」というものになります。

デバッガーの使い方

デバッガーはFacebook公式が用意されているサイトで以下からページを表示します。

Debugger

表示したらまず空欄にアイキャッチを変更したい記事のURLを貼り付け、「Debug」をクリック。
デバッガー

次に表示される「Fetch new scrape information」を選んで完了です。
Fetch new scrape information

Fetch new scrape informationをした後にOGPの表示を確認してみるとこのように正しい画像が表示されているのがわかると思います。
正しいOGPの指定

デバッガーを介した後にシェアをしてみてると…
Facebook 画像

ご覧のとおりイメージしていた美味しそうな画像が表示されていると思います。

画像を意図せぬ状態で表示されると何を示している画像なのかそもそも伝わらない可能性があります。

本来正しく表示されていれば見た目が凄く良かったのに…とならないためにもぜひデバッガーを使ってみてください。

さいごに

ここ数日間、デバッガーを介してからシェアをするというのをひたすら続けているのですが、いい加減面倒になってきました。笑

ちなみにこのデバッガーですが、iPhoneからでも使えますし、私は全てiPhoneからデバッガー→シェアをしています。

不具合かもしれないのであまりコードを弄りたくもないというのが本音なので暫く待とうと思っていますがどうなんでしょうかね。

早く治ってくれることを願ってます。おしまい。

■ 同じカテゴリについてもっと読む

ブログ運営者をフォローする!

\ この情報を周りの人にも教える /

プロフィールあかめの画像
あかめAkame Mizuho
横浜在住。フリーランス。
食べ歩き / 旅行 / カメラ / WEBデザイン 好き。

プロフィール / お問い合わせ

個人アカウント(メイン)▼

ブログ公式アカウント▼