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



関連記事

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


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

記事を読む▷


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


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

記事を読む▷


WordPressのメニューを、footer等用に作成して追加する方法


WorPressのデフォルトでは、gnavi(グローバルナビ)にメニューを追加し、表示させることはできますが、foote…

記事を読む▷


アイキャッチ_はてぶ

はてなブックマーク(はてぶ)でブックマークしたURLを、まとめて変更する方法!


ドメインの変更をすると、301リダイレクトで対策をしたとしても(詳細はこちら)やはり今まで稼いできた被リンクも一緒に変更…

記事を読む▷


SyntaxHighlighter Evolved のサムネイル

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


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

記事を読む▷


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


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

記事を読む▷


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


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

記事を読む▷


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


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

記事を読む▷


easy-edit

共通パーツ(header,footer等)をjQueryで読み込んで編集を楽にする方法 & 文字化け対策


WordPress等のCMSではなく、htmlで構築され、headerやfooter等、同じパーツを使っているサイトを編…

記事を読む▷


OPG設定_3

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


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

記事を読む▷


Message

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

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

Error: Feed has an error or is not valid

PAGE TOP