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

せっかく面白そうなネタを見つけたので、早速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

Google AdS



関連記事

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


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

記事を読む▷


URLwwwありなし

URLの正規化:wwwあり、なしのドメインを統一する記述方法(エックスサーバー(XSERVER) にて)


前回のブログ で.htaccessに301リダイレクトをするための記述方法について書きましたが、ついでにwwwあり、なし…

記事を読む▷


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


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

記事を読む▷


WordPressのlightbox系プラグイン『jQuery Colorbox』のモーダルウィンドウの競合を回避する設定方法・他


長年画像をモーダルウィンドウで表示させるのに使っていた、WordPressのlightbox系のプラグイン『jQuery…

記事を読む▷


All-in-One Migrationのエクスポート1

WordPressのテスト(ステージング)環境を簡単に作る方法・注意点:XSERVER + All in On WP Migration


今まで企業サイトの管理等では、最初から環境が整っているところばかりだったので、開発・テスト・ステージング環境はあまり深く…

記事を読む▷


Message

メールアドレスが公開されることはありません。

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

PAGE TOP