お久しぶりです。最近は昔作った読みたい本が見つかる！電子書籍横断検索サイト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（推奨サイズ）に変更しておいた。
反省
キャッシュのせいで正しいエラーが表示できていなかったので、解決まで時間がかかった。
面倒臭がらずにもっと早くリネームすれば、ちゃんとしたエラーが表示されたはず。反省。
