Facebookでシェアした記事のサムネイル画像がおかしい時、表示されない時の解決方法

LINEで送る
Pocket

せっかく面白そうなネタを見つけたので、早速Wordpressに記事を投稿!でもいざFBでシェアしようとしたら、サムネイルが全然関係ないものになってる!!これじゃ誰も見てくれない!!!って状況に陥りました。

こうしたいのに、
fb_change_thumbnail1
こんな関係ない画像がでてくる。。。
fb_change_thumbnail2

_| ̄|○    

ちなみに、このブログ記事をシェアしようとした時に陥って、最終的には解決できたのですが、これを解決するのに色々調べまくったけど、全然その見つけた方法がうまく機能せず、数時間費やしてしまいました。。
ってことで、その原因であろうものと解決方法を書いておきます。

解決方法 その1:Facebookのキャッシュをクリアする!

この原因としては、facebookにシェアする際、意図しないサムネイルがキャッシュに残り、それが表示されるという感じのものなのです。
原因がこれだけなら、キャッシュがクリアされればきちんとしたものを表示できるはずです。

ってことで、まずは第一ステップ。

Facebookのキャッシュをクリアする!

まずはFacebookのディベロッパーツールの『デバッガー(Debugger) 』というものを使います。URL:https://developers.facebook.com/tools/debug/

ここにいって、そのシェアしたいURLを入力して、『Debug』のボタンをおします。

fb_change_thumbnail3

とりあえずはこれでキャッシュが空になって、新たなサムネイルが表示されるはず!なのですが、原因が他にある場合はこんな感じに変わらないのです。。

fb_change_thumbnail4-cp

オレンジ枠の『Fetch new scrape information』を何度も押してみても、下のサムネイル部分にはでてこない。そして、青枠の3枚の選択されたサムネイルにも欲しい画像がでてこない。。

なので次のステップ。

解決方法 その2:記事の最初の方にサムネイルになる画像を埋め込む!

デフォルトではこのサムネイルとして使われる画像は、アイキャッチを設定してるとそれがでてくる。もしくは、記事の最初にでてくる画像や、内容に一致してるものが自動で選択され、でてくるようなのです。が、アイキャッチを設定してたのに、サムネイルとしてそれが選択されなかったり、選択するできる画像の中にすら入ってこない。この原因は不確かですが、おそらく何らかしらのプラグイン内にある記述が邪魔してるよう?です。

ってことで、

記事の最初の方にサムネイルになる画像を埋め込む!

とりあえずこんな感じに記事の最初の方(青枠)にサムネイルとなる画像を埋め込んでみます。

fb_change_thumbnail5

そして再度 Debug してみると、

fb_change_thumbnail1

でてきた〜〜〜!!!

ってことで、これからシェアしたい!って記事には、必ずサムネイルとして使いたい画像を一番上に持ってくるようにしましょう!!

って感じにこの投稿終わらせようと思ってたのですが、実はまだ終わってなかったのです。。

新たな症状

それは、記事の投稿時には選択した画像が使われても、再度シェアをしようとしたら、それがでてこない。。

ようは、投稿時に選択できるいくつかの画像の中にその使いたい画像は表示され、それを選択して投稿はできるようにはなった!のですが、その記事からシェアをしようと思ったら、一番最初に登場した画像のように、また意図しないサムネイルが出てくる!という症状が現れたのです。。

fb_change_thumbnail2
またこいつか。。_| ̄|○

ほんとこれではまってしまいました。で試した事。

  • 『PNG』がダメ!だとかいう情報も、jpeg等にしてみたけどダメ。
  • ブラウザの問題かも?という情報もあったので、色んなブラウザ試したけどダメ。
  • ついでにブラウザのキャッシュも空にしたけどダメ。
  • PCを再起動してもダメ。。

ってことで、最終ステップ。

解決方法 その3:WP-OGPをWordPressに入れて設定する!

もう強引にいきます。

WP-OGPというプラグインをWordPressに入れて設定する

WP-OGPは、シェアされた時とかに表示されるサムネイル等の情報を設定するWordPressのプラグインなのですが、これで表示されるサムネイルを、強制的にアイキャッチに設定して、それが必ずサムネイルとして出てくるようにする方法。です。

ちなみにこれは、投稿の一番上にある画像を設定する事もできます。

ふぅ。。大変はまってしまいました。。

ThrillerAnime

同じようにはまってしまった方の参考になれば嬉しいです。

続編も書きましたので、まだ思い通りにいかない方はこちらもどうぞ。
 http://webdesign-abc.com/howto/wp-opg/

バナー468-80_iPad-MacBook



関連記事

onMouseOver、onMouseOutで、簡単に画像を切り替える


今までマウスオーバー等で画像を切り替える時は、jQueryを使ったり、cssで画像を重ねてopacityで画像を透過させ…

記事を読む▷


301_re-direct

301リダイレクトでサイトのリニューアル(ドメインを変更)する!:.htaccessの記述、設定方法、順序etc.


最近サーバーの見直し、ドメイン管理会社の見直し、サイト内の見直し等々しているのですが、以前から使用していたサーバー(エク…

記事を読む▷


SyntaxHighlighter Evolved のサムネイル

WordPressで “SyntaxHighlighter” を使って、ソースコードをキレイに書く方法


よくwebデザイナーさんやクリエイターさん、プログラマーさんたちの書いてるwebサイトを見たら、ソースコードを、 …

記事を読む▷


複数の横に並ぶブロック要素をセンタリングさせる!!


よく複数の画像をfloatで並べることありますよね?でも、それを括ったDivタグとかをセンタリングしようとしたら、なかな…

記事を読む▷


サーバー移転の手順 その3:移転後のトラブル


前回、前々回と書きましたが、サーバーの移転、少々、いや、かなりやいこしいです。できたあとは疲れ果てて『もーできたしえーわ…

記事を読む▷


お名前.comで “Whois情報公開代行” の設定にチェックを入れ忘れて登録した時の対処方法


先日、こちら で少し書いたのですが、お名前.comでドメインを取った時に、 "Whois情報公開代行" の設定にチェック…

記事を読む▷


お名前.com から脱出する!:ドメインの移管方法


『お名前.com』でドメイン取得してからは、『Whois情報公開代行』の件(詳細はこちら)で大変な思いをしたのですが、そ…

記事を読む▷


ping_2017

2017最新版:PING送信先リスト16(WordPress Ping Optimizerへ登録するPingのURL)


久しぶりに新たなサイトのためにPingの送信先リストをチェックしてみたら、、、このようなよろしくない状態でした。。 …

記事を読む▷


WP Social Bookmarking Lightを好きな場所に設置、移動する方法


WP Social Bookmarking Lightを好きな場所に設置、移動する方法です。 以前、自分で管理している…

記事を読む▷


WordPressでGIFアニメが動かない時の対処法


今回アイキャッチ画像にGIFアニメを登録したのですが、登録時、また、メディアライブラリ内ではしっかりGIFアニメとして動…

記事を読む▷


Message

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

参考にさせていただいてるサイト

Error: Feed has an error or is not valid

PAGE TOP