ホームページ

facebookでブログシェアした時に画像が表示されない時の対処法

WordPressで気になることがあると、子供が泣いてても調べ続けちゃう(^◇^;)
Web活用アドバイザーのリエ( @olioli_web )です。

 

「WordPress(ワードプレス)でブログを書いたので、FacebookやTwitterでシェアしよう〜!」

とリンクを貼ったら、なぜかグレーの坊主に…

acebookでブログシェアした時に画像が表示されない時の対処法

そして色々調べて設定し直した〜〜〜のにまた坊主…!?!

acebookでブログシェアした時に画像が表示されない時の対処法
もう!なぜ〜〜〜〜!?

 

ってことありませんか?

 

私もWebサポートしているお客様やWordPressの講座で受講生さんにもよく聞かれることです。

 

そんな時に試してほしい対処法を3つ順番にご紹介します。

対処法1:アイキャッチ画像の設定ができているか確認しましょう

すごく基本的なことなので、ここはスルーして良い方がほとんどだと思います。
ですが念のため・・・。

 

WordPressでブログ(投稿)を作る際は必ずアイキャッチ画像を設定しましょう。

これがないとブログ内の一覧表示にも画像が出ない(No Image的なものになる)ので必ず設定します。

 

画像が素敵だとブログを読みたくなるし、アイキャッチってとっても大事!

 

ブロックエディター(新エディター)の方はここにあります。
右のツールバーの文書タブの下の方。

acebookでブログシェアした時に画像が表示されない時の対処法

 

クラシックエディター(旧エディター)の方はここ。
右のツールバーの下の方です。

acebookでブログシェアした時に画像が表示されない時の対処法

 

アイキャッチ画像は、使用テーマによって若干サイズが変わります。
(どんなサイズでもトリミングしてくれる場合が多いですが、できればテーマに合わせて作成しましょう)

例えば・・・

このサイトのテーマ「JIN」の場合
16:9を推奨→横760px:縦428pxがぴったり

「使用しているテーマ名  アイキャッチ サイズ」
などと検索してみると出てくると思います。

 

いやいや、アイキャッチ画像なんて設定してるよ!でもFacebookで出ないよ!なんて方は次を確認!

対処法2:プラグイン「ALL in One SEO」の設定ができているか確認しましょう

「All In One SEO Pack」 をSEO対策のために入れている方も多いのではないかと思います。

 

ただこのプラグイン、SNSでのシェア画像の設定を忘れがちなので要注意です。

(お客様のサイトを確認すると、大概がこれが原因になっていることがほとんど)

 

WordPressの投稿を公開する前に一番下の「All In One SEO Pack」の設定を確認しましょう。

 

投稿に文章が入っているとちょいと長いですが・・・一番下までスクロールしてこちらを確認。

acebookでブログシェアした時に画像が表示されない時の対処法

 

さらに「ソーシャル設定」のタブを開きます。
すると真ん中あたりの画像、グレーのものが選択されてしまっていないでしょうか?

acebookでブログシェアした時に画像が表示されない時の対処法

この状態だとまさにシェアした時に「グレー坊主!」になってしまいます。

下記のようにアイキャッチ画像を選択した状態にして「公開」または「更新」しましょう。

acebookでブログシェアした時に画像が表示されない時の対処法

 

ちなみにアイキャッチ画像を設定して「下書き保存」「公開」または「更新」しないとここのソーシャル設定に出てこないのでご注意を!

 

そもそもこの「ソーシャル設定のタブがないよ〜」って方は設定を確認しましょう。

WordPressの左のメニューバー
「All In One SEO Pack」→「機能管理」を確認

下の画像の「ソーシャルメディア」を
Active→Deactive

にするとアクティブな状態(投稿の設定画面でソーシャル設定が出てきます)

acebookでブログシェアした時に画像が表示されない時の対処法

 

「All In One SEO Pack」は以前は必須プラグインでしたが、今はテーマにSEOの設定が備わっている場合が多いので不要な場合も増えてきました。
お使いのテーマの公式サイトなどをご確認ください。
このサイトのテーマ「JIN」も非推奨です。

 

おそらくこれでほぼ解決するのですが、一度Facebookなどでシェアしてしまった場合、なぜか直らない〜ってことが結構あります。その場合は次へっ!

対処法3:一度シェアしてしまった場合、履歴(キャッシュ)を消してやり直そう

対処法2で修正しても、何回やり直してもダメだよ〜ってことが結構あります。

それはFacebookの履歴(キャッシュと呼ばれます)が消えていないからなんです…

 

なんて面倒な…でも私もこれで昔何度やってもダメで泣きそうになりました。。。

 

そんな時はこの履歴を消してリセットする必要があります!

↓こちらのFacebookシェアデバッガーを開きます
(できればパソコンでの操作をオススメします)

(開発者ツールとか書いてありますが、気にせず進めて大丈夫!)

 

まず「バッチリインバリデイター」(名前長っ)という方のタブを開いて・・・
シェアするブログのURLを入れます。
コピー&ペーストしたら「デバッグ」をポチり。

acebookでブログシェアした時に画像が表示されない時の対処法

これで「No image=坊主」の履歴が消されているはず!

 

次に「シェアデバッガー」の方のタブを開いて画像が表示されるか確認しましょう。
「シェアデバッガー」にも同様にブログのURLを入れます。
そこで「デバッグ」

acebookでブログシェアした時に画像が表示されない時の対処法

これで画像が表示されればOKですが、もしダメな場合は「もう一度スクレイピング」を何度かクリックして試してみてください。

acebookでブログシェアした時に画像が表示されない時の対処法

多分何度かやると直ると思います。

 

心配な方はFacebbookでシェアする前にシェアデバッガーで確認すれば完璧だね!

 

補足:それでもシェア画像がおかしい場合は…

ALL in one SEOなどのプラグインとお使いのテーマの設定がバッティングしている場合が考えられます。

  • 「ALL in one SEO  テーマ名」
  • 「テーマ名  SNSシェア 画像」

などと検索してみると答えが見つかるかもしれません!!

まとめ:Facebookでブログのシェア画像が表示されない時

基本的にこのどれかで解決すると思います。

 

  1. (基本)アイキャッチ画像入ってる?
  2. ALL in ONE SEOのソーシャル設定を確認
  3. Facebookシェアデバッガーでキャッシュを消す

 

Facebookシェアデバッガーは結構便利!ぜひブックマークしておこう♪

 

 

ブログを書く時間がない、でも書きたい!そんなフリーランス女性のための解決法「あーブログ書かなきゃ!」 って焦るけど書けない…また一日が終わってしまった。 「書きたいこと沢山あるのに〜。」 そん...
ABOUT ME
イズミヤリエ
未経験・コネなし・子育てしながらWebデザインの世界へ飛び込み開業。様々な乗り越えフリーランスママ3年目。 webデザイナーとしての制作経験や自身のフリーランスストしての活動経験から「フリーランス・個人事業主がWebを楽しく活用して幸せに生きる」をテーマにWebサポート&制作、講座などを開催。 PC作業が、文章を書くこと、ブログや講座&資料作りが大好き。 転勤妻で4歳&0歳男の子ママ。
EBookダウンロード

【無料E-Book】頑張らない!週1投稿でも!
ファンが集まるインスタグラムアカウントの作り方

無理してフォロワーさんを増やさなくても・・・
毎日投稿しなくても・・・

あなたのファンが集まって
ちゃんとお仕事につながるアカウント

そんなインスタグラムの活用法を1冊のBookにまとめました♡