日本酒応援サイト「サケナビ」掲載日本酒絶賛募集中です。

Facebookでシェアしたのにアイキャッチ画像が表示されない!原因と4つの解決ステップ【WordPress運用者向け】

Facebookでアイキャッチ画像が表示されない問題の解決ステップを示す記事アイキャッチ

「ブログ記事を書いて、Facebookにシェアしたら、なぜか画像が出てこない」

自社ブログを運用していると、必ず一度はぶつかる悩みです。

設定したはずのアイキャッチ画像が、シェア時のプレビューにグレーの何もない枠で表示されてしまう。これでは記事のクリック率(CTR)が大きく下がってしまいます。

本記事では、WordPress(SWELLテーマ運用)で実際に起きた事例をもとに、原因の切り分け方と4つの解決ステップを順を追ってご紹介します。

目次

この記事でわかること

  • なぜFacebookシェア時にアイキャッチ画像が表示されないのか
  • Facebook側の「OGPキャッシュ」という落とし穴
  • 既存シェア投稿を救う方法と、今後の予防策
  • Twitter(X)・LINE・Slackなど他SNSにも横展開できる対策

実際に当社のブログ記事「私だけのAI執事「ジャーヴィス」をMacで作った話」をFacebookでシェアした際に発生した事象をもとに、診断と修正のプロセスをそのまま公開します。

まず原因の切り分け:6つのチェックポイント

Facebookでシェア時に画像が出ない場合、原因はおおむね6つに絞られます。

# 原因 確認方法
1 アイキャッチ画像が設定されていない WordPress投稿編集画面で確認
2 og:imageタグが出力されていない 記事URLのHTMLソース確認
3 画像サイズが推奨外(1.91:1から大きく外れる) 1200×630px推奨
4 画像ファイルがFacebookクローラーから取得不可 ロボット制御・403応答など
5 FacebookのOGPキャッシュが古い情報を保持 Sharing Debuggerで確認
6 og:image:width / heightなどの補助タグ不足 HTMLソース確認

ここで多くの方が見落とすのが、5つ目の「FacebookのOGPキャッシュ」です。実は、Facebookは一度クロールしたOGP(Open Graph Protocol)データを約30日間キャッシュします。投稿後に画像を追加・修正しても、既存のシェア投稿には反映されません。

解決ステップ1:Sharing Debuggerでキャッシュを強制更新

最も即効性が高い対処法は、Facebook公式の「Sharing Debugger」を使ったキャッシュ更新です。

  1. Facebook Sharing Debuggerにアクセス
  2. 該当記事のURLを入力
  3. Debug(デバッグ)」をクリック
  4. Scrape Again(もう一度スクレイピング)」をクリック
  5. プレビューで画像が表示されることを確認

これでFacebook側に保持されているキャッシュが破棄され、最新のOGP情報が再取得されます。

ただし重要な注意点があります。Sharing Debuggerで更新したキャッシュは、今後の新規シェアにのみ反映されます。既に投稿された3日前のFacebook投稿に画像が遡って表示されることはありません。

解決ステップ2:既存シェア投稿への3つの対処

すでに画像なしでシェアしてしまった投稿への対処として、3つの選択肢があります。

案A:投稿を削除して再シェア(推奨)

最も確実な方法です。一度投稿を削除し、Sharing Debuggerでキャッシュを更新した後で、同じURLを再度シェアします。今度は正しいアイキャッチ画像とともに表示されます。

案B:既存投稿に画像を手動アップロード

投稿を残しつつ、コメント追記で画像をアップロードする方法です。シェアプレビューは変わりませんが、視覚的な訴求は補完できます。

案C:既存はそのまま、新規シェアで確認

過去の投稿は諦め、今後の運用改善に集中する判断もあります。商用利用度が低い投稿であればこちらでも十分です。

解決ステップ3:OGPタグ拡張で根本対策

将来同じ問題を起こさないために、HTMLの<head>内に出力されるOGP関連メタタグを補強します。

WordPress(SWELLテーマ+SEO SIMPLE PACK構成)では、デフォルトでog:imageは出力されますが、Facebookが初回表示で高速判定するために必要な補助タグが欠けていることが多いのです。

具体的に追加したいメタタグは以下の通りです。

<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:secure_url" content="(og:imageと同URL)" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="(og:imageと同URL)" />

これらを出力する方法は2通りあります。

方法1:管理画面で設定

SEO SIMPLE PACKを使用している場合、管理画面の「OGP設定」タブから「Twitter Card type」を「大きな画像で表示」に変更するだけで、summary_large_imageに切り替わります。

方法2:Code Snippetsプラグインで自動補完

