og:imageで画像を変更してもFacebookで反映されないとき

お久しぶりです。最近は昔作った読みたい本が見つかる！電子書籍横断検索サイトeBook-1（イーブックワン） をリニューアルしていて楽しいです。

今日は、Facebookにサイトをシェアする際に表示されるog:imageで行き詰ったのでメモしておきます。
結果から言うと半日費やした割にあまりに間抜けなのですが、画像サイズがでかすぎました(´・ω・`)

以下、事の経緯と詳細。

やったこと

og:imageを変更したかったので、設定している画像に変更した画像を上書き保存しました。
metaタグを書き変えるのが面倒だなーという理由で上書きに。思えばこれが悲劇の始まりでした……。

試したこと

• 画像のリンクが正しいかチェックした。→正しく設定されており、飛び先は新しい画像が表示された
• 何度か時間を置いてシェアしようとした→古い画像が表示され続けた
• キャッシュの問題かと思い、「もう一度スクレイピング」しつつ、半日放置→改善されなかった
• デバッグツールで出ていたエラーは全て潰した→改善されなかった

解決のためにやったこと

OGP設定 og:image で画像を指定しても表示(反映)されない場合にチェックすべき事項 | 株式会社ジェイクール【ホームページ更新代行・制作】
この記事を参考に、画像の名前を変えてみた。
具体的には、aaa.png→bbb.pngにリネームし、og:imageもその名前に書き換えた。

<meta property="og:image" content="http://xxx.com/wp-content/uploads/aaa.png" />

↓こう書き換えた。

<meta property="og:image" content="http://xxx.com/wp-content/uploads/bbb.png" />

結果

デバッグツールで「もう一度スクレイピング」したところ、以下のエラーが出た……！

画像を使用できません
指定されたog:image URL「http://xxx.com/wp-content/uploads/bbb.png」は、最大サイズ(8 MB)を超えている、またはサーバーの応答が遅すぎるため、ダウンロードできませんでした。

原因

画像サイズをでかく作りすぎていた。実際には4MBほどであったが、それでも大きすぎたのか、もしくはサーバーの応答に時間がかかったらしい。

対処法

画像サイズを小さくした。適当なサイズだったのでついでに1200:630（推奨サイズ）に変更しておいた。

反省

キャッシュのせいで正しいエラーが表示できていなかったので、解決まで時間がかかった。
面倒臭がらずにもっと早くリネームすれば、ちゃんとしたエラーが表示されたはず。反省。

最近読んだ本

Webと本の人 Webooker （ウェブッカー）

フリーランス Webデザイナー・グラフィックデザイナー

2009年からIT業界に。
WebデザイナーとしてITベンチャー企業、SaaS企業、Web制作会社に勤務。
2016年11⽉より独⽴し、フリーランスのWebデザイナー、グラフィックデザイナーとして活動
2024年1月から大阪のシステム会社に勤務し、フリーランスとの二足のわらじで現在に⾄る。 2子の親。フルリモートワーク。