MENTAにてフリーランス、Webデザイナー、グラフィックデザイナーを目指す方のよろず相談受付中!
Web

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

facebook
webooker

お久しぶりです。最近は昔作った読みたい本が見つかる!電子書籍横断検索サイト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(推奨サイズ)に変更しておいた。

反省

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

最近読んだ本

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

ABOUT ME
Webと本の人 Webooker (ウェブッカー)
Webと本の人 Webooker (ウェブッカー)
フリーランス Webデザイナー・グラフィックデザイナー
2009年からIT業界に。
WebデザイナーとしてITベンチャー企業、SaaS企業、Web制作会社に勤務。
2016年11⽉より独⽴し、フリーランスのWebデザイナー、グラフィックデザイナーとして活動
2024年1月から大阪のシステム会社に勤務し、フリーランスとの二足のわらじで現在に⾄る。 2子の親。フルリモートワーク。
記事URLをコピーしました