Facebookで意図せぬサムネイルが表示されてしまう場合、デバッガーでOGP設定の見直し!

昔は友人間の連絡などのSNSとして利用されてきたFaceookも、最近ではビジネスシーンでも使われることが多くなってきたように見受けられます。

友人にサイトの紹介をする時、または気になる記事をシェアするときにURLを入れると出てくる画像は、Webサイトの裏でOGP設定がされている為、表示されるものです。

しかし設定が間違っていたりするとうまく画像が表示されません。特に自分のブログなどを運営している方でシェアしようとFacebookにURLをコピペしてみたけど、自分が設定したサムネイル画像(アイキャッチ)が出てこないことがあると思います。そんな場合にツールを使って設定をチェックしましょう。

Facebook OGPとは

Facebook - ogp

SNSの普及に伴い、ブログやWEBサイト運営では必須設定事項とも言えるOGPとは、「Open Graph protocol」の略称のことです。Facebookや Twitter 等などのSNSでシェアされた際に、そのページの タイトル・ URL・概要・アイキャッチ画像(サムネイル画像)を、意図した通りに表示させる仕組みです。

しかしながら、OGP設定を間違ってしまうとFacebookのタイムラインにURLを貼り付けた際、意図したサムネイル画像とは違う画像が表示されることになります。「シェアして欲しい記事の画像はこの画像なのに・・・」といった記事タイトルとはかけ離れた画像が掲載されて切なくなります。切なくなるその前に、Facebookでシェアする画像を事前に確認できるツールがこちらです。

OGP設定内容が確認できる Open Graph Debugger

Open Graph Debugger – Facebook for Developers という開発者向けのFacebookデバッガーを使えば、設定されているOGPの内容を確認することができます。開発者向けのツールですが、使い方はまったく難しくありません。まずは以下のURLにアクセス。

https://developers.facebook.com/tools/debug/

赤枠部分に設定情報を取得したい「URL」を入れて「デバック」ボタンをクリックするだけ。

facebook_ogp_dbg

そうすると、以下の画像のようにOGPにどういった情報が設定されているのか確認できます。また設定されてないものがあればエラーがでるので、そのエラーとなる原因を突き止めることもできるでしょう。

fb_share_dbg

しっかり設定を再度見直して、修正してみてもFacebookでシェアしようとした場合に同じ画像を引っぱってきたり、また再度Facebookデバッガーでテストしてみても、設定したサムネイルが反映されない場合には、Facebook上ですでに画像のキャッシュを持っている可能性があります。

Facebook上にある画像のキャッシュクリア

その画像キャッシュをクリアにする為、以下のURLへアクセスします。

https://developers.facebook.com/tools/debug/

Open Graphオブジェクトデバッガーを使って再度確認したいURLを入力して、「新しいスクレイピング情報を取得」ボタンをクリックすると、スクレイピングの実行時間が押した時刻に切り替わります。

fb_share_dbg2

これで設定したアイキャッチ画像(サムネイル画像)が正常に表示されていれば問題ありません。それでも表示されない場合には他に何かが原因となるものがありそうです。今一度設定を見直してみる必要があると思います。

Facebook OGB画像設定の解説まとめ

本記事は、Facebookで意図せぬサムネイルが表示されてしまう場合の回避・修正方法についての解説記事です。

ブログなどのアイキャッチ画像を変えた場合などに有効です。反映させるにはこのオブジェクトデバッガーを使って新しいOGP画像を設定しましょう。

以上、NORI(@norilog4)でした。

コメントを閉じる

コメントを残す