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



関連記事

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


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

記事を読む▷


Database Search and Replace Script in PHP

ドメイン&WordPressを含むサイトの引越しでの、URL変更作業:『DATABASE SEARCH AND REPLACE SCRIPT IN PHP』を使って


最近サーバー移転をして、その時々に起こった問題や注意点を記事にしてましたが(301リダイレクトの記述方法、URLの正規化…

記事を読む▷


opacityの書き方 クロスブラウザ


今までも書いてましたが、ほんとIE嫌い。 そして、これからもまた同じ事書くでしょう。 さて。クロスブラウザでIE…

記事を読む▷


スマホ、携帯からタップ(クリック)で電話を発信する、htmlの記述方法 コピペでOK!!


スマホ等のタブレット、また携帯で、電話番号をタップ(クリック)して直接かけるhtmlの記述方法です。 …

記事を読む▷


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


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

記事を読む▷


アイキャッチ_RSSImport

WordPress:プラグイン”RSSImport”を使って気になるサイト等の最新情報を表示させる方法


前回はRSSのボタンを自分のサイトに表示させる方法を書いたのですが、今回は自分のサイト以外(勿論自分のものもOK!)の気…

記事を読む▷


WordPressのデータベースのテーブル接頭辞を、phpMyAdminで変更する方法


最近サーバーを変更してWordPressの引っ越しをしたのですが、引っ越し前のサーバーの初期設定でWordPressのデ…

記事を読む▷


z-index が効かない時の対処方法


z-index が効かない時がちょくちょくあります。でも、仕事でそういう場合に遭遇すると、その場しのぎで対処法を見つけて…

記事を読む▷


OGPをWP-OGPのプラグインを改変して設定する!!2015年のOGP最新設定


今度こそ。。。OGPの設定で何時間、というより何日?何ヶ月?かかってるんや。。。という感じなのですが、もう最初の投稿から…

記事を読む▷


OPG設定_3

WordPressのプラグインなしで、Jetpackと共存してFacebookやTwitter CardのOGPの設定をする!


先日、ようやく気になっていたOGPの設定を、WP-OGPのプラグインを変更して使えるようにしたのですが(詳細は こちら …

記事を読む▷


Message

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

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

PAGE TOP