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

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

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

バナー468-80_iPad-MacBook



関連記事

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


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

記事を読む▷


WordPress:特定カテゴリで投稿を古い順に表示させる方法


Wordpressの投稿の表示は、デフォルトでは新しいものから表示されますよね。でも特定カテゴリーでは反対(投稿した順番…

記事を読む▷


WP-OGPの設定方法:WPの投稿記事のサムネイルをFBできちんと表示させる


この記事は前回からの続きなのですが、、、実は1年経ってます。。下書きを途中まで書いてたのですが、あまりにも大変で途中で終…

記事を読む▷


日付を自動更新で表示させる! 簡単コピペ!!


先週『日付を毎月変えるの邪魔くさいし、サイトに書いてる日付とってくれへんやろか?』という依頼がありました。 とって…

記事を読む▷


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


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

記事を読む▷


画像やテキストを中央(上下左右真ん中)に配置する方法


普通にtext-align:center;や、margin:0 auto;等でテキストや写真を真ん中に配置したつもりでも…

記事を読む▷


サーバー移転の手順 その1:サーバーからサーバーへの移行(同サーバー(EXTREM)同士)


現在使用しているサーバーが、ここ数ヶ月、アクセスできない状態が頻発するようになりました。 その度にこちらからサーバーへ…

記事を読む▷


RSSフィードを設置してすぐにエラーが…


恥ずかしながら、RSSフィードを管理している全てのサイトに設置していませんでした。やろうやろう。とは思ってたのですが、ど…

記事を読む▷


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


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

記事を読む▷


WPで全ページ見れなくなった時

WordPressの記事がトップページ以外、全部見れなくなった時の対処方法(404 error)


年末にサーバーの移転を進めていたのですが、以前に何度かサーバーの移転やWordpressの引っ越し等々していたので、大変…

記事を読む▷


Message

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

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

PAGE TOP