より柔軟に制御したい場合は、Code Snippets(WordPress公式の無料プラグイン)を使い、PHPスニペットを追加します。当社の運用では以下のスニペットを稼働中です。

add_action('wp_head', function() {
    if (!is_singular()) return;
    $post_id = get_the_ID();
    $thumb_id = get_post_thumbnail_id($post_id);
    if (!$thumb_id) return;
    $meta = wp_get_attachment_image_src($thumb_id, 'full');
    if (!$meta) return;
    list($img_url, $width, $height) = $meta;
    $mime = get_post_mime_type($thumb_id);
    echo '<meta property="og:image:width" content="' . esc_attr($width) . '" />' . "\n";
    echo '<meta property="og:image:height" content="' . esc_attr($height) . '" />' . "\n";
    echo '<meta property="og:image:type" content="' . esc_attr($mime) . '" />' . "\n";
    echo '<meta property="og:image:secure_url" content="' . esc_attr($img_url) . '" />' . "\n";
    echo '<meta name="twitter:card" content="summary_large_image" />' . "\n";
    echo '<meta name="twitter:image" content="' . esc_attr($img_url) . '" />' . "\n";
}, 99);

このスニペットを「site-frontend」スコープで有効化すれば、すべての固定ページ・投稿でアイキャッチ画像をベースに必要なOGPタグが自動補完されます。

解決ステップ4:画像サイズと品質を最適化

Facebookが推奨するアイキャッチ画像の仕様は以下の通りです。

項目 推奨値
解像度 1200×630px(最低600×315px)
アスペクト比 1.91:1
ファイル形式 PNG / JPG
ファイルサイズ 8MB以下
テキスト含有率 全体の20%以下推奨

特に「テキスト含有率20%以下」は意外と見落とされがちです。広告用途では明確な制限ですが、オーガニックシェアでも視認性に大きく影響します。画像内に文字を入れる場合は、シンプルな短いコピーに絞るのがおすすめです。

横展開:他のSNSへの影響

Open Graph Protocolは、Facebookだけでなく以下のSNS・サービスでも参照されています。

  • X(旧Twitter):twitter:cardタグ+OGPタグ
  • LINE:OGPタグを参照
  • Slack:OGPタグを参照してリンクプレビュー表示
  • Discord:OGPタグを参照
  • Pinterest:OGPタグを部分参照

つまり、OGPタグを適切に設定すれば、1回の対策で全SNSのシェア時表示が改善されます。

検証ツールまとめ

設定変更後の確認には、各プラットフォームの公式ツールが便利です。

プラットフォーム 検証ツール
Facebook Sharing Debugger
X(Twitter) Card Validator
LinkedIn Post Inspector
汎用OGP OpenGraph.xyz

これらのツールで「Scrape Again」「Preview」を実行することで、現在Facebookやその他SNSがどんな情報を見ているかを確認できます。

飲食店経営者の視点で:なぜアイキャッチが重要か

最後に、当社が日々サポートしている飲食店オーナー様にも知っていただきたい視点です。

Facebookでシェアした投稿のクリック率(CTR)は、アイキャッチ画像の有無で3倍から5倍変わると言われています。お店の新メニュー紹介や、ブログ記事、イベント告知。せっかく時間をかけて作ったコンテンツが「画像なしのリンクだけ」でシェアされてしまうのは、機会損失そのものです。

特に飲食店の場合、料理写真の魅力こそが来店動機の起点です。投稿前にひと手間、Sharing Debuggerで確認するクセをつけるだけで、Facebookからの流入を大きく伸ばせます。

まとめ

Facebookでシェアした記事のアイキャッチ画像が表示されない原因は、多くの場合「Facebook側のOGPキャッシュ」です。

ステップ 内容
1 Sharing Debuggerでキャッシュを強制更新
2 既存シェア投稿は再シェアで対応
3 OGPタグを拡張して根本対策
4 画像サイズ・品質を1200×630pxに最適化

WordPress運用者であれば、Code Snippetsを使った自動補完で今後のすべての記事に対策を適用できます。1記事ごとに手作業で確認する必要はありません。

当社デリシャスノーツでは、WordPress運営の支援・SEO対策・SNSシェア最適化までを一気通貫でサポートしています。「自社ブログを書いているのに、なかなかSNSから流入が伸びない」とお悩みの飲食店オーナー様は、ぜひお気軽にご相談ください。

Facebookでアイキャッチ画像が表示されない問題の解決ステップを示す記事アイキャッチ

この記事が気に入ったら
いいね または フォローしてね!

是非シェアしてもらえると嬉しいです!
  • URLをコピーしました!
目次