Xでシェアしても画像が出ない。うちの記事12本中5本、OGP画像が空だった話【個人ブログの実装ログ】

シェアされても、画像が出ない。

Xに自分のブログのURLを貼ったら、サムネイルが真っ白だった。

うちの記事12本中5本、OGP画像が空だった。今日はその話を、正直に書きます。

先に立場を明かします。うちは個人ブログで、記事ごとにアイキャッチ画像を設定する運用にしています。「アイキャッチさえ入れておけば、SNSシェア画像は自動で出る」。そう思い込んでいました。実際は違いました。

なぜアイキャッチがあるのにOGP画像が消えるのか

OGP画像とは、SNSでリンクをシェアしたときに表示される画像です。og:imageというmetaタグに、画像URLが書き込まれています。ブラウザで見えるアイキャッチ画像とは、別の場所に別の値として存在しています。

WordPressの管理画面でアイキャッチを設定すれば、Cocoonテーマは自動でog:imageに反映してくれます。ここまでは仕組み通りです。問題は、その反映タイミングとキャッシュの関係にありました。

12記事を1本ずつ開いて確認した話（実装ログ）

疑って、直近12記事を1本ずつFacebookシェアデバッガーとXのカード検証で開きました。手作業です。12本中5本、og:imageが空欄でした。

5本とも、WordPress管理画面ではアイキャッチが正しく設定されていました。ブラウザで記事を開いても、画像は普通に表示されます。おかしいのはSNS側だけでした。

空だった5記事に共通していた1つの条件

5本を見比べて、1つだけ共通点がありました。全部、公開後にアイキャッチを差し替えた記事でした。

原因はキャッシュです。うちはキャッシュプラグインを入れていて、公開直後のページがキャッシュされます。その後アイキャッチを差し替えても、キャッシュ済みのHTMLは古いままです。SNS側のクローラーは、その古いキャッシュを一度読みに来て、og:imageが空だった瞬間のデータをそのまま記憶していました。

1回読まれた記録は、キャッシュプラグイン側を直しても消えません。消えるのはSNS側のキャッシュで、これは自分のサーバーの外にあります。ここに気づくまで、遠回りしました。

直すのに何分かかったか（正直に）

作業自体は単純です。Facebookシェアデバッガーの「もう一度スクレイピング」ボタンを押す。Xのカード検証ツールでURLを再送信する。これだけで、SNS側のキャッシュは更新されます。

5記事分で、作業時間は7分でした。ただし、原因がキャッシュだと特定するまでに25分かかりました。最初はアイキャッチのファイル形式を疑い、次にCocoonの設定を疑い、最後にキャッシュだと気づきました。合計32分。原因究明の方が、修正の3倍以上かかりました。

今日チェックすべき2つのポイント（自分のブログで）

この記事を読んだら、5分でいいので自分のブログを確認してください。

• Xのカード検証ツールで実URLを開く：管理画面のプレビューではなく、公開URLをそのまま貼る。og:imageが空なら、画面上で一目で分かります。
• 公開後にアイキャッチを差し替えた記事を優先で見る：うちの5本は全部この条件でした。差し替え履歴があるかどうかは、記事の編集画面で確認できます。

OGP画像は、記事より先に見られる

読者は、記事を開く前にサムネイルを見ます。画像が空なら、クリックする理由が1つ減ります。うちは12本中5本で、その1つを自分から捨てていました。

アイキャッチを設定して安心するのではなく、公開後に一度SNS側のキャッシュも見る。それだけで防げるバグでした。今日、自分の直近記事を1本、Xのカード検証で開いてみてください。

---

ブログ運営の基礎をまとめて学ぶなら（PR）

OGP・キャッシュ・SEO設定まわりは、断片的な検索より1冊通読した方が早いです。個人ブログ運営の実務解説書はKindle Unlimited対象なら追加費用なしで読めます。
Kindle Unlimited でブログ運営関連書籍を読む（PR）

※本記事はアフィリエイトリンクを含みます（PR）。ツール名・仕様は変更されるため、最新は各公式でご確認ください。

—