Facebookでシェアした記事のサムネイル画像がおかしい時、表示されない時の解決方法
せっかく面白そうなネタを見つけたので、早速Wordpressに記事を投稿!でもいざFBでシェアしようとしたら、サムネイルが全然関係ないものになってる!!これじゃ誰も見てくれない!!!って状況に陥りました。
ちなみに、このブログ記事をシェアしようとした時に陥って、最終的には解決できたのですが、これを解決するのに色々調べまくったけど、全然その見つけた方法がうまく機能せず、数時間費やしてしまいました。。
ってことで、その原因であろうものと解決方法を書いておきます。
解決方法 その1:Facebookのキャッシュをクリアする!
この原因としては、facebookにシェアする際、意図しないサムネイルがキャッシュに残り、それが表示されるという感じのものなのです。
原因がこれだけなら、キャッシュがクリアされればきちんとしたものを表示できるはずです。
ってことで、まずは第一ステップ。
Facebookのキャッシュをクリアする!
まずはFacebookのディベロッパーツールの『デバッガー(Debugger) 』というものを使います。URL:https://developers.facebook.com/tools/debug/
ここにいって、そのシェアしたいURLを入力して、『Debug』のボタンをおします。
とりあえずはこれでキャッシュが空になって、新たなサムネイルが表示されるはず!なのですが、原因が他にある場合はこんな感じに変わらないのです。。
オレンジ枠の『Fetch new scrape information』を何度も押してみても、下のサムネイル部分にはでてこない。そして、青枠の3枚の選択されたサムネイルにも欲しい画像がでてこない。。
なので次のステップ。
解決方法 その2:記事の最初の方にサムネイルになる画像を埋め込む!
デフォルトではこのサムネイルとして使われる画像は、アイキャッチを設定してるとそれがでてくる。もしくは、記事の最初にでてくる画像や、内容に一致してるものが自動で選択され、でてくるようなのです。が、アイキャッチを設定してたのに、サムネイルとしてそれが選択されなかったり、選択するできる画像の中にすら入ってこない。この原因は不確かですが、おそらく何らかしらのプラグイン内にある記述が邪魔してるよう?です。
ってことで、
記事の最初の方にサムネイルになる画像を埋め込む!
とりあえずこんな感じに記事の最初の方(青枠)にサムネイルとなる画像を埋め込んでみます。
そして再度 Debug してみると、
でてきた〜〜〜!!!
ってことで、これからシェアしたい!って記事には、必ずサムネイルとして使いたい画像を一番上に持ってくるようにしましょう!!
って感じにこの投稿終わらせようと思ってたのですが、実はまだ終わってなかったのです。。
新たな症状
それは、記事の投稿時には選択した画像が使われても、再度シェアをしようとしたら、それがでてこない。。
ようは、投稿時に選択できるいくつかの画像の中にその使いたい画像は表示され、それを選択して投稿はできるようにはなった!のですが、その記事からシェアをしようと思ったら、一番最初に登場した画像のように、また意図しないサムネイルが出てくる!という症状が現れたのです。。
ほんとこれではまってしまいました。で試した事。
- 『PNG』がダメ!だとかいう情報も、jpeg等にしてみたけどダメ。
- ブラウザの問題かも?という情報もあったので、色んなブラウザ試したけどダメ。
- ついでにブラウザのキャッシュも空にしたけどダメ。
- PCを再起動してもダメ。。
ってことで、最終ステップ。
解決方法 その3:WP-OGPをWordPressに入れて設定する!
もう強引にいきます。
WP-OGPというプラグインをWordPressに入れて設定する
WP-OGPは、シェアされた時とかに表示されるサムネイル等の情報を設定するWordPressのプラグインなのですが、これで表示されるサムネイルを、強制的にアイキャッチに設定して、それが必ずサムネイルとして出てくるようにする方法。です。
ちなみにこれは、投稿の一番上にある画像を設定する事もできます。
ふぅ。。大変はまってしまいました。。
同じようにはまってしまった方の参考になれば嬉しいです。
関連記事
-
[http] から [https] へ。常時SSL化対応:ワードプレス、エックスサーバー環境にて
今更ですが、、、SSL化対応することにしました。 Googleが『SSL化されたWebサイトはランキング評…
-
SNS等の公式ロゴ(アイコン)素材のまとめ(Facebook, Instagram, Youtube, Twitter, Line etc.)
一度サイトを作ってしまうとなかなか更新せず使い回してしまうのが、この『SNSのロゴ(アイコン)』だと思うのですが、サイト…
-
【2021】FacebookやTwitter CardのOGPの設定をする!チェックツールURLも!プラグインなし
今まで何度も『OGP』の設定に関する記事は書いてきたのですが、新規サイト立ち上げで参考にしようと見てみたら、Facebo…
-
WordPressで “SyntaxHighlighter” を使って、ソースコードをキレイに書く方法
よくwebデザイナーさんやクリエイターさん、プログラマーさんたちの書いてるwebサイトを見たら、ソースコードを、 …
-
onMouseOver、onMouseOutで、簡単にテキストを切り替える!
前回のonMouseOver,onMouseOutで簡単に画像を切り替える!の続き、応用編です。 実はこちらサイト…






