Facebookでブログ記事をシェアした際に、アイキャッチ画像が教示されず「破損マーク」が出てしまうことがないでしょうか。
私たちも先日、同じトラブルに直面しまして、Facebook側のキャッシュなど色々と探ってみたのですが、うまくいきませんでした。
最終的に原因がわかったのですが、それはアイキャッチ画像に「日本語のファイル名」を付与していたことでした。

この記事では、
・どのような症状が起きたのか
・どの工程で原因が判明したのか
・解決のために行った手順
・今後同じ問題を起こさないための対策
をわかりやすくまとめます。

WordPressを運用している方や、ブログをSNSにシェアする機会が多い方は、ぜひ参考にしてください。

FacebookでOGP画像が表示されないトラブルが発生
ブログ記事を書き終えて、いつも通りFacebookにシェアしようとしたところ、アイキャッチ画像が出てきません。
何度かリロードも繰り返しましたが、状況は改善されず。

URLを貼り付けて投稿しようとしたところ…アイキャッチ画像が出てこない

本来であればこのようにアイキャッチ画像が正しく表示される

まず疑ったのは「Facebookのキャッシュ」問題

キャッシュのクリアを正しく行うために、まずデバッガーツールを試してみました。
https://developers.facebook.com/tools/debug/

デバッガーツールにアクセスし、投稿したいブログのURLを貼りけます。
「デバッグ」をクリックすると解析された結果が表示されます。

このように本来ならアイキャッチ画像が表示される部分に「破損マーク」が出ています。
これではせっかくの投稿も味気ないものになってしまいます。

「もう一度スクレイピング」をクリックしてリロードを試すと、今度は記事とは関係無い写真が表示されてしまいました。（この画像はCreekvitのウェブサイト内の「コンタクト」で使用している画像になります）

そのほかに、アイキャッチ画像のサイズも確認して、Facebookへの投稿時に最適なサイズ（PCの場合 : 1200ピクセル×630ピクセル）にリサイズして再度デバッガーツールを試みるも、変化はなし。
ワードプレスのAIOSEOでFacebook用OGP画像を再設定してみましたが、これも効果がありませんでした。

最終的に判明した原因は“日本語ファイル名”だった

原因を調べても解決策が見当たらず、Facebookデバッガーツールの仕組みを再度考えてみました。
このツールは「FacebookがそのURLをどう見ているか」を教えてくれる仕組みです。
そのためアイキャッチで使う画像ファイルを正しく認識できないと画像を取得してくれません。
ということは原因はファイル名？と思いつき、アイキャッチ画像を改めて確認したところ、やはりファイル名に日本語が含まれていました。

× 例) 会社紹介ブログ_アイキャッチ.jpg
→ファイル名に日本語が含まれているため、デバッガーツールが正しく画像を見つけられない

⚪︎例) company-blog-eyecatch.jpg
→ファイル名が全て英語なのでデバッガーツールが画像を見つけることができる

アイキャッチ画像のファイル名を英語に修正し、ワードプレスでファイルの変更を行いました。
その後、Facebookデバッガーツールで改めてURLを入力したところ、無事にアイキャッチ画像が表示されました。

これで過去の投稿も「シェアする添付ファイルを更新」をクリックすれば正しくアイキャッチ画像が表示されます。

正しく画像が表示されていることを確認して「保存」をクリック。

これで無事にアイキャッチ画像が表示されました。

正解に辿り着くのに時間を要してしまいましたが、原因はいたってシンプルなことでした。

まとめ｜原因はシンプルだが、対処フローが重要

今回の原因は非常にシンプルなものでしたが、
トラブルシューティングの際に重要なのは「原因切り分けの順番」です。
• WordPress側の問題
• 画像ファイル名の問題
• Facebook側のキャッシュ問題

これらを順番に潰していくことで、確実に改善できます。

現在、過去のFacebook投稿も順次修正中ですが、
同様のトラブルに悩む方の参考になれば幸いです。

▶ 制作実績を見る
▶ 無料相談はこちらから