Facebookページでサムネイルが表示されない問題をなんとか解決した方法

つい先日から Facebook ページサムネイルが表示されなくなってしまいました。

あーでもない、こーでもないと悶絶しながら、ちょっと不満は残るものの、なんとか元に戻ったので解決までの経緯を書き留めておきます。

Facebook ページでサムネイルが表示されなくなった

ブログを更新したときに、その情報を Facebook ページに自動投稿するようにしていて、通常なら次のように記事に設定したアイキャッチがサムネイルとして表示されます。

Facebook サムネイル

しかし最近投稿した記事に、サムネイルが表示されなくなっていました。

確認したところ、2017 年 6 月 14 日に公開した記事からサムネイルが表示されていないと判明。

それ以降に公開した記事では、次のように Facebook ページでサムネイルが表示されていません。

Facebook サムネイル

運営している他のブログ用の Facebook ページでは表示に問題はなく、なぜこのブログの Facebook ページだけで不具合が発生するのかを確認するために色々と調べました。

Facebook ページの投稿欄で URL を貼り付けるとどうなるかを確認

最初に確かめたのは Facebook ページの投稿欄に URL を貼り付けたときにプレビューでサムネイルが表示されるかどうか。

不具合の出ている本ブログの Facebook ページでは、やはり URL を貼ってもサムネイルが表示されません。

で、問題のない Facebook ページに同じ URL を張り付けたところ…サムネイルが表示されてる!

Facebook サムネイル

これによってブログ(WordPress)ではなく Facebook ページに問題があることが確認できました。

というわけで Facebook 側の不具合を解消するためにトラブルシューティングしていきます。

Facebook から届いていた API バージョンに関するお知らせ

Facebook 側になんらかの問題があるとわかって、すぐにピンときたのが少し前に Facebook から送られてきていたメール。

そのメールには「使っているアプリ の API バージョンが自動更新される前に不具合を修正しておいて」と書かれていました。

日付は 6 月 13 日、そしてサムネイルが表示されなくなったのは 6 月 14 日の投稿からなので、これが原因らしいと推測。

メールの文中に「API アップグレードツール」のリンクがあり、アクセスしてみました。

すると「情報を表示するために十分なコールが作られていない」などというメッセージが表示がされて、なにも情報が見られません。

Facebook API アップグレードツール

アップグレードするバージョンをプルダウンで変更しても表示は変わらず。

エンジニアではない私には、ちょっとハードルが高すぎて意味がわかりません。

change log(変更履歴)へのリンクがあり、そちらのページも見てみましたがやはり意味不明。

アプリをアップグレードしなくてはいけないと思うんですが、そのための方法がどこを見ても示されていないんですよ。

で、悶絶していて、あることに気が付きました。

サムネイルが表示されないときに、まず確認する方法といえば…「facebook for developers」じゃないか?!

facebook for developers で確認

Facebook で OGP が設定できたかどうかを確認するために使うのが facebook for developers です。

Facebook ページを持っている人なら使ったことがあるんじゃないでしょうか。(不具合の確認ができるので、知らないようなら試しておくことをオススメします。)

以前は URL Linter という名称でしたね。で、早速アクセスして確認。

facebook for developers

すると次のようなエラーメッセージが表示されました。

Missing Required Property
The ‘og:type’ property is required, but not present.

ページの下の方を見ていくと og:type の欄には website との表示が。

facebook ogp

改めて Facebook ページの設定画面に戻って、画面を確認すると、下の方にウェブサイトという欄があります。

Facebook ページ設定

元々、このような状態でしたが、今回のトラブルシューティングの途中で一度削除してしまったので、再度設定。

その後 Facebook ページでサムネイルの表示を確認すると…成功!問題なく表示できました。

これで恐らく問題は解消したはず。

Facebook ページのサムネイル表示がおかしいときは facebook for developers を確認しましょう

結果的に問題解決に結びついたことは、Facebook ページの管理画面で「ウェブサイト」の設定を削除して作り直したことぐらい。

右往左往してしまいましたが、最初にデベロッパーツールを見ておいた方がよかったようです。

正直なところ、不具合の発生した原因もよくわからず、対処法も本当にこれでよいのか不確かでモヤッとした感じが残りますが、問題も解消されていることだし、とりあえずは結果オーライとしています。

今回は最初に API バージョンのアップグレードと不具合の関連を疑ってしまったため、解決に時間がかかりましたが、Facebook ページ以外にアプリやゲームなど運用していなければ、まずはデベロッパーツールを見ておいた方が早く幸せになれそうです。ご参考まで〜




Facebook ページ設定

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

ダンボールアーティスト/ブロガー。会社員だった2014年にテレビ局、ディズニーからダンボールアート制作の依頼を受ける。2015年からは独立し、ダンボールアート制作、ライティング、プロダクトデザインなど多方面で活動中。詳しくは、プロフィール・実績をご覧くださいまし。