logo header
logo header
logo header
logo header
  • 2017.12.09
  • その他

Facebookで投稿やシェアにサムネイル画像が表示されない時の解決方法

Facebookで投稿やシェアに画像が表示されない時の解決方法

広報担当のしばたです。
前回書いたFacebookのトラブルシューティングネタが好評でしたので、今回も業務で遭遇したFacebookのトラブル解決についてご紹介します。

INDETAILのFacebookアカウントでは、主にこちらの技術ブログの記事や、コーポレートサイトにアップしたページのシェアをすることが多いです。そんな「リンクをシェアする投稿時」に頻繁に起きるのが、「リンク先サイトのサムネイル画像が表示されない問題」です。

Facebookでは投稿にURLが含まれていると、自動的にリンク先に含まれる画像をサムネイルとして表示してくれます。

しかしリンク先のページには画像があるにも関わらず、テキストしか表示されないことがあります。

例えばこんな感じです。

Facebook 表示がテキストだけ

特に、シェアする元の記事を公開した直後にFacebookの投稿文を作成すると、ほとんどの確率でサムネイル画像が表示されません(泣)

「もしかして、実際に公開したら表示されるのかな・・?」と淡い期待をもって「公開」をポチッとしても、残念ながらこのまま公開されてしまうだけです。

そんな私と同じようにお困りのときは、ぜひこちらの方法を試してみてください!

画像が出てくる魔法のツール「シェアデバッガー」

「シェアデバッガー」とは、Facebookが公式で提供しているdevelopers向けツールです。Facebookでシェアされたコンテンツをプレビューして、Open Graphタグをデバッグできます。

難しいことはさておき、使い方は非常に簡単です。

1)まずシェアデバッガーのサイトにアクセスします

https://developers.facebook.com/tools/debug/sharing/
※Facebookにログインする必要があります

2)シェアしたいURLを入力して、「デバッグ」ボタンをクリックします

Facebookシェアデバッガー URLを入力

3)「リンクをプレビュー」と表示されている部分を確認します

意図されたサムネイルが表示されていればOKです。
Facebook シェアデバッガー

表示されていない場合は「もう一度スクレイピング」をクリックしてみましょう。
Facebookシェアデバッガー もう一度スクレイピング

シェアするページを公開した直後は「もう一度スクレイピング」を1度クリックしても、意図した表示にならないことも。そんな時はさらに何度か「もう一度スクレイピング」をクリックしてみると、表示が変わることがあります。

必要な準備はこれで完了です。シェアデバッガーのページはここで閉じてもかまいません。

4)このあとでもう一度、いつものように投稿記事を作成します

すると、同じURLのシェアですが、今度はサムネイルが表示されるようになりました。
ヤッター!
Facebook サムネイルが表示される

サムネイルが表示されない原因は、記事内の画像サイズが小さすぎるなど他の要因の可能性もあるのですが、ほとんどの場合はこの一手間をはさむだけで表示されるようになります。

Facebookでは、タイムラインに流れる記事にサムネイルがあるかないかで、印象がかなり違いますよね。

投稿記事を作成している際にサムネイルが表示されず困ったら、ぜひ一度「シェアデバッガー」をお試しください!

そして、INDETAIL Facebookのフォローもよろしくお願いします^^

ともに世界をアップグレードできる、そんな日を夢見て。
Upgrade the World!